Blog Dev GitHub 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
# BUILD SETTINGS
markdown: kramdown
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:
//kramdown
@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 :)