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)
npm install -g lessc less-plugin-clean-css
- Download the
colors.cssfile 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)
- Put the previously downloaded file next to
lessc syntax.less syntax.css --clean-css