@md-plugins/vite-md-plugin 0.1.0-alpha.25 → 0.1.0-alpha.27

package/README.md

@@ -1,5 +1,7 @@
 # @md-plugins/viteMdPlugin
 
+See the [documentation](https://md-plugins.netlify.app/vite-plugins/vite-md-plugin/overview) for more details.
+
 An **opinionated Vite plugin** that transforms Markdown files into Vue Single File Components (SFCs). This plugin integrates Markdown processing directly into your Vite-based Vue project, enabling seamless Markdown-to-Vue workflows.
 
 ## Features
@@ -32,12 +34,12 @@ The `viteMdPlugin` is built on top of the following plugins:
 Install the plugin via your preferred package manager:
 
 ```bash
-# With npm:
-npm install @md-plugins/vite-md-plugin
-# Or with Yarn:
-yarn add @md-plugins/vite-md-plugin
-# Or with pnpm:
+# with pnpm:
 pnpm add @md-plugins/vite-md-plugin
+# with Yarn:
+yarn add @md-plugins/vite-md-plugin
+# with npm:
+npm install @md-plugins/vite-md-plugin
 ```
 
 ## Usage
@@ -65,38 +67,32 @@ If you’re using the Quasar Framework, additional configuration is needed to en
 
 1. Update `quasar.config.(js|ts)`:
 
-```js
-import { viteMdPlugin } from '@md-plugins/vite-md-plugin';
-import { menu } from './src/.q-press/assets/menu'; // be sure to create this file
-
-export default defineConfig((ctx) => {
-  // ...
-```
+- ```js
+      import { viteMdPlugin } from '@md-plugins/vite-md-plugin'
+      import { menu } from './src/.q-press/assets/menu' // be sure to create this file
 
-```js
-build: {
-  vueRouterMode: 'history', // Required for proper hash link handling
-
-  viteVuePluginOptions: {
-    include: [/\.(vue|md)$/], // Include Markdown files
-  },
-
-  vitePlugins: [
-      [
-        viteMdPlugin,
-        {
-          path: ctx.appPaths.srcDir + '/markdown',
-          menu: sidebar as MenuItem[],
+      export default defineConfig((ctx) => {
+      // ...
+      build: {
+        vueRouterMode: 'history', // Required for proper hash link handling
+        viteVuePluginOptions: {
+          include: [/\.(vue|md)$/], // Include Markdown files
         },
-      ],
-    // ...
-  ],
-},
-
-framework: {
-  autoImportVueExtensions: ['vue', 'md'], // Enable auto-import for Markdown extensions
-},
-```
+       vitePlugins: [
+         [
+          viteMdPlugin,
+          {
+           path: ctx.appPaths.srcDir + '/markdown',
+            menu: sidebar as MenuItem[],
+          },
+        ],
+        // ...
+        ],
+      },
+      framework: {
+        autoImportVueExtensions: ['vue', 'md'], // Enable auto-import for Markdown extensions
+      },
+  ```
 
 2. Ensure that your routes and hash links are compatible with Vue Router's history mode.
 

package/dist/index.d.mts

@@ -1,5 +1,28 @@
 import { Plugin } from 'vite';
+import { Options } from 'markdown-it';
+import { BlockquotePluginOptions } from '@md-plugins/md-plugin-blockquote';
+import { CodeblockPluginOptions } from '@md-plugins/md-plugin-codeblocks';
+import { FrontmatterPluginOptions } from '@md-plugins/md-plugin-frontmatter';
+import { HeadersPluginOptions } from '@md-plugins/md-plugin-headers';
+import { ImagePluginOptions } from '@md-plugins/md-plugin-image';
+import { InlineCodePluginOptions } from '@md-plugins/md-plugin-inlinecode';
+import { LinkPluginOptions } from '@md-plugins/md-plugin-link';
+import { TablePluginOptions } from '@md-plugins/md-plugin-table';
 
+interface MarkdownOptions extends Options {
+    html?: boolean;
+    linkify?: boolean;
+    typographer?: boolean;
+    breaks?: boolean;
+    blockquote?: BlockquotePluginOptions;
+    codeblocks?: CodeblockPluginOptions;
+    frontmatter?: FrontmatterPluginOptions;
+    headers?: HeadersPluginOptions | boolean;
+    image?: ImagePluginOptions;
+    inlinecode?: InlineCodePluginOptions;
+    link?: LinkPluginOptions;
+    table?: TablePluginOptions;
+}
 interface MenuItem {
     name: string;
     path?: string;
@@ -37,6 +60,7 @@ interface RelatedItem {
 interface UserConfig {
     path: string;
     menu: MenuItem[];
+    config?: MarkdownOptions;
 }
 
 /**
@@ -46,8 +70,9 @@ interface UserConfig {
  * @param userConfig - The configuration object for the Vite Markdown plugin.
  * @param userConfig.path - The base path prefix to be used for routing or file resolution.
  * @param userConfig.menu - An array of MenuItem objects representing the navigation menu structure.
+ * @param userConfig.config - Additional configuration options for the Markdown processing.
  * @returns A Vite Plugin object pre-configured with the provided settings for Markdown processing.
  */
 declare function viteMdPlugin(userConfig: UserConfig): Plugin;
 
-export { type FlatMenu, type FlatMenuEntry, type MenuItem, type MenuNode, type NavItem, type RelatedItem, type UserConfig, viteMdPlugin };
+export { type FlatMenu, type FlatMenuEntry, type MarkdownOptions, type MenuItem, type MenuNode, type NavItem, type RelatedItem, type UserConfig, viteMdPlugin };

package/dist/index.d.ts

@@ -1,5 +1,28 @@
 import { Plugin } from 'vite';
+import { Options } from 'markdown-it';
+import { BlockquotePluginOptions } from '@md-plugins/md-plugin-blockquote';
+import { CodeblockPluginOptions } from '@md-plugins/md-plugin-codeblocks';
+import { FrontmatterPluginOptions } from '@md-plugins/md-plugin-frontmatter';
+import { HeadersPluginOptions } from '@md-plugins/md-plugin-headers';
+import { ImagePluginOptions } from '@md-plugins/md-plugin-image';
+import { InlineCodePluginOptions } from '@md-plugins/md-plugin-inlinecode';
+import { LinkPluginOptions } from '@md-plugins/md-plugin-link';
+import { TablePluginOptions } from '@md-plugins/md-plugin-table';
 
+interface MarkdownOptions extends Options {
+    html?: boolean;
+    linkify?: boolean;
+    typographer?: boolean;
+    breaks?: boolean;
+    blockquote?: BlockquotePluginOptions;
+    codeblocks?: CodeblockPluginOptions;
+    frontmatter?: FrontmatterPluginOptions;
+    headers?: HeadersPluginOptions | boolean;
+    image?: ImagePluginOptions;
+    inlinecode?: InlineCodePluginOptions;
+    link?: LinkPluginOptions;
+    table?: TablePluginOptions;
+}
 interface MenuItem {
     name: string;
     path?: string;
@@ -37,6 +60,7 @@ interface RelatedItem {
 interface UserConfig {
     path: string;
     menu: MenuItem[];
+    config?: MarkdownOptions;
 }
 
 /**
@@ -46,8 +70,9 @@ interface UserConfig {
  * @param userConfig - The configuration object for the Vite Markdown plugin.
  * @param userConfig.path - The base path prefix to be used for routing or file resolution.
  * @param userConfig.menu - An array of MenuItem objects representing the navigation menu structure.
+ * @param userConfig.config - Additional configuration options for the Markdown processing.
  * @returns A Vite Plugin object pre-configured with the provided settings for Markdown processing.
  */
 declare function viteMdPlugin(userConfig: UserConfig): Plugin;
 
-export { type FlatMenu, type FlatMenuEntry, type MenuItem, type MenuNode, type NavItem, type RelatedItem, type UserConfig, viteMdPlugin };
+export { type FlatMenu, type FlatMenuEntry, type MarkdownOptions, type MenuItem, type MenuNode, type NavItem, type RelatedItem, type UserConfig, viteMdPlugin };

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import { join } from 'node:path';
 import MarkdownIt from 'markdown-it';
 import { frontmatterPlugin } from '@md-plugins/md-plugin-frontmatter';
 import { importsPlugin } from '@md-plugins/md-plugin-imports';
@@ -10,87 +11,6 @@ import { blockquotePlugin } from '@md-plugins/md-plugin-blockquote';
 import { tablePlugin } from '@md-plugins/md-plugin-table';
 import { titlePlugin } from '@md-plugins/md-plugin-title';
 import { containersPlugin } from '@md-plugins/md-plugin-containers';
-import { join } from 'node:path';
-
-const createContainer = (container, containerType, defaultTitle) => {
-  const containerTypeLen = containerType.length;
-  return [
-    container,
-    containerType,
-    {
-      render(tokens, idx) {
-        const token = tokens[idx];
-        if (!token) {
-          return "";
-        }
-        const title = token.info.trim().slice(containerTypeLen).trim() || defaultTitle;
-        if (containerType === "details") {
-          return token.nesting === 1 ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${title}</summary>
-` : "</details>\n";
-        }
-        return token.nesting === 1 ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${title}</p>
-` : "</div>\n";
-      }
-    }
-  ];
-};
-function createMarkdownRenderer(options = {}) {
-  const md2 = new MarkdownIt({
-    html: true,
-    linkify: true,
-    typographer: true,
-    ...options,
-    breaks: true
-  });
-  md2.use(frontmatterPlugin);
-  md2.use(importsPlugin);
-  md2.use(titlePlugin);
-  md2.use(headersPlugin, { level: [2, 3] });
-  const containers = [
-    { type: "tip", defaultTitle: "TIP" },
-    { type: "warning", defaultTitle: "WARNING" },
-    { type: "danger", defaultTitle: "WARNING" },
-    { type: "details", defaultTitle: "Details" }
-  ];
-  md2.use(containersPlugin, containers, createContainer);
-  md2.use(blockquotePlugin, { blockquoteClass: "markdown-note" });
-  md2.use(tablePlugin, {
-    tableClass: "markdown-table",
-    tableHeaderClass: "text-left",
-    tableToken: "q-markup-table",
-    tableAttributes: [
-      [":wrap-cells", "true"],
-      [":flat", "true"],
-      [":bordered", "true"]
-    ]
-  });
-  md2.use(codeblocksPlugin, {
-    containerComponent: "MarkdownPrerender",
-    copyButtonComponent: "MarkdownCopyButton",
-    pageScripts: [
-      "import MarkdownPrerender from 'src/.q-press/components/MarkdownPrerender'",
-      "import MarkdownCopyButton from 'src/.q-press/components/MarkdownCopyButton.vue'"
-    ]
-  });
-  md2.use(linkPlugin);
-  md2.use(inlinecodePlugin);
-  md2.use(imagePlugin);
-  return {
-    // env: Environment for storing metadata
-    render(code, env = {}) {
-      const html = md2.render(code, env);
-      return {
-        html,
-        frontmatter: env.frontmatter || {},
-        // comes from md_plugin_frontmatter
-        title: env.title || "",
-        // comes from md_plugin_title
-        env
-      };
-    }
-  };
-}
-const md = createMarkdownRenderer();
 
 let prev = null;
 function menuWalk(prefix, menuNodes, node, path, parentName) {
@@ -207,7 +127,7 @@ function getVueComponent(rendered, code, id, prefix, menu) {
     flatMenu = generateFlatMenu(prefix, menu);
     createNav(id, rendered.env, flatMenu);
   }
-  const frontmatter = rendered?.frontmatter || {};
+  const frontmatter = rendered?.frontmatter;
   if (frontmatter.editLink !== false) {
     frontmatter.editLink = id.substring(id.indexOf("src/markdown/") + 13, id.length - 3);
   }
@@ -257,10 +177,129 @@ ${pageScripts}
 <\/script>`;
 }
 
+const createContainer = (container, containerType, defaultTitle, md) => {
+  const containerTypeLen = containerType.length;
+  return [
+    container,
+    containerType,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx];
+        if (!token) {
+          return "";
+        }
+        const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle;
+        const titleHtml = md ? md.renderInline(rawTitle) : rawTitle;
+        if (containerType === "details") {
+          return token.nesting === 1 ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>
+` : "</details>\n";
+        }
+        return token.nesting === 1 ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>
+` : "</div>\n";
+      }
+    }
+  ];
+};
+function createMarkdownRenderer(options = {}) {
+  const md = new MarkdownIt({
+    html: true,
+    linkify: true,
+    typographer: true,
+    ...options,
+    breaks: true
+  });
+  md.use(frontmatterPlugin, { ...options });
+  md.use(importsPlugin);
+  md.use(titlePlugin);
+  md.use(headersPlugin, { level: [2, 3], ...options });
+  const containers = [
+    { type: "tip", defaultTitle: "TIP" },
+    { type: "warning", defaultTitle: "WARNING" },
+    { type: "danger", defaultTitle: "WARNING" },
+    { type: "details", defaultTitle: "Details" }
+  ];
+  md.use(containersPlugin, containers, createContainer, md);
+  md.use(blockquotePlugin, { blockquoteClass: "markdown-note", ...options });
+  md.use(tablePlugin, {
+    tableClass: "markdown-table",
+    tableHeaderClass: "text-left",
+    tableToken: "q-markup-table",
+    tableAttributes: [
+      [":wrap-cells", "true"],
+      [":flat", "true"],
+      [":bordered", "true"]
+    ],
+    ...options
+  });
+  md.use(codeblocksPlugin, {
+    containerComponent: "MarkdownPrerender",
+    copyButtonComponent: "MarkdownCopyButton",
+    pageScripts: [
+      "import MarkdownPrerender from 'src/.q-press/components/MarkdownPrerender'",
+      "import MarkdownCopyButton from 'src/.q-press/components/MarkdownCopyButton.vue'"
+    ],
+    ...options
+  });
+  md.use(linkPlugin, { ...options });
+  md.use(inlinecodePlugin, { ...options });
+  md.use(imagePlugin, { ...options });
+  return {
+    // env: Environment for storing metadata
+    render(code, env = {}) {
+      const html = md.render(code, env);
+      return {
+        html,
+        frontmatter: env.frontmatter || {},
+        // comes from md_plugin_frontmatter
+        title: env.title || "",
+        // comes from md_plugin_title
+        env
+      };
+    }
+  };
+}
+
+function flattenOptions(options) {
+  const flattened = { ...options };
+  if (options.blockquote) {
+    Object.assign(flattened, options.blockquote);
+    delete flattened.blockquote;
+  }
+  if (options.codeblocks) {
+    Object.assign(flattened, options.codeblocks);
+    delete flattened.codeblocks;
+  }
+  if (options.frontmatter) {
+    Object.assign(flattened, options.frontmatter);
+    delete flattened.frontmatter;
+  }
+  if (options.headers && typeof options.headers === "object") {
+    Object.assign(flattened, options.headers);
+    delete flattened.headers;
+  }
+  if (options.image) {
+    Object.assign(flattened, options.image);
+    delete flattened.image;
+  }
+  if (options.inlinecode) {
+    Object.assign(flattened, options.inlinecode);
+    delete flattened.inlinecode;
+  }
+  if (options.link) {
+    Object.assign(flattened, options.link);
+    delete flattened.link;
+  }
+  if (options.table) {
+    Object.assign(flattened, options.table);
+    delete flattened.table;
+  }
+  return flattened;
+}
+
 const markdownLinkRE = /<MarkdownLink /;
 const markdownApiRE = /<MarkdownApi /;
 const markdownTreeRE = /<MarkdownTree /;
-function mdParse(code, id, prefix, menu) {
+function mdParse(code, id, prefix, menu, options = {}) {
   const env = {
     frontmatter: {
       id
@@ -274,6 +313,8 @@ function mdParse(code, id, prefix, menu) {
   if (markdownTreeRE.test(code) === true) {
     env.pageScripts.add("import MarkdownTree from 'src/.q-press/components/MarkdownTree.vue'");
   }
+  const flatOptions = flattenOptions(options);
+  const md = createMarkdownRenderer(flatOptions);
   const results = md.render(code, env);
   if (env.frontmatter.examples !== undefined) {
     env.pageScripts.add(
@@ -285,19 +326,18 @@ function mdParse(code, id, prefix, menu) {
   }
   const component = getVueComponent(results, code, id, prefix, menu);
   return {
-    code: component,
-    map: null
-    // No source map provided
+    code: component
   };
 }
 
 const mdRE = /\.md$/;
 let globalMenu = [];
 let globalPrefix = "";
+let globalConfig = {};
 function transform(code, id) {
   if (!mdRE.test(id)) return null;
   try {
-    const result = mdParse(code, id, globalPrefix, globalMenu);
+    const result = mdParse(code, id, globalPrefix, globalMenu, globalConfig);
     return result.code;
   } catch (err) {
     console.error(`Error processing Markdown file: ${id}`, err);
@@ -330,13 +370,14 @@ const mdPlugins = {
   transform,
   hotUpdate
 };
-function viteMdPlugin2(path, menu) {
+function viteMdPlugin2(path, menu, config) {
   globalMenu = menu;
   globalPrefix = path;
+  globalConfig = config;
   return mdPlugins;
 }
 function viteMdPlugin(userConfig) {
-  return viteMdPlugin2(userConfig.path, userConfig.menu);
+  return viteMdPlugin2(userConfig.path, userConfig.menu, userConfig.config || {});
 }
 
 export { viteMdPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/vite-md-plugin",
-  "version": "0.1.0-alpha.25",
+  "version": "0.1.0-alpha.27",
   "description": "A very opinionated Vite plugin for @md-plugins.",
   "keywords": [
     "markdown-it",
@@ -36,18 +36,18 @@
   ],
   "dependencies": {
     "markdown-it": "^14.1.0",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-containers": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-headers": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-image": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-table": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-title": "0.1.0-alpha.25",
-    "@md-plugins/shared": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-imports": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-link": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.25"
+    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-containers": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-headers": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-imports": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-image": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-table": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-link": "0.1.0-alpha.27",
+    "@md-plugins/md-plugin-title": "0.1.0-alpha.27",
+    "@md-plugins/shared": "0.1.0-alpha.27"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",