Prevent theme class names in Shiki snippets (#42283)

* Prevent theme class names in Shiki snippets

* prettier

* alt: dont render at all

* prettier

diff --git a/site/astro.config.ts b/site/astro.config.ts
index 4898df5a2c2f302b754e5c3963281ffedeba543f..14534850423ac11055c95dcd06d122f75832d28a 100644 (file)
--- a/site/astro.config.ts
+++ b/site/astro.config.ts
@@ -39,8 +39,8 @@ export default defineConfig({
     syntaxHighlight: 'shiki',
     shikiConfig: {
       themes: {
-        light: bootstrapLight,
-        dark: bootstrapDark
+        light: { ...bootstrapLight, name: '' },
+        dark: { ...bootstrapDark, name: '' }
       },
       transformers: [
         transformerNotationDiff(),
@@ -48,7 +48,6 @@ export default defineConfig({
         {
           name: 'add-language-attribute',
           pre(node) {
-            // Add data-language attribute to pre tag so Code component can access it
             const lang = this.options.lang
             if (lang) {
               node.properties['dataLanguage'] = lang

diff --git a/site/src/libs/highlight.ts b/site/src/libs/highlight.ts
index bb6ae009d64d7bdff45edb78d3488192717d8b91..c643c73ce19dad72569a4baac33841015ab3daac 100644 (file)
--- a/site/src/libs/highlight.ts
+++ b/site/src/libs/highlight.ts
@@ -55,8 +55,8 @@ export async function highlightCode(
   const highlighted = await codeToHtml(code, {
     lang,
     themes: {
-      light: bootstrapLight as any,
-      dark: bootstrapDark as any
+      light: { ...(bootstrapLight as any), name: '' },
+      dark: { ...(bootstrapDark as any), name: '' }
     },
     transformers
   })