Remark-vue NPM

remark-vue

Compile Markdown to Vue with remark

Features

remark-vue compiles markdown to Vue. Built on remark, an extensively tested and pluggable parser.

Why? Using domPropsInnerHTML in Vue.js is a common cause of XSS attacks: user input can include script tags and other kinds of active content that reaches across domains and harms security. remark-vue builds a DOM in Vue, using Vue createElement: this means that you can display parsed & formatted Markdown content in an application without using domPropsInnerHTML.

Installation

npm:

npm install remark-vue

Programmatic

remark.use(vue, options)

Parameters

vue — This plugin;
options (Object?) — See below.

Let’s say example.js looks as follows:

var Vue = require('vue'),
    remark = require('remark'),
    vueRenderer = require('remark-vue');

var App = new Vue({
  el: '#app',
  data: function () {
    return {
      text: '# hello world'
    }
  },
  onChange(e) {
    this.text = e.target.value;
  },
  render() {
    return (<div>
      <textarea
        value={this.text}
        v-on:change={this.onChange} />
      <div id='preview'>
        { remark().use(vueRenderer).processSync(this.text).contents }
      </div>
    </div>);
  }
});

Configuration

All options, including the options object itself, are optional:

sanitize (object or boolean, default: undefined) — Sanitation schema to use. Passed to hast-util-sanitize. The default schema, if none or true is passed, adheres to GitHub’s sanitation rules.
This means that non-standard HAST nodes and many HTML elements are by default santized out. If you want to be more permissive, you should provide a value for sanitize.
If false is passed, it does not sanitize input.
prefix (string, default: '') — Vue key.
Vue (Function, default: require('vue')) — Global Vue constructor.
remarkVueComponents (object, default: undefined) — Provides a way to override default elements (<a>, <p>, etc) by defining an object comprised of element: Component key-value pairs. For example, to output <MyLink> components instead of <a>, and <MyParagraph> instead of <p>:
```
remarkVueComponents: {
  a: MyLink,
  p: MyParagraph
}
```
toHast (object, default: {}) — Provides options for transforming MDAST document to HAST. See mdast-util-to-hast for settings.

These can passed to remark.use() as a second argument.

Integrations

remark-vue works great with:

remark-toc, which generates tables of contents;
remark-github, which generates references to GitHub issues, PRs, users, and more;
...and more.

All remark nodes can be compiled to HTML.

In addition, remark-vue looks for an attributes object on each node it compiles and adds the found properties as HTML attributes on the compiled tag.