Syntax highlighting for code snippets on a Middleman static website

Luckily, there is a gem for middleman that helps with code syntax highlighting: middleman-syntax gem

Just add the gem to your gemfile and run bundle install afterwards:

gem 'middleman-syntax'

Then you only need to activate syntax highlighting in your config.rb:

activate :syntax

To make sure your code snippets on middleman pages are properly formatted, you need to install a css styling and use the code helper provided by the gem. For the css, the easiest way is to create a syntax-highlighting.css.erb file in your source/stylesheets/ directory with the following content:

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

Possible themes are ThankfulEyes , Colorful , Github , Base16 , Base16::Solarized , Base16::Monokai , and Monokai

<%= stylesheet_link_tag "syntax_highlighting" %>

Alternatively, when using sass, include it in your sass file via @import 'syntax-highlighting'.

Once you have the css loaded, you can create code snippets with the following helper (verbatim from the middleman-syntax gem):

<% code("ruby") do %>
  def my_cool_method(message)
    puts message
  end
<% end %>

This will be rendered to:

def my_cool_method(message)
  puts message
end

This is how to quickly enable syntax highlighting on your middleman static website project! You can find a lot more options and details on the gem's github page.