Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Exploring ALL Pandoc's Skylighting themes #142

Open
badlydrawnrob opened this issue Jul 14, 2024 · 8 comments
Open

Exploring ALL Pandoc's Skylighting themes #142

badlydrawnrob opened this issue Jul 14, 2024 · 8 comments
Labels
enhancement help wanted

Comments

@badlydrawnrob
Copy link
Owner

badlydrawnrob commented Jul 14, 2024 •
edited
Loading

If you'd like to try out these themes, you can do it yourself!
Simply follow the "professional" documentation and edit the colour variables.

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

  1. Breeze Dark1 (dark)
  2. Espresso2 (dark)
  3. Haddock3 (light)
  4. Kate4 (light)
  5. Monochrome5 (light)
  6. Pygments6 (light)
  7. Tango7 (light)
  8. Zenburn8 (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

  1. 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!!

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

Footnotes

  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
Copy link
Owner Author

Breeze Dark

breezedark-html breezedark-python

@badlydrawnrob
Copy link
Owner Author

Espresso

espresso-html espresso-python

@badlydrawnrob
Copy link
Owner Author

Hadock

haddock-html haddock-python

@badlydrawnrob
Copy link
Owner Author

badlydrawnrob commented Jul 14, 2024 •
edited
Loading

Kate

kate-html kate-python javascript-kate

@badlydrawnrob
Copy link
Owner Author

Monochrome

monochrome-html monochrome-python

@badlydrawnrob
Copy link
Owner Author

badlydrawnrob commented Jul 14, 2024 •
edited
Loading

Pygments

pygments-html pygments-python javascript-pygments

@badlydrawnrob
Copy link
Owner Author

badlydrawnrob commented Jul 14, 2024 •
edited
Loading

Tango

tango-html tango-python javascript-tango

@badlydrawnrob
Copy link
Owner Author

Zenburn

zenburn-html zenburn-python zenburn-javascript

@badlydrawnrob badlydrawnrob changed the title Exploring _all_ Pandoc's Skylighting themes Exploring ALL Pandoc's Skylighting themes Jul 14, 2024
badlydrawnrob added a commit that referenced this issue Jul 15, 2024
@badlydrawnrob
Replace compiled files
c455127 
1. Rename compilations to be explicit
2. Create a `data` folder
3. Copy `missing-stripped` and `simple-stripped` from Anki Child Theme
4. Update `package.json` settings
5. Remove `data.less` as we're not using it anymore
6. Remove old `missing.md` and `simple.md` (see 3. as they're replaced)
7. Remove Pandoc `template.html` as we're not using it anymore
8. Rename `pandoc/` to `data/` as it makes more sense
9. Remove `skylighting.json` as we're hardcoding styles

You can create your own `json` file for Pandoc's Skylighting themes by running `pandoc --print-highlight-style pygments > my.theme` and replacing `pygments` with whatever theme you want to use.

@ https://pandoc.org/chunkedhtml-demo/13-syntax-highlighting.html

@ #142
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@badlydrawnrob