badlydrawnrob / anki

Learn to code with Anki — flashcards and themes for all learning levels. Master your programming language of choice!
MIT License
742 stars 63 forks source link

Skylighting/Pandoc problems with `.classes` and `--color` #134

Closed badlydrawnrob closed 3 months ago

badlydrawnrob commented 8 months ago

Pandoc Skylighting limititations Other people have complained about this Some of the colours are just plain wrong. Partly my fault, partly Pandoc's.

See the live code here ⚠️ Use colorize plugin for Visual Studio Code

Making sure the colours are correct for Markdown code blocks isn't a very easy problem to solve, as it's somewhat limited to the way Pandoc's Skylighting renders it's HTML. Some bits of syntax that should be given a class such as .arguments, for instance are simply given a generic .function class.

Take this Elm code block for instance:

Screenshot 2024-02-19 at 15 09 57

Visual Studio Code — Colors

The colors also differ from Visual Studio Code's version of Monokai, but due to the way Pandoc's Skylighting structures it's code block HTML, it's going to be very difficult (if not impossible) to mimic. A simple example is how it renders "default" colours.

My default colour is white which covers characters such as :, [] and (). Visual studio code highlights some of these characters — it's just not possible with Pandoc's Skylighting as it doesn't wrap these characters in <spans> with .class names.

Screenshot 2024-02-19 at 15 08 38 Screenshot 2024-02-19 at 15 00 17

Perhaps Elm is the wrong standard to compare

Visual Studio Code's implentation of Elm is very good, color-wise. I don't think Skylighting does Elm particularly well, so perhaps using Python as a benchmark is a better idea (it's more likely to be perfected).

Other Skylighting issues

badlydrawnrob commented 8 months ago

For Elm code, Pygments isn't much better:

Screenshot 2024-02-19 at 15 58 21

Python seems better:

Screenshot 2024-02-19 at 15 59 50