feat: migrate to shikiji (#27)

docs/components/mdc/MdcPlayground.vue

@@ -38,16 +38,16 @@ Try me
 <style scoped>
 .wrapper {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr)); 
-  height: 400px; 
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  height: 400px;
   border: 1px solid;
   overflow: hidden;
-  border-radius: 0.25rem; 
+  border-radius: 0.25rem;
 }
 .wrapper > article {
   overflow: scroll;
 }
 .p-4 {
   padding: 1em;
 }
-</style>
+</style>

package.json

@@ -59,7 +59,7 @@
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
     "scule": "^1.0.0",
-    "shiki-es": "^0.14.0",
+    "shikiji": "^0.6.8",
     "ufo": "^1.3.0",
     "unified": "^11.0.3",
     "unist-builder": "^4.0.0",

playground/app.vue

@@ -12,6 +12,7 @@
     >
       <h1>{{ data?.name }}</h1>
       <MDCRenderer
+        tag="div"
         :body="body"
         :data="data"
         :prose="false"
@@ -21,18 +22,40 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { useDark, useLocalStorage } from '@vueuse/core'
 
-const md = ref(`---
+useDark()
+
+const key = 'nuxt-mdc-playground-code'
+const md = useLocalStorage(key,
+`---
 name: Sam
 ---
 
 # Simple
 
 Simple paragraph
 
-\`\`\`typescript[filename]{1-3,5}meta
-const a = 6;
+\`\`\`typescript[filename]{1,3-5}meta
+import { parseMarkdown } from '@nuxtjs/mdc/runtime'
+
+async function main(mdc: string) {
+  const ast = await parseMarkdown(mdc)
+
+  // Do your magic with parsed AST tree
+
+  return ast
+}
 \`\`\`
 `)
 </script>
+
+<style>
+.line {
+  display: block;
+}
+.line.highlight {
+  width: 100%;
+  background-color: #8882;
+}
+</style>

playground/nuxt.config.ts

@@ -3,10 +3,16 @@ export default defineNuxtConfig({
     '@nuxthq/ui',
     '../src/module'
   ],
+  // ssr: false,
   mdc: {
     highlight: {
-      theme: 'github-dark'
+      theme: {
+        default: 'vitesse-light',
+        dark: 'material-theme-palenight',
+      }
     }
   },
-  devtools: { enabled: true }
+  devtools: {
+    enabled: true
+  }
 })