vue-markdown-renderer v0.2.7
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 tomarked.use
. More info here. Note: Passing any renderer functions won't work, since this component uses its own renderer. Use themappings
option instead. You also shouldn't touch themangle
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 subtokenstoken.tokens
, this function should be called with them,createElement
andconfig
, and the return value should be passed as the last argument tocreateElement
, like this:```js ({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.