Skip to content
Drop-in CSS themes for syntax highlighting in Hakyll
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
screenshots
LICENSE
README.md

README.md

Pandoc CSS for Hakyll

Drop-in CSS for code highlighting in Hakyll. Extracted from pandoc (skylighting) thanks to this blog.

Long story

Hakyll is a Haskell library for generating static sites which uses Pandoc for code syntax highlighting. But Hakyll by default does not include any CSS for highlighting your code. So even if pandoc adds CSS classes to the generated HTML, you won't be able to see any highlighting. This is probably because Hakyll wants users to have control of how to style their blog.

But the problem is CSS for pandoc is not easily available that is when I stumbled upon this blogpost.

Interstingly pandoc uses Skylighting internally which comes bundled with a bunch of themes. But those themes are not readily available as CSS files in the repo - they are generated from code. That blogpost explained how to generate CSS from Skylighting. So I went ahead and generated them for all available themes! 🎉

Usage

Look at the screenshots below, pick up css file for the one you like and drop into your css.

Screenshots

Here's how they look:

  1. breezeDark

    breezeDark theme screenshot

  2. espresso

    espresso theme screenshot

  3. haddock

    haddock theme screenshot

  4. kate

    kate theme screenshot

  5. monochrome

    monochrome theme screenshot

  6. pygments

    pygments theme screenshot

  7. tango

    tango theme screenshot

  8. zenburn

    zenburn theme screenshot

You can’t perform that action at this time.