2016-06-12

Syntax highlighting on your middleman blog

Prerequisites

1. Step: Add two gems to your Gemfile

gem "middleman-syntax"
gem "kramdown"

“middleman-syntax” works with all major markdown parsers. I personally use kramdown. But feel free to use which ever parser you like.

2. Step: Edit config.rb

Add these lines to your config.rb.

active :syntax
set :markdown_enginge, kramdown
set :markdown, :fenced_code_blocks => true, smartypants => true

“fenced code blocks” adds a pretty background to your code blocks so that it differs from plain text on your site.

3. Step: Create a file highlighting.css.erb and put it into /source/stylesheets

Add this line to highlighting.css.erb.

 <%= Rouge::Themes::Github.render(:scope => '.highlight') %>

“Middleman-syntax” uses the ruby library Rouge by default. Rouge can hightlight 100 different languages and supports several themes like Github, colorful, molokai, monokai and thankful_eyes. I use the theme “Github”.

4. Step: You can start writing code now!

Ruby example:

#comment

$i = 0
$num = 5

while $i < $num  do
   puts("Inside the loop i = #$i" )
   $i +=1
end 

Put your code inside this wrapper:

~~~ruby
#Your code
~~~
comments powered by Disqus