Use Atom's One-Dark syntax theme with Rouge/Pygments

I really like Atom’s One-Dark syntax theme and I wanted to use it on my Jekyll powered blog, but I haven’t found any working CSS highlighter theme for Jekyll.

So, I decided to create a syntax.less file extracted from the CSS file used by Pygments/Rouge highlighter. (Atom’s syntax themes use LESS)

This file generates a CSS file, based on the syntax theme’s color settings and because the syntax.less file based on One-Dark’s colors.less file it’s compatible with other themes based on this theme (which does use the same variable names in the colors.less file). So you can use this file to generate Pygments/Rouge compatible stylesheet from One-Dark-Vivid, Firewatch, etc.

You can download some of the generated Pygments/Rouge compatible stylesheets from the following repository https://github.com/mgyongyosi/OneDarkJekyll/

Generate stylesheet from other Atom theme (which based on One Dark)

  1. npm install -g lessc less-plugin-clean-css
  2. Clone https://github.com/mgyongyosi/OneDarkJekyll/
  3. Download the colors.css file from the syntax theme’s repository (for example https://github.com/atom/one-dark-syntax/blob/master/styles/colors.less in case of One-Dark)
  4. Put the previously downloaded file next to syntax.less
  5. Run lessc syntax.less syntax.css --clean-css
  6. Enjoy

I tested it with Javascript, XML, C# and Ruby. In case you find any bug please feel free to create a pull request.

comments powered by Disqus