I’ve always hated the way Jekyll uses liquid tags to highlight code snippets. I found a way to do this, which until today, I never knew existed.

Redcarpet is the answer here. Here’s what I wanted to do:

.element {
  color: $red;

Basically like the way you do code snippets on Github. Now, you might be thinking, “Kramdown has Github-Flavored-Markdown support!” But, after trying to get it to work for an hour or so, I was left frustrated. The fenced code block was technically working, but no syntax highlighting.

So I changed a few lines of code:

# _config.yml
markdown: redcarpet
markdown_ext: markdown,mkdown,mkdn,mkd,md

extensions: ["tables", "autolink", "strikethrough", "space_after_headers", "with_toc_data", "fenced_code_blocks", "no_intra_emphasis", "footnotes", "smart"]

Voilá! The fenced_code_blocks extension is the important one here, but personally, footnotes, and smart are crucial extensions for me too.1

That’s it! With a few lines of code, I improved my whole writing experience ten fold.

Update on November 15, 2016: I switched back to Kramdown because it was way easier and removed a dependency.

  1. The footnotes extension lets me write these. And the smart extension frees me up from having to manually type the right quotes. If you don’t know what I mean by this, Jason Santa Maria wrote about it. ↩︎

Series Hacking Jekyll

As I learn things about Jekyll, I try to write about them.

View Series →

Up Next

Stay in the Loop

I send a periodic email with life updates and new projects. No spam. No shenanigans.