same render style as github markdown page for a page on my jekyll site

Question

I am using jekyll to generate my site and markdown files for creating posts.

I wrote markdown code to generate http://techtaste.in/blog/markdown/markdown-quick-reference.html. And I have used same content in https://github.com/Raghavendrak555/chari.github.io/blob/master/testMarkdown.md. These two pages render differently. Former one does not has syntax highlighted and latter one has.

What I can do to get the same sort of display for a markdown file in my site, same as it display in the github site.

Do I have to link any specific CSS file to achieve this or any config settings are needed in _config.yml.

Thanks in advance.

Answer 1

Do I have to link any specific CSS file to achieve this

Yes, exactly.

First you need to specify the markdown renderer and its syntax highligher. I use this:

markdown: kramdown
kramdown:
  syntax_highlighter: rouge

(I'm not sure if this is strictly necessary, but it's what I do and it works for me.)

The syntax highlighter wraps your code in a bunch of span elements with particular classes depending on what color it should be. (On GitHub, inspect the highlighted code to see what I'm talking about.) Then you need to include CSS files that specify colors for each of those classes.

To find these CSS files, do a google search for "rogue syntax highlighting css files" or "pygments css" (rogue and pygments use the same class names). Here is a good list, but according to this you might have to change one class name.

See also: Add syntax highlighting to gh-pages