OrigamiDuck
OrigamiDuck10mo ago

Syntax Highlighting

Thanks for creating an awesome tool! A couple questions about markdown code blocks: 1. Which library does marimo use for syntax highlighting (in markdown code blocks, not the editor itself)? 2. Is there a way that a notebook could modify the highlight colors interactively? (To give a simple example: mo.ui.switch that swaps between two themes)
4 Replies
Akshay
Akshay10mo ago
1. We use pygments for highlighting 2. Right now there isn’t an easy way to do this. However you can write arbitrary html with mo.Html — so it should be possible to display paragraphs styled however you like
OrigamiDuck
OrigamiDuckOP10mo ago
Thanks! I wonder if I could achieve something with <code> and a dynamic class assignment. Or I suppose I could call to pygments myself and render the resulting html actually.
Akshay
Akshay10mo ago
We use the CodeHilite extension for python-markdown in conjunction with Pygments: https://python-markdown.github.io/extensions/code_hilite/. If you go the Pygments route, I think you might need to load a stylesheet with Pygments' default styles (we don't include them all with marimo). I did a quick Google search and found this, which you might be able to use: https://www.jsdelivr.com/package/npm/pygments-css
jsDelivr
pygments-css CDN by jsDelivr - A CDN for npm and GitHub
A free, fast, and reliable CDN for pygments-css. CSS stylesheets for pygments
OrigamiDuck
OrigamiDuckOP10mo ago
Ah, great. Thank you!