remark-vue

0.9.4 • Public • Published

remark-vue

npm version npm Build Status Codecov Greenkeeper badge Dependencies devDependencies

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)

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.

Package Sidebar

Install

npm i remark-vue

Weekly Downloads

3

Version

0.9.4

License

MIT

Unpacked Size

12.2 kB

Total Files

5

Last publish

Collaborators

  • med_freeman