@yxonic/vmark v0.2.10

VMark

Markdown rendering as Vue 3 component tree, with carefully selected Markdown features, human-friendly rendering options, and custom vue component support. It also provides a Vite plugin for this to happen at server-side.

Usage

npm i @yxonic/vmark

Then in your .vue file:

<template>
  <v-mark src="# heading">
</template>
<script setup>
import VMark from '@yxonic/vmark'
</script>

Vite plugin

You can also use VMark to import .md files as Vue components. In your vite.config.js:

import vue from '@vitejs/plugin-vue'
import vmark from '@yxonic/vmark/vite'

export default {
  plugins: [vue(), vmark()]
}

Configuration

VMark:

export interface MarkdownVueRendererOptions {
  html?: boolean
  containers?: Record<string, ComponentOptions | null>
  customRules?: RenderRules
  nodeRenderer?: NodeRenderer
}

export interface Node {
  tag: string | ComponentOptions | null
  attrs: Record<string, string>
  children: VNodeArrayChildren
}
export type TokenRenderRule = (
  token: Token,
  ctx: { nodeRenderer: NodeRenderer },
) => Node | string | null
export type RenderRules = Record<string, TokenRenderRule>
export type NodeRenderer = (node: Node | string) => VNodeChild

Vite plugin:

type ComponentResolver = (
  name: string,
  id: string,
) => string | { name: string; path: string } | null | undefined

interface VMarkVitePluginOption {
  rewriteBaseUrl?: boolean
  containers?: string[]
  defaultComponentDir?: string
  componentDirResolver?: (id: string) => string | null | undefined
  componentResolver?: ComponentResolver | ComponentResolver[]
}

TODO

• Support token renderer customization for each type.
• A handy collection of markdown-it plugins (anchor, attrs, KaTeX, etc.).
• Feature-oriented options for <v-mark>.
• Custom components.
• Dynamic options.
• Vite plugin.
• Export frontmatter and document structure.
• Error display.
• Documentation.

markdown-it Plugins

Community packages

• markdown-it-cjk-breaks
• markdown-it-footnote*
• markdown-it-abbr
• markdown-it-deflist
• markdown-it-container*
• markdown-it-task-lists*
• markdown-it-front-matter
• markdown-it-anchor*
• markdown-it-table-of-contents
• markdown-it-attrs*
• markdown-it-multimd-table

* needs special care when rendering

Manual

• Link rewrite
• KaTeX