chore: improve code highlighting

Author: farnabaz

packages/mdc-syntax/build.config.mjs

@@ -4,7 +4,17 @@ export default defineBuildConfig({
   entries: [
     {
       type: 'bundle',
-      input: ['./src/index.ts', './src/stream.ts'],
+      input: [
+        './src/index.ts',
+        './src/stream.ts',
+        './src/react/index.ts',
+        './src/react/components/MDC.tsx',
+        './src/react/components/MDCRenderer.tsx',
+        './src/react/components/index.tsx',
+        './src/react/components/stream.tsx',
+        './src/react/components/prose/ProsePre.tsx',
+        './src/react/components/prose/ProsePreShiki.tsx',
+      ],
     },
     {
       type: 'transform',
@@ -16,18 +26,5 @@ export default defineBuildConfig({
       input: './src/utils',
       outDir: './dist/utils',
     },
-    {
-      type: 'bundle',
-      input: [
-        './src/react/index.ts',
-        './src/react/components/MDC.tsx',
-        './src/react/components/MDCRenderer.tsx',
-        './src/react/components/index.tsx',
-        './src/react/components/stream.tsx',
-        './src/react/components/prose/ProsePre.tsx',
-        './src/react/components/prose/ProsePreShiki.tsx',
-      ],
-      outDir: './dist',
-    },
   ],
 })

packages/mdc-syntax/src/vue/components/MDC.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue'
 import { computed, defineComponent, h, shallowRef, watch } from 'vue'
 import type { ParseResult } from '../../index'
-import { parse, parseAsync } from '../../index'
+import { parseAsync } from '../../index'
 import type { ParseOptions } from '../../types'
 import { MDCRenderer } from './MDCRenderer'
 
@@ -110,22 +110,9 @@ export const MDC = defineComponent({
     }))
 
     async function parseMarkdown() {
-      if (!props.streaming) {
-        if (!streamComponents.value) {
-          streamComponents.value = await import('mdc-syntax/vue/components/stream')
-            .then(m => m.proseStreamComponents)
-        }
-        parsed.value = await parseAsync(markdown.value, {
-          highlight: !props.streaming,
-          ...props.options,
-        })
-      }
-      else {
-        parsed.value = parse(markdown.value, {
-          ...props.options,
-          highlight: false,
-        })
-      }
+      parsed.value = await parseAsync(markdown.value, {
+        ...props.options,
+      })
     }
 
     watch(markdown, parseMarkdown)

packages/mdc-syntax/src/vue/components/prose/ProsePre.vue

@@ -119,7 +119,7 @@ async function copyCode() {
     </div>
 
     <!-- Shiki renderer -->
-    <pre class="shiki-container bg-neutral-100 dark:bg-neutral-800 rounded-b-lg p-4 border border-neutral-300 dark:border-neutral-700"><slot /></pre>
+    <pre class="shiki-container bg-neutral-100 dark:bg-neutral-800 overflow-x-auto rounded-b-lg p-4 border border-neutral-300 dark:border-neutral-700"><slot /></pre>
   </div>
 </template>
 

packages/mdc-syntax/src/vue/components/prose/ProsePreShiki.vue

@@ -1,30 +1,8 @@
 <script setup lang="ts">
 import { ShikiCachedRenderer } from 'shiki-stream/vue'
-import { createHighlighter } from 'shiki'
 import { computed, onMounted, ref, watch } from 'vue'
 import { textContent } from 'minimark'
-
-// Singleton highlighter instance shared across all code blocks
-let highlighterInstance: any = null
-let highlighterPromise: Promise<any> | null = null
-
-async function getHighlighter() {
-  if (highlighterInstance) {
-    return highlighterInstance
-  }
-
-  if (!highlighterPromise) {
-    highlighterPromise = createHighlighter({
-      themes: ['material-theme-lighter', 'material-theme-palenight', 'github-dark', 'github-light'],
-      langs: ['javascript', 'typescript', 'vue', 'html', 'css', 'json', 'markdown', 'bash', 'tsx', 'shell', 'text'],
-    }).then((hl) => {
-      highlighterInstance = hl
-      return hl
-    })
-  }
-
-  return highlighterPromise
-}
+import { getHighlighter } from '../../../utils/shiki-highlighter'
 
 const props = withDefaults(defineProps<{
   // @eslint-disable-next-line vue/prop-name-casing
@@ -37,7 +15,7 @@ const props = withDefaults(defineProps<{
   fallbackWithHeaderClass?: string
   shikiStyle?: Record<string, string>
 }>(), {
-  theme: 'github-dark',
+  theme: 'material-theme-palenight',
   containerClass: 'my-4',
   fallbackClass: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 p-4 rounded-lg overflow-x-auto border border-neutral-300 dark:border-neutral-700',
   fallbackWithHeaderClass: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 p-4 pt-12 rounded-lg overflow-x-auto m-0 border border-neutral-300 dark:border-neutral-700',
@@ -100,7 +78,10 @@ async function copyCode() {
 
 // Load highlighter on mount
 onMounted(() => {
-  getHighlighter()
+  getHighlighter({
+    themes: { light: 'material-theme-palenight', dark: 'material-theme-lighter' },
+    languages: ['javascript', 'typescript', 'vue', 'html', 'css', 'json', 'markdown', 'bash', 'jsx', 'tsx', 'shell'],
+  })
     .then((hl) => {
       highlighter.value = hl
       isLoading.value = false
@@ -175,7 +156,7 @@ onMounted(() => {
     <!-- Loading state -->
     <pre
       v-if="isLoading"
-      class="bg-neutral-100 dark:bg-neutral-800 rounded-lg pt-16 p-4 border border-neutral-300 dark:border-neutral-700"
+      class="bg-neutral-100 dark:bg-neutral-800 rounded-lg pt-12 p-4 border border-neutral-300 dark:border-neutral-700"
     ><code>{{ codeContent }}</code></pre>
 
     <!-- Shiki renderer -->
@@ -185,8 +166,8 @@ onMounted(() => {
       :highlighter="highlighter"
       :code="codeContent"
       :lang="language || 'text'"
-      :theme="theme || 'github-dark'"
-      class="shiki-container bg-neutral-100 dark:bg-neutral-800 rounded-lg pt-16 p-4 border border-neutral-300 dark:border-neutral-700"
+      :theme="theme || 'material-theme-palenight'"
+      class="shiki-container bg-neutral-100 dark:bg-neutral-800 rounded-l overflow-x-auto pt-12 p-4 border border-neutral-300 dark:border-neutral-700"
       :style="shikiStyle"
     />