@nuxtjs/mdc 0.4.0 → 0.6.0

package/README.md

@@ -23,6 +23,11 @@ MDC supercharges regular Markdown to write documents interacting deeply with any
 
 Learn more about the MDC syntax on https://content.nuxtjs.org/guide/writing/mdc
 
+> [!Note]
+> You may utilize this package inside of your Nuxt project (standard configuration) or within any Vue project.
+>
+> See [Rendering in your Vue project](#rendering-in-your-vue-project) below for more information.
+
 ## Install
 
 ```bash
@@ -44,7 +49,7 @@ export default defineNuxtConfig({
 })
 ```
 
-That's it! You can start writing and rendering markdown files ✨
+That's it! You can start writing and rendering markdown files in your Nuxt project ✨
 
 ## Rendering
 
@@ -262,6 +267,145 @@ export default defineNuxtConfig({
 
 Checkout [`ModuleOptions` types↗︎](https://github.com/nuxt-modules/mdc/blob/main/src/types.ts).
 
+## Rendering in your Vue project
+
+The `<MDCRenderer>` component in combination with a few exported package utilities may also be utilized inside a normal (non-Nuxt) Vue project.
+
+To implement in your standard Vue project, follow the instructions below.
+
+### Install the package
+
+Follow the [install instructions above](#install), ignoring the step of adding the Nuxt module to a `nuxt.config.ts` file.
+
+### Stub Nuxt module imports
+
+Since you're not using Nuxt, you'll need to stub a few of the module's imports in your Vue projects's Vite config file. This is necessary to avoid errors when the module tries to access Nuxt-specific imports.
+
+Create a new file in your Vue project's root directory, such as `stub-mdc-imports.js`, and add the following content:
+
+```ts
+// stub-mdc-imports.js
+export default {}
+```
+
+Next, update your Vue project's Vite config file (e.g. `vite.config.ts`) to alias the module's imports to the stub file:
+
+```ts
+import { defineConfig } from 'vite'
+import path from 'path'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '#mdc-imports': path.resolve(__dirname, './stub-mdc-imports.js'),
+      '#mdc-configs': path.resolve(__dirname, './stub-mdc-imports.js'),
+    }
+  }
+})
+```
+
+### Usage
+
+Next, let's create a new [Vue composable](https://vuejs.org/guide/reusability/composables.html) to handle parsing the markdown content, as well as adding syntax highlighting to code blocks with [Shiki](https://shiki.style/).
+
+```ts
+// composables/useMarkdownParser.ts
+// Import package exports
+import {
+  createMarkdownParser,
+  rehypeHighlight,
+  createShikiHighlighter,
+} from '@nuxtjs/mdc/runtime'
+// Import desired Shiki themes and languages
+import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
+import HtmlLang from 'shiki/langs/html.mjs'
+import MdcLang from 'shiki/langs/mdc.mjs'
+import TsLang from 'shiki/langs/typescript.mjs'
+import VueLang from 'shiki/langs/vue.mjs'
+import ScssLang from 'shiki/langs/scss.mjs'
+import YamlLang from 'shiki/langs/yaml.mjs'
+
+export default function useMarkdownParser() {
+  let parser: Awaited<ReturnType<typeof createMarkdownParser>>
+
+  const parse = async (markdown: string) => {
+    if (!parser) {
+      parser = await createMarkdownParser({
+        rehype: {
+          plugins: {
+            highlight: {
+              instance: rehypeHighlight,
+              options: {
+                // Pass in your desired theme(s)
+                theme: 'material-theme-palenight',
+                // Create the Shiki highlighter
+                highlighter: createShikiHighlighter({
+                  bundledThemes: {
+                    'material-theme-palenight': MaterialThemePalenight,
+                  },
+                  // Configure the bundled languages
+                  bundledLangs: {
+                    html: HtmlLang,
+                    mdc: MdcLang,
+                    vue: VueLang,
+                    yml: YamlLang,
+                    scss: ScssLang,
+                    ts: TsLang,
+                    typescript: TsLang,
+                  },
+                }),
+              },
+            },
+          },
+        },
+      })
+    }
+    return parser(markdown)
+  }
+
+  return parse
+}
+```
+
+Now import the `useMarkdownParser` composable we just created along with an exported type interface into your host project's Vue component, and utilize them to process the raw markdown and initialize the `<MDCRenderer>` component.
+
+```vue
+<script setup lang="ts">
+import { onBeforeMount, ref, watch } from 'vue'
+// Import package exports
+import { MDCRenderer } from '@nuxtjs/mdc/runtime/components/MDCRenderer'
+import type { MDCParserResult } from '@nuxtjs/mdc/runtime/types/index'
+import { useMarkdownParser } from './composables/useMarkdownParser';
+
+const md = ref(`
+# Just a Vue app
+
+This is markdown content rendered via the \`<MDCRenderer>\` component, including MDC below.
+
+::alert
+Hello MDC
+::
+
+\`\`\`ts
+const a = 1;
+\`\`\`
+`);
+
+const ast = ref<MDCParserResult | null>(null)
+const parse = useMarkdownParser()
+
+onBeforeMount(async () => {
+  ast.value = await parse(md.value)
+})
+</script>
+
+<template>
+  <Suspense>
+    <MDCRenderer v-if="ast?.body" :body="ast.body" :data="ast.data" />
+  </Suspense>
+</template>
+```
+
 ## Contributing
 
 You can contribute to this module online with CodeSandbox:

package/dist/module.d.mts

@@ -32,6 +32,12 @@ interface ModuleOptions {
         theme?: MdcThemeOptions;
         /**
          * Languages to be bundled loaded by Shiki
+         *
+         * All languages used has to be included in this list at build time, to create granular bundles.
+         *
+         * Unlike the `preload` option, when this option is provided, it will override the default languages.
+         *
+         * @default ['js','jsx','json','ts','tsx','vue','css','html','vue','bash','md','mdc','yaml']
          */
         langs?: (BundledLanguage | LanguageRegistration)[];
         /**
@@ -56,12 +62,14 @@ interface ModuleOptions {
             [heading in 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6']?: boolean;
         };
     };
+    keepComments?: boolean;
     components?: {
         prose?: boolean;
         map?: Record<string, string>;
     };
 }
 
+declare const DefaultHighlightLangs: BundledLanguage[];
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
 declare module '@nuxt/schema' {
@@ -92,4 +100,4 @@ declare module '@nuxt/schema' {
     }
 }
 
-export { _default as default };
+export { DefaultHighlightLangs, _default as default };

package/dist/module.d.ts

@@ -32,6 +32,12 @@ interface ModuleOptions {
         theme?: MdcThemeOptions;
         /**
          * Languages to be bundled loaded by Shiki
+         *
+         * All languages used has to be included in this list at build time, to create granular bundles.
+         *
+         * Unlike the `preload` option, when this option is provided, it will override the default languages.
+         *
+         * @default ['js','jsx','json','ts','tsx','vue','css','html','vue','bash','md','mdc','yaml']
          */
         langs?: (BundledLanguage | LanguageRegistration)[];
         /**
@@ -56,12 +62,14 @@ interface ModuleOptions {
             [heading in 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6']?: boolean;
         };
     };
+    keepComments?: boolean;
     components?: {
         prose?: boolean;
         map?: Record<string, string>;
     };
 }
 
+declare const DefaultHighlightLangs: BundledLanguage[];
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
 declare module '@nuxt/schema' {
@@ -92,4 +100,4 @@ declare module '@nuxt/schema' {
     }
 }
 
-export { _default as default };
+export { DefaultHighlightLangs, _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@nuxtjs/mdc",
   "configKey": "mdc",
-  "version": "0.4.0"
+  "version": "0.6.0"
 }

package/dist/module.mjs

@@ -55,7 +55,8 @@ async function mdcConfigs({ options }) {
 async function mdcHighlighter({
   options: {
     shikiPath,
-    options
+    options,
+    useWasmAssets
   }
 }) {
   if (!options || !options.highlighter)
@@ -67,7 +68,14 @@ async function mdcHighlighter({
     ].find((file2) => existsSync(file2));
     if (!file)
       throw new Error(`[@nuxtjs/mdc] Could not find shiki highlighter: ${shikiPath}`);
-    const code = await fs.readFile(file, "utf-8");
+    let code = await fs.readFile(file, "utf-8");
+    if (useWasmAssets) {
+      code = code.replace(
+        /import\((['"])shiki\/wasm\1\)/,
+        // We can remove the .client condition once Vite supports WASM ESM import
+        "import.meta.client ? import('shiki/wasm') : import('shiki/onig.wasm')"
+      );
+    }
     const { bundledLanguagesInfo } = await import('shiki/langs');
     const langsMap = /* @__PURE__ */ new Map();
     options.langs?.forEach((lang) => {
@@ -149,16 +157,32 @@ function processUnistPlugins(plugins) {
   const imports = [];
   const definitions = [];
   Object.entries(plugins).forEach(([name, plugin]) => {
-    imports.push(`import ${pascalCase(name)} from '${plugin.src || name}'`);
+    const instanceName = `_${pascalCase(name).replace(/\W/g, "")}`;
+    imports.push(`import ${instanceName} from '${plugin.src || name}'`);
     if (Object.keys(plugin).length) {
-      definitions.push(`  '${name}': { instance: ${pascalCase(name)}, options: ${JSON.stringify(plugin.options || plugin)} },`);
+      definitions.push(`  '${name}': { instance: ${instanceName}, options: ${JSON.stringify(plugin.options || plugin)} },`);
     } else {
-      definitions.push(`  '${name}': { instance: ${pascalCase(name)} },`);
+      definitions.push(`  '${name}': { instance: ${instanceName} },`);
     }
   });
   return { imports, definitions };
 }
 
+const DefaultHighlightLangs = [
+  "js",
+  "jsx",
+  "json",
+  "ts",
+  "tsx",
+  "vue",
+  "css",
+  "html",
+  "vue",
+  "bash",
+  "md",
+  "mdc",
+  "yaml"
+];
 const module = defineNuxtModule({
   meta: {
     name: "@nuxtjs/mdc",
@@ -179,6 +203,7 @@ const module = defineNuxtModule({
         h6: false
       }
     },
+    keepComments: false,
     components: {
       prose: true,
       map: {}
@@ -223,7 +248,7 @@ const module = defineNuxtModule({
       });
       options.rehypePlugins ||= {};
       options.rehypePlugins.highlight ||= {};
-      options.rehypePlugins.highlight.src ||= await resolver.resolvePath("./runtime/highlighter/rehype");
+      options.rehypePlugins.highlight.src ||= await resolver.resolvePath("./runtime/highlighter/rehype-nuxt");
       options.rehypePlugins.highlight.options ||= {};
     }
     const registerTemplate = (options2) => {
@@ -266,7 +291,9 @@ const module = defineNuxtModule({
       getContents: mdcHighlighter,
       options: {
         shikiPath: resolver.resolve("../dist/runtime/highlighter/shiki"),
-        options: options.highlight
+        options: options.highlight,
+        // When WASM support enabled in Nitro, we could use the .wasm file directly for Cloudflare Workers
+        useWasmAssets: !nuxt.options.dev && !!nuxt.options.nitro.experimental?.wasm
       }
     });
     registerTemplate({
@@ -354,19 +381,11 @@ function resolveOptions(options) {
       default: "github-light",
       dark: "github-dark"
     };
-    options.highlight.langs ||= [
-      "js",
-      "ts",
-      "vue",
-      "css",
-      "html",
-      "vue",
-      "shell"
-    ];
+    options.highlight.langs ||= DefaultHighlightLangs;
     if (options.highlight.preload) {
       options.highlight.langs.push(...options.highlight.preload || []);
     }
   }
 }
 
-export { module as default };
+export { DefaultHighlightLangs, module as default };

package/dist/runtime/components/MDC.vue

@@ -4,6 +4,7 @@
     :body="data?.body"
     :toc="data?.toc"
     :excerpt="data?.excerpt"
+    :error="error"
   >
     <MDCRenderer
       v-if="body"
@@ -59,7 +60,7 @@ const props = defineProps({
 
 const key = computed(() => hash(props.value))
 
-const { data, refresh } = await useAsyncData(key.value, async () => {
+const { data, refresh, error } = await useAsyncData(key.value, async () => {
   if (typeof props.value !== 'string') {
     return props.value
   }

package/dist/runtime/components/MDCRenderer.vue

@@ -1,9 +1,8 @@
 <script>
-import { h, resolveComponent, Text, defineComponent, toRaw, computed } from "vue";
+import { h, resolveComponent, Text, Comment, defineComponent, toRaw, computed, getCurrentInstance } from "vue";
 import destr from "destr";
 import { kebabCase, pascalCase } from "scule";
 import { find, html } from "property-information";
-import { useRoute, useRuntimeConfig } from "#imports";
 import htmlTags from "../parser/utils/html-tags-list";
 const DEFAULT_SLOT = "default";
 const rxOn = /^@|^v-on:/;
@@ -51,10 +50,12 @@ export default defineComponent({
     }
   },
   async setup(props) {
-    const { mdc } = useRuntimeConfig().public;
+    const $nuxt = getCurrentInstance()?.appContext?.app?.$nuxt;
+    const route = $nuxt?.$route;
+    const { mdc } = $nuxt?.$config?.public || {};
     const tags = {
-      ...mdc.components.prose && props.prose !== false ? proseComponentMap : {},
-      ...mdc.components.map,
+      ...mdc?.components?.prose && props.prose !== false ? proseComponentMap : {},
+      ...mdc?.components?.map || {},
       ...toRaw(props.data?.mdc?.components || {}),
       ...props.components
     };
@@ -63,14 +64,14 @@ export default defineComponent({
       return Array.from(new Set(components)).sort().join(".");
     });
     await resolveContentComponents(props.body, { tags });
-    return { tags, contentKey };
+    return { tags, contentKey, route };
   },
   render(ctx) {
-    const { tags, tag, body, data, contentKey } = ctx;
+    const { tags, tag, body, data, contentKey, route } = ctx;
     if (!body) {
       return null;
     }
-    const meta = { ...data, tags };
+    const meta = { ...data, tags, $route: route };
     const component = tag !== false ? resolveVueComponent(tag || meta.component?.name || meta.component || "div") : void 0;
     const childrenRenderer = renderSlots(body, h, meta, meta);
     return component ? h(component, { ...meta.component?.props, ...this.$attrs, key: contentKey }, childrenRenderer) : childrenRenderer.default?.();
@@ -80,6 +81,9 @@ function renderNode(node, h2, documentMeta, parentScope = {}) {
   if (node.type === "text") {
     return h2(Text, node.value);
   }
+  if (node.type === "comment") {
+    return h2(Comment, null, node.value);
+  }
   const originalTag = node.tag;
   const renderTag = findMappedTag(node, documentMeta.tags);
   if (node.tag === "binding") {
@@ -99,7 +103,6 @@ function renderNode(node, h2, documentMeta, parentScope = {}) {
 function renderBinding(node, h2, documentMeta, parentScope = {}) {
   const data = {
     ...parentScope,
-    $route: () => useRoute(),
     $document: documentMeta,
     $doc: documentMeta
   };
@@ -207,7 +210,7 @@ function propsToDataRxBind(key, value, data, documentMeta) {
   return data;
 }
 const resolveVueComponent = (component) => {
-  if (!htmlTags.includes(component) && !component?.render) {
+  if (!htmlTags.includes(component) && !component?.render && !component?.ssrRender) {
     const componentFn = resolveComponent(pascalCase(component), false);
     if (typeof componentFn === "object") {
       return componentFn;
@@ -261,7 +264,7 @@ async function resolveContentComponents(body, meta) {
   }));
   function loadComponents(node, documentMeta) {
     const tag = node.tag;
-    if (node.type === "text" || tag === "binding") {
+    if (node.type === "text" || tag === "binding" || node.type === "comment") {
       return [];
     }
     const renderTag = findMappedTag(node, documentMeta.tags);

package/dist/runtime/components/MDCRenderer.vue.d.ts

@@ -39,6 +39,7 @@ declare const _default: DefineComponent<{
 }, {
     tags: any;
     contentKey: import("vue").ComputedRef<string>;
+    route: any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Content to render

package/dist/runtime/components/prose/ProseScript.vue

@@ -5,13 +5,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
 defineProps({
   src: {
     type: String,
     default: ''
   }
 })
-const isDev = computed(() => process.dev)
+const isDev = import.meta.env
 </script>

package/dist/runtime/highlighter/rehype-nuxt.d.ts

@@ -0,0 +1,3 @@
+import { type RehypeHighlightOption } from './rehype';
+export default rehypeHighlight;
+export declare function rehypeHighlight(opts?: Partial<RehypeHighlightOption>): (tree: import("hast").Root) => Promise<void>;

package/dist/runtime/highlighter/rehype-nuxt.mjs

@@ -0,0 +1,33 @@
+import { rehypeHighlight as rehypeHighlightUniversal } from "./rehype.mjs";
+const defaults = {
+  theme: {},
+  async highlighter(code, lang, theme, options) {
+    try {
+      if (process.browser && window.sessionStorage.getItem("mdc-shiki-highlighter") === "browser") {
+        return import("#mdc-highlighter").then((h) => h.default(code, lang, theme, options)).catch(() => ({}));
+      }
+      return await $fetch("/api/_mdc/highlight", {
+        params: {
+          code,
+          lang,
+          theme: JSON.stringify(theme),
+          options: JSON.stringify(options)
+        }
+      });
+    } catch (e) {
+      if (process.browser && e?.response?.status === 404) {
+        window.sessionStorage.setItem("mdc-shiki-highlighter", "browser");
+        return this.highlighter?.(code, lang, theme, options);
+      }
+    }
+    return Promise.resolve({ tree: [{ type: "text", value: code }], className: "", style: "" });
+  }
+};
+export default rehypeHighlight;
+export function rehypeHighlight(opts = {}) {
+  const options = { ...defaults, ...opts };
+  if (typeof options.highlighter !== "function") {
+    options.highlighter = defaults.highlighter;
+  }
+  return rehypeHighlightUniversal(options);
+}

package/dist/runtime/highlighter/rehype.d.ts

@@ -5,4 +5,4 @@ export interface RehypeHighlightOption {
     highlighter?: Highlighter;
 }
 export default rehypeHighlight;
-export declare function rehypeHighlight(opts?: RehypeHighlightOption): (tree: Root) => Promise<void>;
+export declare function rehypeHighlight(opts: RehypeHighlightOption): (tree: Root) => Promise<void>;

package/dist/runtime/highlighter/rehype.mjs

@@ -1,32 +1,8 @@
 import { visit } from "unist-util-visit";
 import { toString } from "hast-util-to-string";
-const defaults = {
-  theme: {},
-  async highlighter(code, lang, theme, options) {
-    if (process.browser && window.sessionStorage.getItem("mdc-shiki-highlighter") === "browser") {
-      return import("#mdc-highlighter").then((h) => h.default(code, lang, theme, options));
-    }
-    try {
-      return await $fetch("/api/_mdc/highlight", {
-        params: {
-          code,
-          lang,
-          theme: JSON.stringify(theme),
-          options: JSON.stringify(options)
-        }
-      });
-    } catch (e) {
-      if (process.browser && e?.response?.status === 404) {
-        window.sessionStorage.setItem("mdc-shiki-highlighter", "browser");
-        return this.highlighter?.(code, lang, theme, options);
-      }
-    }
-    return Promise.resolve({ tree: [{ type: "text", value: code }], className: "", style: "" });
-  }
-};
 export default rehypeHighlight;
-export function rehypeHighlight(opts = {}) {
-  const options = { ...defaults, ...opts };
+export function rehypeHighlight(opts) {
+  const options = opts;
   return async (tree) => {
     const tasks = [];
     const styles = [];

package/dist/runtime/highlighter/shiki.mjs

@@ -53,7 +53,7 @@ export function createShikiHighlighter({
       if (bundledLangs[lang]) {
         await shiki2.loadLanguage(bundledLangs[lang]);
       } else {
-        if (process.dev) {
+        if (import.meta.env) {
           console.warn(`[@nuxtjs/mdc] Language "${lang}" is not loaded to the Shiki highlighter, fallback to plain text. Add the language to "mdc.highlight.langs" to fix this.`);
         }
         lang = "text";
@@ -64,7 +64,7 @@ export function createShikiHighlighter({
         if (bundledThemes[theme2]) {
           await shiki2.loadTheme(bundledThemes[theme2]);
         } else {
-          if (process.dev) {
+          if (import.meta.env) {
             console.warn(`[@nuxtjs/mdc] Theme "${theme2}" is not loaded to the Shiki highlighter. Add the theme to "mdc.highlight.themes" to fix this.`);
           }
           themesObject[color] = "none";

package/dist/runtime/index.d.ts

@@ -1,2 +1,4 @@
-export { parseMarkdown } from './parser';
+export { parseMarkdown, createMarkdownParser } from './parser';
+export { rehypeHighlight } from './highlighter/rehype';
+export { createShikiHighlighter } from './highlighter/shiki';
 export * from './utils/node';

package/dist/runtime/index.mjs

@@ -1,2 +1,4 @@
-export { parseMarkdown } from "./parser/index.mjs";
+export { parseMarkdown, createMarkdownParser } from "./parser/index.mjs";
+export { rehypeHighlight } from "./highlighter/rehype.mjs";
+export { createShikiHighlighter } from "./highlighter/shiki.mjs";
 export * from "./utils/node.mjs";

package/dist/runtime/parser/compiler.d.ts

@@ -1 +1,2 @@
-export declare function compileHast(this: any): void;
+import type { MDCParseOptions } from '../types';
+export declare function compileHast(this: any, options?: MDCParseOptions): void;

package/dist/runtime/parser/compiler.mjs

@@ -1,7 +1,7 @@
 import { toString } from "hast-util-to-string";
 import Slugger from "github-slugger";
 import { validateProps } from "./utils/props.mjs";
-export function compileHast() {
+export function compileHast(options = {}) {
   const slugs = new Slugger();
   function compileToJSON(node, parent) {
     if (node.type === "root") {
@@ -55,6 +55,12 @@ export function compileHast() {
         };
       }
     }
+    if (options.keepComments && node.type === "comment") {
+      return {
+        type: "comment",
+        value: node.value
+      };
+    }
     return null;
   }
   this.Compiler = (tree) => {

package/dist/runtime/parser/index.d.ts

@@ -1,10 +1,6 @@
-import type { MDCData, MDCParseOptions, MDCRoot, Toc } from '../types';
-export declare const parseMarkdown: (md: string, inlineOptions?: MDCParseOptions) => Promise<{
-    data: MDCData;
-    body: MDCRoot;
-    excerpt: MDCRoot | undefined;
-    toc: Toc | undefined;
-}>;
+import type { MDCParseOptions, MDCParserResult, MDCRoot } from '../types';
+export declare const createMarkdownParser: (inlineOptions?: MDCParseOptions) => Promise<(md: string) => Promise<MDCParserResult>>;
+export declare const parseMarkdown: (md: string, inlineOptions?: MDCParseOptions) => Promise<MDCParserResult>;
 export declare function contentHeading(body: MDCRoot): {
     title: string;
     description: string;

package/dist/runtime/parser/index.mjs

@@ -10,7 +10,7 @@ import { generateToc } from "./toc.mjs";
 import { nodeTextContent } from "../utils/node.mjs";
 let moduleOptions;
 let generatedMdcConfigs;
-export const parseMarkdown = async (md, inlineOptions = {}) => {
+export const createMarkdownParser = async (inlineOptions = {}) => {
   if (!moduleOptions) {
     moduleOptions = await import(
       "#mdc-imports"
@@ -27,7 +27,7 @@ export const parseMarkdown = async (md, inlineOptions = {}) => {
     ...generatedMdcConfigs || [],
     ...inlineOptions.configs || []
   ];
-  if (inlineOptions.highlight != null && inlineOptions.highlight != false && typeof inlineOptions.highlight.highlighter !== "function") {
+  if (inlineOptions.highlight != null && inlineOptions.highlight != false && inlineOptions.highlight.highlighter !== void 0 && typeof inlineOptions.highlight.highlighter !== "function") {
     if (import.meta.dev)
       console.warn("[@nuxtjs/mdc] `highlighter` passed to `parseMarkdown` is should be a function, but got " + JSON.stringify(inlineOptions.highlight.highlighter) + ", ignored.");
     inlineOptions = {
@@ -44,7 +44,10 @@ export const parseMarkdown = async (md, inlineOptions = {}) => {
     highlight: moduleOptions?.highlight
   }, defaults);
   if (options.rehype?.plugins?.highlight) {
-    options.rehype.plugins.highlight.options = options.highlight || {};
+    options.rehype.plugins.highlight.options = {
+      ...options.rehype.plugins.highlight.options || {},
+      ...options.highlight || {}
+    };
   }
   let processor = unified();
   for (const config of mdcConfigs) {
@@ -60,34 +63,40 @@ export const parseMarkdown = async (md, inlineOptions = {}) => {
     processor = await config.unified?.rehype?.(processor) || processor;
   }
   await useProcessorPlugins(processor, options.rehype?.plugins);
-  processor.use(compileHast);
+  processor.use(compileHast, options);
   for (const config of mdcConfigs) {
     processor = await config.unified?.post?.(processor) || processor;
   }
-  const { content, data: frontmatter } = await parseFrontMatter(md);
-  const processedFile = await processor.process({ value: content, data: frontmatter });
-  const result = processedFile.result;
-  const data = Object.assign(
-    contentHeading(result.body),
-    frontmatter,
-    processedFile?.data || {}
-  );
-  let toc;
-  if (data.toc !== false) {
-    const tocOption = defu(data.toc || {}, options.toc);
-    toc = generateToc(result.body, tocOption);
-  }
-  return {
-    data,
-    body: result.body,
-    excerpt: result.excerpt,
-    toc
+  return async (md) => {
+    const { content, data: frontmatter } = await parseFrontMatter(md);
+    const processedFile = await processor.process({ value: content, data: frontmatter });
+    const result = processedFile.result;
+    const data = Object.assign(
+      contentHeading(result.body),
+      frontmatter,
+      processedFile?.data || {}
+    );
+    let toc;
+    if (data.toc !== false) {
+      const tocOption = defu(data.toc || {}, options.toc);
+      toc = generateToc(result.body, tocOption);
+    }
+    return {
+      data,
+      body: result.body,
+      excerpt: result.excerpt,
+      toc
+    };
   };
 };
+export const parseMarkdown = async (md, inlineOptions = {}) => {
+  const parser = await createMarkdownParser(inlineOptions);
+  return parser(md);
+};
 export function contentHeading(body) {
   let title = "";
   let description = "";
-  const children = body.children.filter((node) => node.type !== "text" && node.tag !== "hr");
+  const children = body.children.filter((node) => node.type === "element" && node.tag !== "hr");
   if (children.length && children[0].tag === "h1") {
     const node = children.shift();
     title = nodeTextContent(node);

package/dist/runtime/types/parser.d.ts

@@ -1,6 +1,8 @@
 import type { Options as RehypeOption } from 'remark-rehype';
 import type { RehypeHighlightOption } from '../highlighter/rehype';
 import type { MdcConfig } from './config';
+import type { MDCData, MDCRoot } from './tree';
+import type { Toc } from './toc';
 export interface RemarkPlugin {
     instance?: any;
     options?: Array<any> | Record<string, any>;
@@ -25,8 +27,15 @@ export interface MDCParseOptions {
         depth?: number;
         searchDepth?: number;
     };
+    keepComments?: boolean;
     /**
      * Inline mdc.config.ts
      */
     configs?: MdcConfig[];
 }
+export interface MDCParserResult {
+    data: MDCData;
+    body: MDCRoot;
+    excerpt: MDCRoot | undefined;
+    toc: Toc | undefined;
+}

package/dist/runtime/types/tree.d.ts

@@ -2,13 +2,17 @@ export type MDCText = {
     type: 'text';
     value: string;
 };
+export type MDCComment = {
+    type: 'comment';
+    value: string;
+};
 export type MDCElement = {
     type: 'element';
     tag: string;
     props: Record<string, any> | undefined;
-    children: Array<MDCElement | MDCText>;
+    children: Array<MDCElement | MDCText | MDCComment>;
 };
-export type MDCNode = MDCElement | MDCText;
+export type MDCNode = MDCElement | MDCText | MDCComment;
 export type MDCRoot = {
     type: 'root';
     children: Array<MDCNode>;

package/dist/runtime/utils/ast.mjs

@@ -1,4 +1,7 @@
 export function flattenNodeText(node) {
+  if (node.type === "comment") {
+    return "";
+  }
   if (node.type === "text") {
     return node.value || "";
   } else {

package/dist/types.d.mts

@@ -5,4 +5,4 @@ import type {  } from './module.js'
 
 
 
-export type { default } from './module.js'
+export type { DefaultHighlightLangs, default } from './module.js'

package/dist/types.d.ts

@@ -5,4 +5,4 @@ import type {  } from './module'
 
 
 
-export type { default } from './module'
+export type { DefaultHighlightLangs, default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/mdc",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Nuxt MDC module",
   "repository": "nuxt-modules/mdc",
   "license": "MIT",
@@ -16,10 +16,22 @@
       "import": "./dist/config.mjs",
       "require": "./dist/config.cjs"
     },
-    "./runtime": "./dist/runtime/index.mjs",
-    "./dist/runtime": "./dist/runtime/index.mjs",
-    "./runtime/*": "./dist/runtime/*.mjs",
-    "./dist/runtime/*": "./dist/runtime/*.mjs"
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.mjs"
+    },
+    "./dist/runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.mjs"
+    },
+    "./runtime/*": {
+      "types": "./dist/runtime/*.d.ts",
+      "import": "./dist/runtime/*.mjs"
+    },
+    "./dist/runtime/*": {
+      "types": "./dist/runtime/*.d.ts",
+      "import": "./dist/runtime/*.mjs"
+    }
   },
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
@@ -50,15 +62,15 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.10.0",
-    "@shikijs/transformers": "^1.0.0-beta.3",
+    "@nuxt/kit": "^3.10.3",
+    "@shikijs/transformers": "^1.1.7",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.3",
-    "@vue/compiler-core": "^3.4.15",
+    "@vue/compiler-core": "^3.4.21",
     "consola": "^3.2.3",
     "debug": "^4.3.4",
     "defu": "^6.1.4",
-    "destr": "^2.0.2",
+    "destr": "^2.0.3",
     "detab": "^3.0.2",
     "github-slugger": "^2.0.0",
     "hast-util-to-string": "^3.0.0",
@@ -75,12 +87,12 @@
     "rehype-sort-attributes": "^5.0.0",
     "remark-emoji": "^4.0.1",
     "remark-gfm": "^4.0.0",
-    "remark-mdc": "^3.0.2",
+    "remark-mdc": "^3.1.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
-    "scule": "^1.2.0",
-    "shiki": "^1.0.0-beta.3",
-    "ufo": "^1.3.2",
+    "scule": "^1.3.0",
+    "shiki": "^1.1.7",
+    "ufo": "^1.4.0",
     "unified": "^11.0.4",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
@@ -90,19 +102,19 @@
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.10.0",
+    "@nuxt/schema": "^3.10.3",
     "@nuxt/test-utils": "^3.11.0",
-    "@nuxt/ui": "^2.13.0",
+    "@nuxt/ui": "^2.14.1",
     "@types/mdurl": "^1.0.5",
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.11.24",
     "changelogen": "^0.5.5",
-    "eslint": "^8.56.0",
-    "nuxt": "^3.10.0",
+    "eslint": "^8.57.0",
+    "nuxt": "^3.10.3",
     "rehype": "^13.0.1",
-    "release-it": "^17.0.3",
-    "vitest": "^1.2.2"
+    "release-it": "^17.1.1",
+    "vitest": "^1.3.1"
   },
-  "packageManager": "pnpm@8.15.1",
+  "packageManager": "pnpm@8.15.4",
   "release-it": {
     "git": {
       "commitMessage": "chore(release): release v${version}"