Exploring ALL Pandoc's Skylighting themes

badlydrawnrob commented 1 month ago

Here's my favourites (in order):

Dark: breezedark, zenburn

Light: kate, haddock, tango, monochrome

🧑‍🎨 It's a personal taste, so decide for yourself! 🙋 Want to see more themes? Suggest one! Take a vote!

These themes are far from the best I've seen out in the wild, but they're very easy to shoo-in to the Anki Programming Theme, as the work has been done for me (simply copy from the json files). Code examples from here.

When I find some spare time, I'll aim to create a custom highlighting theme that's nicer (we used to use Solorized Light and Monokai but they came with problems when used with Pandoc's highlighter.

The current available Pandoc themes

Breeze Dark[^1] (dark)
~~Espresso~~[^2] (dark)
Haddock[^3] (light)
Kate[^4] (light)
Monochrome[^5] (light)
Pygments[^6] (light)
Tango[^7] (light)
Zenburn[^8] (Zenburn)

The colour pallette largely depends on what you're using it for. Are you mostly reviewing Python, Elm, Javascript, Ruby, any other programming language? You should be ok with most of the themes (you might want to give Zenburn a pass).

Trying to revise HTML, or other busy code samples? You might want to choose something with a more muted colour pallette (even perhaps, a light theme).

Other themes out in the wild

Dracula theme

Want more? Help out!

You can help me create these themes if you want to see it happen!

Because Pandoc's Skylighting doesn't offer quite so many "tokens", meaning wrappers for code block segments (like <span class="at">) as other syntax highlighters, we have to approximate the colours and styles as best we can.

It takes some time and patience!!

First, we'll need to decide which theme we want to create
Next, those of you who are good at CSS can help make it happen.

[^1]: Not bad. The Python output looks nicer than the HTML though. Green and red is kind of ugly. However, there's a couple of Visual Studio Code plugins which are nicer (and similar) — Breeze Dark and Breeze.

[^2]: Looks like something from the 80s. Blue-heavy and ugly HTML. [^3]: Nice and light. Simple. [^4]: Again, nice and light. Slightly nicer colour pallette (purple etc) [^5]: Very basic, but interesting use of underline in the HTML! [^6]: Python looks nice with the orange, but HTML ... red and green? Ugh. Christmas. [^7]: HTML feels a little busy, once again Python looks better. Fairly even colour pallette. [^8]: Yellow is back in fashion! HTML a little hard on the eye.

badlydrawnrob commented 1 month ago