[ Blog  Dev  GitHub  DataNinja  ]

A long time ago I switched my personal blog to GitHub Pages. In this post I want to share with you how easy is to change the look and feel of your code snippets.

NOTE: Please go and read how to configure your blog with GitHub Pages

1) Integrate kramdown and rouge

The first thing to do is to configure kramdown and rouge via the Gemfile. To do so, you only need to add the following lines to your Gemfile

 gem "kramdown", ">= 2.3.1"

NOTE: you can check mine here

2) Configure

Next thing to do is to configure your theme to use kramdown.

Go and edit your _config.yml file and add the following

markdown: kramdown
  input: GFM
  syntax_highlighter: rouge

3) Check your own style

There are a few syntax hightlighters that you can use. Now it´s time to check them and select the one that you like the most.

Go to this nice demo page and take a look :)

4) Generate your template

After knowing the one that you want to use, now it´s time to generate the .css template. Suppose that you liked the “base16.monokai.dark”

# Install rougify
sudo apt install ruby-rouge
# Go to the folder where you have your css templates
cd /your/css/template/for/jekyll/css/
# Generate the template
rougify style base16.monokai.dark > base16.monokai.dark.scss

5) Setup highlighter

To activate the css, you need to open your main.scss and include the relative path to load the file:

@import 'kramdown/base16monokaidark';

NOTE: You can see how I did in my own blog here

6) Use it!

To use the code in your post, you only need to include in markdown the “code” section, inlcuding the language you are using. Nothing else :)

You can check a post example here, with the real markdown