Warning: This package is deprecated, and uses a vulnerable version of Marked. It will not receive any updates. Moving away from it is highly recommended.

Vue Markdown Renderer

This is a customizable Vue component that parses Markdown and renders the output. It differs from just using a parser directly and binding the output to v-html in that the output is rendered like any other components which is faster and allows you to for example use v-simple-table instead of table for tables when using Vuetify.

Note: At the moment, HTML and link reference definitions are not supported. However, they may be in future versions.

Usage

First install it:

npm install --save vue-markdown-renderer
# or
yarn add vue-markdown-renderer

Then, tell Vue to use it:

import mdRenderer from "vue-markdown-renderer";

Vue.use(mdRenderer, {/* Configuration */});

Finally, use it in your template:

<template>
	<div>
		...
		<markdown-renderer :value="text"></markdown-renderer>
		...
	</div>
</template>
<script>
export default {
	data() {
		return {
			text: "# _Hello, world!_"
		}
	}
}

Reference

Configuration

• marked: Will be passed to marked.use. More info here. Note: Passing any renderer functions won't work, since this component uses its own renderer. Use the mappings option instead. You also shouldn't touch the mangle option if you're not server-side rendering. This is because it works by converting every character into an HTML escape code. These won't be parsed when inserted into the DOM. Don't worry, however, as any scraper not smart enough to understand escape codes probably isn't gonna run JS either and let the Markdown render.
• elements: Names of elements and components to be used in the output. Can also take components directly by passing the object you get by importing them. Keys:
  • code
  • headingPrefix
  • blockquote
  • orderedList
  • unorderedList
  • listElement
  • table
  • tableHead
  • tableHeadCell
  • tableBody
  • tableRow
  • tableCell
  • paragraph
  • link
  • routerLink
  • image
  • strong
  • emphasis
  • lineBreak
• mappings: This is an object where the key is a type of token that Marked outputs and the value is one of the following:
  • A function, which will be called with an object that contains the following values:
    • token: The token that's being rendered. You can see what tokens look like here.
    • createElement: A function that, as the name implies, creates an element. More info here.
    • config: The configuration, including default values for anything that you didn't set.
    • processTokens: If the token has subtokens token.tokens, this function should be called with them, createElement and config, and the return value should be passed as the last argument to createElement, like this:

      ({token, createElement, config}) => createElement(
      	config.elements.headingPrefix + token.depth,
      	processTokens(token.tokens, createElement, config)
      )

    The function should output either a string, which will be inserted as a plain piece of text, or the value returned from calling createElement.
  • A string, which is the name of an element or component.
  • A component, like when you import a .vue file.

Component

The component is called markdown-renderer and takes a single prop, value, which should contain the Markdown that is to be rendered.

License

This project is licensed under the Lesser General Public License version 3 or later. You can find the full license here.