remark-vue

Compile Markdown to Vue with remark

📖 Release Notes

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

Table of Contents

• Programmatic

  • remark.use(vue, options)

• Configuration

• Integrations

• License

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.

CONTRIBUTING

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests ($ yarn test).

License

MIT © Titus Wormer, modified by Tom MacWright, Mapbox.

Forked by Med_freeman to remark-vue.