Can Shiki be configured to use classes on tokens rather than styles?

[bjhess]

I'm exploring Shiki to add syntax highlighting in the editor for our blogging software, Pika. Our editor is using tiptap and I'm playing with the shiki extension, though I have been extending it myself to enhance it.

One place that is tripping me up is Shiki's use of style & color rather than class names in its spans. For example:

<span class="line">
  <span style="color:#CB7676">const </span>
  <span style="color:#BD976A">person</span>
  <span style="color:#666666"> =</span>
  <span style="color:#666666"> {</span>
  <span style="color:#B8A965">name</span>
  <span style="color:#666666">: </span>
  <span style="color:#C98A7D77">"</span>
  <span style="color:#C98A7D">Alice</span>
  <span style="color:#C98A7D77">"</span>
  <span style="color:#666666">, </span>
  <span style="color:#B8A965">age</span>
  <span style="color:#666666">: </span>
  <span style="color:#4C9A91">30</span>
  <span style="color:#666666"> };</span>
</span>

This is fine, and it looks good, but in our case we'll eventually want a way to allow our users to change their code theme and that theme change will need to apply across their existing blog posts. With this style/color technique, we would have to reprocess all of their existing posts in order to update their code styles. If the styling were class based, we could just switch a parent class to a new theme and have everything apply instantly.

I've read through the documentation and I haven't found any obvious option to move to a class-based syntax highlighting method, which makes me think that Shiki might not be the best option for us. Am I missing something obvious?

[ms264556]

They have a css theme here: https://shiki.style/guide/theme-colors#css-variables-theme. I haven't tried it though.

Or you could use a transformer to replace some/all styles with classes. I've done this and it was quite easy.

For example, there's a 3rd party transformer which uses [data] attributes instead of styles: https://github.com/jcayzac/copepod-modules/blob/main/packages/shiki-theme-token/README.md

[bjhess]

Thank you, @ms264556. I clearly am not great at digging through documentation!

Or you could use a transformer to replace some/all styles with classes. I've done this and it was quite easy.

I am a very experienced Ruby coder, but no expert at JS/TS. Is this where you'd start for replacing styles with classes? https://shiki.style/packages/transformers#transformerstyletoclass