Syntax highlighting in jekyll using redcarpet

Question

I'm trying to get code highlighting to work for a simple blog built with jekyll. I want to be able to do code highlighting within posts written in markdown so I enabled redcarpet as markup language. This works all fine, the code gets formatted in <pre></pre> tags and all the various elements of the code get corresponding classes. e.g.

<span class="n">function</span>
<span class="n">saySomething</span>
<span class="p">()</span>
<span class="p">{</span>

etc.

This is awesome but this doesn't give us of the actual highlighting (color) yet. So I suppose there must be some css ready to copy and paste which actually does the styling of the different code elements. Or am I missing something completely?

I looked into some code highlighting libraries like prettify or prism but these do their own formatting with javascript in the browser. But since redcarpet already does the heavy lifting work of formatting the code it is not necessary doing it again.

Any hints?

Answer 1

You need some CSS magic. Use this one or pick one from here.

Answer 2

You can create the CSS with the highlighter itself

rougify style > rouge.css

Or

coderay stylesheet > coderay.css

Answer 3

I like to share the solution as I faced and it took much time to get rid of this issue. Default syntax highlighting is very poor in Jekyll. Like David said, You really need some CSS magic. Check this gist to solve the syntax highlighting problem.