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?

Tercet

Is there a reason you chose redcarpet for this? Jekyll makes it really easy to do syntax highlighting as shown here – Worsen

@Worsen Oh I didn't realize I could use this way of highlighting in combination with markdown. But the actual highlight obviously (colorization of the code) is still missing. Any ideas on how I can achieve that? – Tercet

Answer 1

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

Principal

Aalright that sounds like exactly what I was looking for, thanks a lot :) – Tercet

Answer 2

You can create the CSS with the highlighter itself

rougify style > rouge.css

Or

coderay stylesheet > coderay.css

Gemoets

Thanks!That sounds like what I'm trying to do. I'm still not sure how I would do this using jekyll...I don't really know any ruby or how to integrate rouge with jekyll's integrated code formatting. – Tercet

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.

Christos