Highlight fenced code-block contents with Rouge

[ashmaroli]

Resolves #23

An adaptation of feature implemented downstream, this version however mirrors markup generated by Kramdown

I chose to go with a bundled class instead of adding a dependency on sandfoxme/commonmarker-rouge as suggested in #23

[DirtyF]

@jekyllbot: merge +minor

[emmahsax]

@ashmaroli Is there something specific we need to change in our _config.yml or code in order to use the rouge syntax highlighting automatically? I previously used rouge syntax highlighting with kramdown, but after switching to CommonMark, none of the syntax highlighting shows up. I verified that the rendered HTML code adds something like <code class="language-css"> to each fenced in code block. But, my rendered HTML doesn't add this:

<div class="highlighter-rouge"><div class="highlight">

and it doesn't add any of the fancy classes and divs in order for the highlighting to render.

Here's an example commit showing the difference, where red is with kramdown, properly syntax highlighting, and green is with jekyll-commonmark: https://github.com/emmasax4/emmasax4.info/commit/b2184d9239fcb0e575b7b3d89788db41a5a22080#diff-802a7b5f22c9df93171efa7ed928c2f5L224-R224.

[ashmaroli]

@emmasax4 This patch has not been released yet. You need to point your Gemfile to the repository:

gem 'jekyll-commonmark', github: 'jekyll/jekyll-commanmark'

[emmahsax]

@ashmaroli Ah that was it! Thank you!

Sort of surprises of me, since it was merged over a year ago, but that worked! Thanks again for your help.