The vue component for render Markdown string
This is a Vue.js component focused on Markdown string rendering, which is based on mdast-util-to-vnode to parse Markdown string and render by Vue.js.
- Rendering Markdown strings with Vue.js
- Streaming Markdown strings (usually in AI Chat)
npm install vue-markdown-x <script setup> import { ref } from 'vue' import { VueMarkdown } from 'vue-markdown-x' const mdStr = ref('') </script> <template> <VueMarkdown :md="mdStr" /> </template>Markdown string to render.
// default: '' type md = stringCustomize how nodes are rendered.
type ComponentReturn = Component | [Component, Record<string, any> | undefined] // default: undefined type components = Partial<Record<Nodes['type'], ComponentReturn | ((node: Node) => ComponentReturn)>>options of shiki for render code block.
interface shiki { // default: { light: catppuccinLatte, dark: catppuccinMocha } themes?: Record<string, ThemeRegistration> // default: [css,html,javascript,json,markdown,typescript,vue] langs?: LanguageRegistration[][] }:root { /* basic font-size, and heading's font-size is scaled based on this value. */ --vue-markdown-font-size: 16px; /* font-weight for heading */ --vue-markdown-heading-font-weight: 600; }