Syntax Highlighting in Jekyll, liquid and Markdown

1. Highlighting the Jekyll way.

This method uses Liquid tags and works when published to Github Pages. It doesn’t work in Github’s viewer when browsing the repo.

{{ "{% highlight html linenos "}}%}
<div>this is some preformatted code</div>
{{ "{% endhighlight "}}%}

2. Highlighting the Markdown way

This method uses vanilla markdown formatting for code blocks (indented lines). It doesn’t work on its own when published, but works in Github’s viewer when browsing the repo.

.body {
    content: "this is css!";
}

To make this method work, use a javascript syntax highlighter. For my blog design I’ve chosen highlight.js, which detects the code’s language – this obviates the need for a class on the pre element. This is what I’m going to use for my jekyll blog.

3. Fenced code blocks with Redcarpet

This my preferred way to write code blocks with Markdown. Unfortunately, as I understand it, Jekyll won’t support the syntax highlighting until it is updated with Redcarpet 2 (see this issue). What’s great is that Github’s viewer automatically highlights based on language detection anyway, so your bases are covered both ways.

```html
<div>this is some preformatted code</div>
```

Example:

<div>this is some preformatted code</div>

4. Embedded Gists

Of course, you can always just put your code into gists embed them:

<script src="http://gist.github.com/1943530.js"></script>

Example: