how to specify highlight.js theme in css

[infinitesteps]

When creating a CSS theme, how do I specify the highlight.js style and what styles are available? Based on the syntax in gaia.scss I tried the following:

@import '~highlight.js/styles/zenburn';

But that didn't seem to work.

[yhatt]

~highlight.js is a syntax of sass-loader/rollup-plugin-postcss to resolve the path of node_modules. Marp Core is using rollup-plugin-postcss to build and bundle themes.

— #73 (reply in thread)

Setting up Sass preprocessor (and tools in around) is required to import highlight.js theme through @import correctly. The compiled theme CSS will replace @import to its contents. Marp ecosystem is always using the compiled themes.

Or you can pick a theme from highlight.js source and put raw styles to your theme directly.
https://github.com/highlightjs/highlight.js/tree/main/src/styles

---

FYI: We know highlight.js theming is one of confusable things in Marp theme, so have planned a new highlight system at marp-team/marp-core#296. You may have to follow up the update of code highlight in the future (but I promise changing highlight colors is going to become simpler than current :)

• Related
  • Change code syntax highlighting color scheme/theme #103
  • [v4?] New code highlighter marp-core#296