Change code syntax highlighting color scheme/theme

[KL13NT]

Is there a way to change the highlight-js theme used in marp-core?

[yhatt]

Currently Marp is depending on CSS overloading to change highlight.js theme. Almost work by adding the content of highlight.js CSS within the inline style <style> or inherited Marp theme. (CSS @import rule won't be worked because it cannot apply Marpit's style scoping for slides)
https://github.com/highlightjs/highlight.js/tree/main/src/styles

---
marp: true
---

<style>
/* NOTE: .hljs should replace to pre */
pre {
  color: #000;
  background: #fff;
}

.hljs-subst,
.hljs-title {
  font-weight: normal;
  color: #000;
}

...
</style>

...

However, predefined highlight.js styles won't be reseted so may not render theme as expected if lacking overloaded styles in new highlight.js theme. For now there is no better solution.

[KL13NT]

According to these, each theme imports a highlight-js theme. I dug up the code for marp-core and marpit and found this piece of code:

https://github.com/marp-team/marpit/blob/78be557f411019bd30cff68792e004d67bf545cf/src/theme_set.js#L243

I think you could add a constructor option to specify a theme name, construct a scss import line @import '~highlight.js/themes/${themeName}', and then process it as additionalCSS. This would override the theme highlight-js CSS itself and fallback if a user doesn't specify a highlight-js theme.

Do you think this would be feasible? I'm not entirely aware of the whole Marp codebase.

[yhatt]

I think it would be possible by writing PostCSS plugin for Marp Core.

However, it's not that simple. We have to take multiple themes into account. Some Marp Core themes can switch highlight.js theme by class.
https://github.com/marp-team/marp-core/blob/79574dd9be8b50240c2d891a08fbfc1edf6f8a6a/themes/uncover.scss#L64-L71

In this case, both of highlight.js themes should be contained in CSS. Marp cannot determine which one of themes will be used when building CSS.

I think highlight theme customization is probably the common request. I have recieved some (non-direct) feedbacks by Marp users. We want a solution that is easy to customize by user, such as directive or inline style instead of JS constructor option.

And if necessarry for that, we may change the highlight library into the other. (Prism: marp-team/marp-core#194, or Shiki)

[yhatt]

To completely resolve this problem, we may require a highlight library based on CSS variables. highlight.js CSS theme is fully customizable but difficult to avoid overloading problems in above case.

Prism.js has a variable based theme by community https://github.com/antfu/prism-theme-vars and already used by slidev, a rising Markdown presentation tool. It can change only colors and can't change styles, but I think it's worth taking Prism.js by dropping highlight.js.

[KL13NT]

Agreed. What I'd generally need is to change the colors based on themes I select, even if I have to override the color variables manually using some config object.