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

Question

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

Answer 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