Novelty Palliates Malaise

    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.

    Install

    npm i remark-vue

    DownloadsWeekly Downloads

    27

    Version

    0.9.4

    License

    MIT

    Unpacked Size

    12.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • med_freeman