Obsidian theme for rouge syntax highlighter

At the time when my personal blog configuration was quite finished, I was looking at Jekyll’s syntax highlighter rouge, which uses monokai theme by default:

Monokai code theme

The monokai theme looks pretty much ok, but I got used to another amazing theme - Obsidian. I tried to find this theme on the Internet, and there was no “ready-to-use” Obsidian theme for rouge.

After some research, I’ve got that rouge and pygments highlighters are quite the same and I can use pygments themes with rouge highlighter. Than I’ve found Son of Obsidian pygments theme, which looks quite the same as Obsidian.

Having the Son of Obsidian theme I was able to adapt it and replace default monokai theme with it.

How to use “Son of Obsidian” theme in jekyll

  • Install rouge highlighter, if it’s not installed already:

    gem install rouge
  • Then, in your _config.yml, set Rouge as your syntax highlighter:

    highlighter: rouge
  • Install pip (the tool for installing Python packages):

    sudo easy_install pip
  • Install pygments

    pip install pygments
  • Clone Son of Obsidian repository and navigate to the cloned project root folder.
  • Open root shell (setup didn’t work for me as a regular user).

    sudo su
  • Install plugin from root

    setup.py install
  • Export theme in css file

    pygmentize -S sonofobsidian -f html > son-of-obsidian.css
  • Copy son-of-obsidian.css file to ${your-blog-root-directory}/css/son-of-obsidian.css
  • Open ${your-blog-root-directory}/css/main.css file and replace default monokai.css theme import with our new theme

    /* default theme */
    @import url(monokai.css);
    /* our new theme*/
    @import url(son-of-obsidian.css);
  • But that’s not all. Open son-of-obsidian.css in your favorite text editor, ideally with multi-line edit function. Add .highlight term at the beginning of all lines.

    .c { color: #99AA8A } /* Comment */
    .err { color: #960050; background-color: #1e0010 } /* Error */
    .k { color: #93C763 } /* Keyword */
    .l { color: #ae81ff } /* Literal */
    .highlight .c { color: #99AA8A } /* Comment */
    .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
    .highlight .k { color: #93C763 } /* Keyword */
    .highlight .l { color: #ae81ff } /* Literal */
  • Finally, we need to modify background color in our theme, otherwise code snippets will use default grey color as a background and it’s definitely not what we need. Add following lines to son-of-obsidian.css:

    .highlight pre { background-color: #272822; }
  • Configurations! Now we have an amazing dark Son of Obsidian theme fully configured! Source code of son-of-obsidian.css is available on github. That’s how will look basic Java “Hello World” sample:

    class HelloWorld {
      public static void main(String[] args) {
        System.out.println("Hello World!");

    Looks amazing, isn’t it?!


Here you can find other Jekyll pygments themes, which are compatible with rouge highlighter and are ready-to-use.

Even more, I’ve found another beautiful dark theme which is called darkly.

Darkly code theme

Happy code formatting :tada:

comments powered by Disqus