marked-vue

Render Markdown as Vue 3 components using marked.

TL;DR

• Uses marked to parse markdown
• Renders actual Vue VNodes (no v-html)
• HTML in markdown is rendered as plain text

[Demo]

Installation

$ npm i marked-vue

Usage (Vue 3)

import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import Markdown from 'marked-vue';

const app = createSSRApp({
  render() {
    return h(Markdown, { value: '# Hello world!' });
  },
});

const html = await renderToString(app);

Examples

• SSR: node examples/ssr.mjs
• SPA: serve the repo root and open examples/spa/index.html

Component Props

• value[string] - Markdown content.
• baseURL [string] - A prefix url for any relative link.
• openLinksInNewTab [boolean] - Attribute target=_blank will be added to link elements
• langPrefix [string] - A string to prefix the class/className in a <code> block. Defaults to language-.
• breaks [boolean] - Add br tag on single line breaks. Requires gfm to be true
• gfm [boolean] - Use approved Github Flavoured Markdown
• isInline[boolean] - Parse inline markdown.

Syntax highlight code blocks

Example: syntax highlight integration via langPrefix

import { h } from 'vue';
import Markdown, { VueRenderer } from 'marked-vue';

const renderer = new VueRenderer({
  langPrefix: 'language-',
  // override any method if needed
  // code: (snippet, lang) => h('pre', [h('code', { class: `language-${lang}` }, snippet)]),
});

// <Markdown :value="markdown" :renderer="renderer" />

Some awesome options available to highlight code

• [react-syntax-highlighter]
• [react-lowlight]
• [react-refractor]