docs: add shikiji example

Author: antfu

package.json

@@ -42,6 +42,7 @@
     "changelogen": "^0.5.4",
     "eslint": "^8.47.0",
     "nuxt": "^3.6.5",
+    "shikiji": "^0.5.0",
     "vitest": "^0.34.2"
   }
 }

playground/app.vue

@@ -3,3 +3,25 @@
     <NuxtPage />
   </NuxtLayout>
 </template>
+
+<style>
+html {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+.shiki {
+  padding: 0.6rem;
+  border-radius: 0.2rem;
+  border: 1px solid #8882;
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--s-dark) !important;
+  background-color: var(--s-dark-bg) !important;
+}
+</style>

playground/nuxt.config.ts

@@ -1,10 +1,33 @@
+import { bundledLanguages, getHighlighter } from 'shikiji'
+
 export default defineNuxtConfig({
+  // builder: 'webpack',
   modules: ['../src'],
   devtools: { enabled: true },
   nitro: {
     prerender: {
       ignore: ['/redirect'],
     },
   },
-  // builder: 'webpack',
+  markdown: {
+    async markdownItSetup(md) {
+      const shiki = await getHighlighter({
+        themes: ['vitesse-dark', 'vitesse-light'],
+        langs: Object.keys(bundledLanguages) as any,
+      })
+
+      md.use((markdown) => {
+        markdown.options.highlight = (code, lang) => {
+          return shiki.codeToHtml(code, {
+            lang,
+            themes: {
+              light: 'vitesse-light',
+              dark: 'vitesse-dark',
+            },
+            cssVariablePrefix: '--s-',
+          })
+        }
+      })
+    },
+  },
 })

playground/pages/index.md

@@ -20,12 +20,26 @@ Nuxt Page as Markdown
 
 ---
 
-For [Nuxt](http://nuxt.com/)
-
-Checkout the [about page](/about) or the [blog](/blog).
-
 ```ts
 export default defineNuxtConfig({
   // Hello World
 })
 ```
+
+~~~md
+# Markdown
+
+And **nested** code blocks
+
+```rs
+fn main() {
+  println!("Hello World!");
+}
+```
+~~~
+
+---
+
+For [Nuxt](http://nuxt.com/)
+
+Checkout the [about page](/about) or the [blog](/blog).