3

I made my github blog.
I want to change my syntax highlighter to rouge.
I do this.

gem install rouge
rougify style monokai.sublime > assets/css/syntax.css

//default.html
link href="{{ site.baseurl }}/assets/css/syntax.css" rel="stylesheet" />

// _config.yml
markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  syntax_highlighter_opts:
    default_lang: html
    css_class   : 'syntax'

But my blog's syntax highlighter stay none.

How can I change this?

https://github.com/azzyjk/azzyjk.github.io.
https://azzyjk.github.io/GithubBlog_2/

Chrome DevTools Picture

azzyjk
  • 127
  • 1
  • 8

1 Answers1

1

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
Christian Bruckmayer
  • 2,167
  • 6
  • 10
  • Oh, I see. I want to apply 'monokai.sublime' but I apply "monokai.subline'. So I change my syntax.css to 'monokai.sublime'. But it doesn't work too. Refresh this page it apply syntax highlighter a little minute. – azzyjk Jul 01 '20 at 11:57
  • See my edit, can you try to set the `syntax_highlighter` option in the `kramdown` block to `rouge`. – Christian Bruckmayer Jul 01 '20 at 14:44
  • I fix my _config.yml file but it looks same. I think 'memoir' theme is too kind. So, it have default syntax-highlighter. And I think, it hinder rouge syntax-highlighter... – azzyjk Jul 01 '20 at 14:53
  • Look my chrome devtools picture. 'prism.css' & 'theme.css' affect '.highlight' – azzyjk Jul 01 '20 at 14:59