Do I Need to Generate a CSS File from Pygments for My Jekyll Blog, to Enable Colorful Code Snippet

Do I need to generate a css file from Pygments for my jekyll blog, to enable colorful code snippet?

You need to include syntax.css

You can take the sample from my repo
https://github.com/madhur/madhur.github.com/blob/master/files/css/syntax.css

and then customize it according to your theme. Mine is customized for dark backgrounds.

Highlight with Jekyll and pygments doesn't work

You need to have the css generated to highlight.

$ pygmentize -S default -f html > css/pygments/default.css

Jekyll offsetting initial line of code snippet highlighting

From Jekyll css

pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0; }

code padding-left needs to be 0.

I can't change jekyll syntax highlighter at my github blog

You're mixing up the command line instructions with the jekyll instructions. Also it seems that your command rougify style monokai.sublime does not work properly as if I look at the CSS file in your blog it says unknown theme: monokaisubline (https://azzyjk.github.io//assets/css/syntax.css).

So easiest solution just c&p one of these CSS stylesheets into your style.css files https://github.com/jwarby/jekyll-pygments-themes.

Here are the Jekyll docs https://jekyllrb.com/docs/liquid/tags/#code-snippet-highlighting

Edit:

As CSS is now correct but the correct CSS classes are not applied to your code snippets, can you try to set your syntax highlighter in your jekyll config.

kramdown:
  syntax_highlighter: rouge
  input: GFM

Use kramdown with pygments in Jekyll

Author of "that site" here.

It depends on the Jekyll version. For the version when the post was written, that was enough. At least Jekyll 1.x requires that matches is defined in the MarkdownConverter, like so:

def matches(ext)
  ext =~ /^\.md$/i
end

Another problem that appears with Jekyll 1.x is that every custom Markdown converter is ignored. I worked around this by by stating the output extension explicitly

def output_ext(ext)
  ".html"
end

and tell Jekyll that to look for a bogus Markdown extension by setting

markdown_ext: foo

in _config.yml.

---

Related Topics