githubmarkdownsyntax-highlightinggithub-pagescodehighlighter

Add syntax highlighting to auto generated gh-pages


How to make code snippets highlighted, while taking advantage of Jekyll autogeneration on github pages side? Is it possible to make it work with backticks notation? Or do I have / should I , move to over notation of code blocks?


I have this very simple site (at given commit) gh-pages branch with _config.yml:

kramdown:
  input: GFM

which I added to make newline to be newlines in my code snippets. (apart from this I can get rid of it).

I wanted to make code higlighted, but keep using backticks notation, can it? (Github preview highlights it properly, however generated page is just black)

P.S. Somehow "Add syntax highlighting to gh-pages" Q&A does not help as you see under links (or I do sth wrong).


Solution

  • Use jekyll highlight tag with this jekyll original pygment highlight css file.

    {% highlight ruby %}
    def foo
      puts 'foo'
    end
    {% endhighlight %}
    

    You can also find a lot more css for pygment code highlighting.