Kramdown / Rouge not working for Code Syntax Highlighting

[CodeRedPaul]

Hi Chris

Having an issue getting Rouge to work properly with your theme. I've tried a couple of things... My latest attempt below as per this GitHub issue:

markdown: kramdown
# !github-pages! mandatory › https://help.github.com/articles/using-jekyll-with-pages/#configuration-settings-you-cannot-change
# Since Jekyll 3 the default highlighter is Rouge (replaced Pygments.rb in v44)
highlighter: rouge

# More › http://kramdown.gettalong.org/quickref.html
# Options › http://kramdown.gettalong.org/options.html
kramdown:
  input: GFM
  # https://github.com/jekyll/jekyll/pull/4090
  syntax_highlighter: rouge

  # Rouge Highlighter in Kramdown › http://kramdown.gettalong.org/syntax_highlighter/rouge.html
  # span, block element options fall back to global
  syntax_highlighter_opts:
    # Rouge Options › https://github.com/jneen/rouge#full-options
    css_class: 'highlight'
    #line_numbers: true # bad idea, spans don't need linenos and would inherit this option
    span:
      line_numbers: false
    block:
      line_numbers: true
      start_line: 1

Any ideas?

Thanks so much,

Paul

[LoicH]

Hi CodeRedPaul, I'm in the same boat, I can't use 'Rouge'.

I use jekyll v3.7.3, rouge v2.2.1, jekyll-theme-prologue v0.3.2 on Ubuntu

[Drakmyth]

Did you add a stylesheet? While Jekyll comes with built-in Rouge support, it does not come with a pre-defined stylesheet so coloring won't work out of the box. You can find various example stylesheets online, or you can use a tool* like pygments-css to generate one. Stick that stylesheet in the _sass folder and make sure to import it in the assets/css/main.scss file. Then your syntax highlighting should work.

*Correction: pygments-css is actually a repo with a bunch of pre-generated pygments stylesheets you can use. Pygmentize is the actual tool

[jerpint]

@Drakmyth I'm not that familiar with Jekyll, do you mind helping me out a bit?

Say I want to use monokai.css from the stylesheets online, I would put that file directly in _sass folder, then what statement would I use to import it in the assets/css/main.scss file? Something along the lines of @import "monokai.css"?

[jerpint]

@Drakmyth @LoicH I managed to make it work by sticking the monokai.css in the the assets/css/ folder and importing in assets/css/main/scss

[Drakmyth]

Yep, either location works. It just changes the path you pass into the import statement. In my setup, I have (for example) _sass/monokai.scss and then in assets/css/main.scss I have @import "highlight"; but you can do it how you have it as well.

[asbjornu]

I was having the problem where Rogue didn't seem to do anything at all (not wrapping code keywords in <span> elements, so there would be nothing to style for the Pygments stylesheet).

Then I discovered https://github.com/jekyll/jekyll/issues/3641#issuecomment-182182216, removed highlight: rouge from the root of _config.yml and add syntax_highlighter: rouge underneath the kramdown node instead:

kramdown:
  syntax_highlighter: rouge