feat: builtin mdc and shiki

close #4
close #5

Author: antfu

README.md

@@ -9,7 +9,9 @@ Nuxt Module to compile markdown files into Vue SFC at **build time**. This enabl
 
 - 📚 Write pages & components in Markdown
 - 💚 Use Vue components in Markdown.
-- 👌 Support SEO & Page metas
+- 👌 Support SEO & Page Meta
+- 📦 Built-in support for [MDC (Markdown Components)](https://remark-mdc.nuxt.space/)
+- 🧑‍💻 Syntax highlighting with light/dark mode support
 
 ## Install
 
@@ -46,7 +48,7 @@ pages/
   index.md
 ```
 
-## SEO & Page metas
+## SEO & Page Meta
 
 Use the `seo` property in the frontmatter to leverage [`useSeoMeta()`](https://nuxt.com/docs/api/composables/use-seo-meta):
 
@@ -64,7 +66,7 @@ seo:
 
 Will be transformed to:
 
-```vue
+```html
 <script setup>
 useSeoMeta({
   title: 'My title',
@@ -93,7 +95,7 @@ meta:
 
 Will be transformed to:
 
-```vue
+```html
 <script setup>
 definePageMeta({
   layout: 'dark',
@@ -137,6 +139,16 @@ I can use a Markdown component:
 <HelloWorld />
 ```
 
+[MDC (Markdown Components)](https://remark-mdc.nuxt.space/) support is also built-in, meaning you can also do:
+
+```md
+Inline :my-component{name="World"} syntax.
+
+::HelloWorld
+And also **block** syntax{.text-green}
+::
+```
+
 If the Markdown is not inside the `components/` directory, you can import it and use it as a normal Vue component:
 
 ```vue
@@ -149,6 +161,36 @@ import Readme from '../README.md'
 </template>
 ```
 
+## Syntax Highlighting
+
+We have [`shiki`](https://github.com/shikijs/shiki) built-in for syntax highlighting (actually uses [`shikiji`](https://github.com/antfu/shikiji), a ESM build of `shiki`). It's enabled by default and supports light/dark mode out of the box.
+
+To apply the dark mode theme, you will need to add a bit of CSS:
+
+###### Query-based Dark Mode
+
+```css
+@media (prefers-color-scheme: dark) {
+  .shiki,
+  .shiki span {
+    background-color: var(--shiki-dark-bg) !important;
+    color: var(--shiki-dark) !important;
+  }
+}
+```
+
+###### Class-based Dark Mode
+
+```css
+html.dark .shiki,
+html.dark .shiki span {
+  background-color: var(--shiki-dark-bg) !important;
+  color: var(--shiki-dark) !important;
+}
+```
+
+You can learn more about the [Dual Themes suppport](https://github.com/antfu/shikiji#lightdark-dual-themes).
+
 ## `<script>` and `<style>`
 
 Root-level `<script>` and `<style>` tags in Markdown files work just like they do in Vue SFCs, including `<script setup>`, `<style module>`, etc. The main difference here is that there is no `<template>` tag: all other root-level content is Markdown. Also note that all tags should be placed after the frontmatter:
@@ -175,7 +217,7 @@ The count is: {{ count }}
 
 ### How does this compare to [@nuxt/content](https://content.nuxtjs.org/)?
 
-`nuxt-compile-markdown` works at built time and converts the Markdown files to Vue files for maximum performance. This module does not have the ability to query content like [Nuxt Content Query Builder](https://content.nuxtjs.org/guide/displaying/querying). Also `nuxt-compile-markdown` does not support the MDC syntax (for now).
+`nuxt-compile-markdown` works at built time and converts the Markdown files to Vue files for maximum performance. This module does not have the ability to query content like [Nuxt Content Query Builder](https://content.nuxtjs.org/guide/displaying/querying).
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/nuxt-compile-markdown/latest.svg?style=flat&colorA=18181B&colorB=28CF8D

package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-compile-markdown",
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "pnpm@8.6.12",
+  "packageManager": "pnpm@8.7.0",
   "description": "My new Nuxt module",
   "license": "MIT",
   "repository": "nuxt-modules/compile-markdown",
@@ -29,20 +29,23 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.6.5",
-    "unplugin-vue-markdown": "^0.24.2"
+    "@nuxt/kit": "^3.7.0",
+    "markdown-it": "^13.0.1",
+    "markdown-it-mdc": "0.0.3",
+    "markdown-it-shikiji": "^0.6.3",
+    "shikiji": "^0.6.3",
+    "unplugin-vue-markdown": "^0.24.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.40.2",
+    "@antfu/eslint-config": "^0.41.0",
     "@nuxt/devtools": "latest",
-    "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "^3.6.5",
-    "@nuxt/test-utils": "^3.6.5",
-    "@types/node": "^20.5.0",
-    "changelogen": "^0.5.4",
-    "eslint": "^8.47.0",
-    "nuxt": "^3.6.5",
-    "shikiji": "^0.5.0",
-    "vitest": "^0.34.2"
+    "@nuxt/module-builder": "^0.5.0",
+    "@nuxt/schema": "^3.7.0",
+    "@nuxt/test-utils": "^3.7.0",
+    "@types/node": "^20.5.7",
+    "changelogen": "^0.5.5",
+    "eslint": "^8.48.0",
+    "nuxt": "^3.7.0",
+    "vitest": "^0.34.3"
   }
-}
+}

playground/components/Docs.md

@@ -1,3 +1,7 @@
 ### Markdown as Component
 
 This is a components written as markdown.
+
+| Table |
+| ----- |
+| <slot /> |

playground/nuxt.config.ts

@@ -1,5 +1,3 @@
-import { bundledLanguages, getHighlighter } from 'shikiji'
-
 export default defineNuxtConfig({
   // builder: 'webpack',
   modules: ['../src'],
@@ -10,24 +8,6 @@ export default defineNuxtConfig({
     },
   },
   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-',
-          })
-        }
-      })
-    },
+    mdc: true,
   },
 })

playground/package.json

@@ -8,7 +8,7 @@
     "generate": "nuxi generate"
   },
   "devDependencies": {
-    "@nuxt/webpack-builder": "^3.6.5",
+    "@nuxt/webpack-builder": "^3.7.0",
     "nuxt": "latest"
   }
 }

playground/pages/index.md

@@ -2,7 +2,7 @@
 title: Home!
 ---
 
-# Hello
+# Hello{style="color:skyblue"}
 
 Nuxt Page as Markdown
 
@@ -15,7 +15,9 @@ Nuxt Page as Markdown
 
 <Counter />
 
-<Docs />
+::docs
+Slot content
+::
 
 ---