Cache shiki across multiple instances

docs/src/lib/components/code/index.ts

@@ -29,6 +29,8 @@ const carta = new Carta({
 	}
 });
 
+export const highlighter = await carta.highlighter();
+
 /**
  * Highlights the code blocks.
  * @param codeBlocks The code blocks to highlight
@@ -39,22 +41,23 @@ export async function highlightCodeBlocks<T extends string>(
 ): Promise<HighlightedCodeBlocks<T>> {
 	const highlightedCodeBlocks: HighlightedCodeBlocks<T> = {} as HighlightedCodeBlocks<T>;
 
-	const highlighter = await carta.highlighter();
 	if (!highlighter) {
 		throw new Error('Failed to get highlighter');
 	}
 
-	const loadedLanguages = highlighter.getLoadedLanguages();
+	const shiki = highlighter.shikiHighlighter();
+
+	const loadedLanguages = shiki.getLoadedLanguages();
 
 	for (const key in codeBlocks) {
 		const codeBlock = codeBlocks[key];
 
 		if (isBundleLanguage(codeBlock.lang) && !loadedLanguages.includes(codeBlock.lang)) {
-			await highlighter.loadLanguage(codeBlock.lang);
+			await shiki.loadLanguage(codeBlock.lang);
 			loadedLanguages.push(codeBlock.lang);
 		}
 
-		const html = highlighter.codeToHtml(codeBlock.code, {
+		const html = shiki.codeToHtml(codeBlock.code, {
 			lang: codeBlock.lang,
 			theme: 'houston'
 		});

docs/src/routes/api/utilities/+page.server.ts

@@ -35,7 +35,9 @@ const codeBlocks = {
 		lang: 'ts',
 		code: deindent`
       const highlighter = await carta.highlighter();
-      const userTheme = carta.theme;`
+			const shiki = highlighter.shikiHighlighter();
+			const html = await shiki.codeToHtml('console.log('Hello World!')', { lang: 'js' });
+			`
 	},
 	isBundleLanguage: {
 		lang: 'ts',

docs/src/routes/api/utilities/+page.svelte

@@ -46,7 +46,7 @@
 	<code>Carta.highlighter</code>
 </h2>
 
-<p>Get the Shiki highlighter.</p>
+<p>Get the highlighter used by Carta.</p>
 
 <Code code={data.codeBlocks.carta_highlighter} />
 

docs/src/routes/plugins/math/+page.server.ts

@@ -1,4 +1,4 @@
-import { highlightCodeBlocks } from '$lib/components/code';
+import { highlightCodeBlocks, highlighter } from '$lib/components/code';
 import { deindent } from '$lib/utils';
 
 const codeBlocks = {
@@ -39,11 +39,11 @@ const codeBlocks = {
       <MarkdownEditor {carta} />`
 	},
 	usageInline: {
-		lang: 'cartamd',
+		lang: highlighter?.settings.langHash as string,
 		code: 'Pythagorean theorem: $a^2+b^2=c^2$'
 	},
 	usageBlock: {
-		lang: 'cartamd',
+		lang: highlighter?.settings.langHash as string,
 		code: deindent`
       **Laplace** transform:
       $$

packages/carta-md/src/lib/internal/carta.ts

@@ -194,6 +194,12 @@ export interface Plugin {
 	onLoad?: (data: { carta: Carta }) => void;
 }
 
+const USE_HIGHLIGHTER =
+	BROWSER ||
+	// Replaced at build time to tree-shake shiki on the server, if specified
+	typeof __ENABLE_CARTA_SSR_HIGHLIGHTER__ === 'undefined' ||
+	__ENABLE_CARTA_SSR_HIGHLIGHTER__ === true;
+
 export class Carta {
 	public readonly sanitizer?: (html: string) => string;
 	public readonly historyOptions?: TextAreaHistoryOptions;
@@ -233,13 +239,7 @@ export class Carta {
 
 	public async highlighter(): Promise<Highlighter | undefined> {
 		if (this.mHighlighter) return this.mHighlighter;
-		if (
-			!BROWSER &&
-			// Replaced at build time to tree-shake shiki on the server, if specified
-			typeof __ENABLE_CARTA_SSR_HIGHLIGHTER__ !== 'undefined' &&
-			__ENABLE_CARTA_SSR_HIGHLIGHTER__ === false
-		)
-			return;
+		if (!USE_HIGHLIGHTER) return;
 
 		this.mHighlighter = (async () => {
 			const hl = await import('./highlight');
@@ -434,12 +434,7 @@ export class Carta {
 	 * @returns Rendered html.
 	 */
 	public async render(markdown: string): Promise<string> {
-		if (
-			BROWSER ||
-			// Replaced at build time to tree-shake shiki on the server, if specified
-			typeof __ENABLE_CARTA_SSR_HIGHLIGHTER__ === 'undefined' ||
-			__ENABLE_CARTA_SSR_HIGHLIGHTER__ === true
-		) {
+		if (USE_HIGHLIGHTER) {
 			const hl = await import('./highlight');
 			const { loadNestedLanguages } = hl;
 

packages/carta-md/src/lib/internal/components/Input.svelte

@@ -109,24 +109,8 @@
 	const highlight = async (text: string) => {
 		const highlighter = await carta.highlighter();
 		if (!highlighter) return;
-		let html: string;
 
-		const hl = await import('$lib/internal/highlight');
-		const { isSingleTheme } = hl;
-
-		if (isSingleTheme(highlighter.theme)) {
-			// Single theme
-			html = highlighter.codeToHtml(text, {
-				lang: highlighter.lang,
-				theme: highlighter.theme
-			});
-		} else {
-			// Dual theme
-			html = highlighter.codeToHtml(text, {
-				lang: highlighter.lang,
-				themes: highlighter.theme
-			});
-		}
+		const html = highlighter.codeToHtml(text);
 
 		if (carta.sanitizer) {
 			highlighted = carta.sanitizer(html);