markdown-it-vue-meta

markdown-it-vue-meta is a plugin for markdown-it which adds the ability to document Vue components using metadata generated by vue-component-meta with the syntax [?<title>]: <relative-path>.vue.

Quick start

Install

npm i markdown-it-vue-meta

Setup markdown-it and the plugin

import { resolve } from "node:path";
import { readFileSync } from "node:fs";

import metaPlugin from "markdown-it-vue-meta";
import markdown from "markdown-it";

import type { MarkdownItEnv } from "markdown-it-vue-meta";

const md = markdown({
  html: true,
});

/**
 * All options are required.
 */
md.use(metaPlugin, {
  tsconfig: resolve("./tsconfig.json"),

  /**
   * The metadata is processed a bit
   * before the renderer is called.
   *
   * E.g. all the descriptions are HTML strings
   * as they have been processed by markdown-it,
   * and the tags `default` and `deprecated` are
   * filtered out as their own properties.
   */
  renderer(meta, title, env) {
    return `
      <h2>${title}</h2>
      <pre><code>${JSON.stringify(meta, null, 2)}</code></pre>
    `;
  },
});

const markdownFilePath = resolve("./Example.md");

const markdownContent = readFileSync(markdownFilePath, "utf-8");

/**
 * You have to pass an absolute path for the current
 * markdown file as `path` in `env`.
 */
const env: MarkdownItEnv = {
  path: markdownFilePath,
};

const html = md.render(markdownContent, env);