feat(preview): use highlight options from @nuxtjs/mdc to highlight code snippets (#158)

Co-authored-by: Baptiste Leproux <leproux.baptiste@gmail.com>

Author: farnabaz

package.json

@@ -52,6 +52,7 @@
     "js-yaml": "^4.1.1",
     "minimatch": "^10.1.1",
     "nuxt-component-meta": "^0.15.0",
+    "shiki": "^3.19.0",
     "unstorage": "1.17.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -73,7 +73,9 @@ watch(() => `${document.value?.id}-${props.draftItem.version}-${props.draftItem.
 watch(tiptapJSON, async (json) => {
   const cleanedTiptap = removeLastEmptyParagraph(json!)
 
-  const { body, data } = await tiptapToMDC(cleanedTiptap)
+  const { body, data } = await tiptapToMDC(cleanedTiptap, {
+    highlightTheme: host.meta.getHighlightTheme(),
+  })
 
   const compressedBody: MarkdownRoot = compressTree(body)
   const toc: Toc = generateToc(body, { searchDepth: 2, depth: 2 } as Toc)

src/app/src/components/content/ContentEditorTipTap.vue

@@ -1,3 +1,9 @@
 export interface MarkdownParsingOptions {
   compress?: boolean
 }
+
+export interface SyntaxHighlightTheme {
+  default: string
+  dark?: string
+  light?: string
+}

src/app/src/types/content.ts

@@ -4,7 +4,7 @@ import type { RouteLocationNormalized } from 'vue-router'
 import type { MediaItem } from './media'
 import type { Repository } from './git'
 import type { ComponentMeta } from './component'
-import type { MarkdownParsingOptions } from './content'
+import type { MarkdownParsingOptions, SyntaxHighlightTheme } from './content'
 
 export * from './file'
 export * from './item'
@@ -24,6 +24,7 @@ export interface StudioHost {
     dev: boolean
     getComponents: () => ComponentMeta[]
     defaultLocale: string
+    getHighlightTheme: () => SyntaxHighlightTheme
   }
   on: {
     routeChange: (fn: (to: RouteLocationNormalized, from: RouteLocationNormalized) => void) => void