I’ve al­ways hated the way Jekyll uses liq­uid tags to high­light code snip­pets. I found a way to do this, which un­til to­day, I never knew ex­isted.

Redcarpet is the an­swer here. Here’s what I wanted to do:

```scss
.element {
  color: $red;
}
```

Basically like the way you do code snip­pets on Github. Now, you might be think­ing, Kramdown has Github-Flavored-Markdown sup­port!” But, af­ter try­ing to get it to work for an hour or so, I was left frus­trated. The fenced code block was tech­ni­cally work­ing, but no syn­tax high­light­ing.

So I changed a few lines of code:

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

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

Voilá! The fenced_code_blocks ex­ten­sion is the im­por­tant one here, but per­son­ally, footnotes, and smart are cru­cial ex­ten­sions for me too.1

That’s it! With a few lines of code, I im­proved my whole writ­ing ex­pe­ri­ence ten fold.


Update on November 15, 2016: I switched back to Kramdown be­cause it was way eas­ier and re­moved a de­pen­dency.


  1. The footnotes ex­ten­sion lets me write these. And the smart ex­ten­sion frees me up from hav­ing to man­u­ally 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