carta icon indicating copy to clipboard operation
carta copied to clipboard

How to use it with Shiki?

Open mohit2152sharma opened this issue 9 months ago • 1 comments

I was trying to use this with shiki syntax highlighting, but couldn't find a mention in documents. It would be helpful if a document is added on how to. use it with shiki.

So far I am doing this, I have setup the carta object as follows:

import { code } from '@cartamd/plugin-code';
import { Carta } from 'carta-md';
import DOMPurify from 'isomorphic-dompurify';
import '@cartamd/plugin-code/default.css';

export const carta = new Carta({
	sanitizer: DOMPurify.sanitize,
	rehypeOptions: { allowDangerousHtml: true },
	extensions: [
		code({
			theme: {
				light: 'github-dark',
				dark: 'github-light'
			}
		})
	],
	shikiOptions: {
		themes: ['github-dark', 'github-light']
	}
});

And then i pass it to the Markdown component.

But it renders the code like following, I am pretty sure, I am missing something here. Any help is much appreciated.

Image

mohit2152sharma avatar Mar 22 '25 20:03 mohit2152sharma

Hi, I can't really grasp the issue here. You want to use Shiki as the highlighter, right? Shiki is the default highlighter, and the one provided by @cartamd/plugin-code, and the one used in your example as far as I can tell, so everything seems to be working right. In fact, in the image you provided the code is highlighted, and it seems even with the theme selected.

Am I missing something?

BearToCode avatar Mar 23 '25 21:03 BearToCode