Compile markdown to Virtual DOM with remark.

vmarkdown

Last update: Feb 14, 2020

Overview

remark-render

Compiles markdown to Virtual DOM. Built on remark, an extensively tested and pluggable markdown processor.

Supports raw HTML
Support VNode keys
Multiple modes and Optionally settings (hyperscript virtual-dom Vue React snabbdom)
Custom Renderer / Extend Renderer

Installation

npm:

npm install remark-render

Usage

Say we have the following file, example.js:

var renderer = require('remark-preact-renderer');

unified().use(render, {
  renderer: renderer,
  h: h,
  rootClassName: 'markdown-body',
  rootTagName: 'main'
})

=>

options

	remark
renderer	framework renderer
h	create element function
rootClassName	vdom root element class name
rootTagName	vdom root element tag type. default is div

var unified = require('unified')
var parse = require('remark-parse')
var render = require('remark-render')
  
var h = require('hyperscript');
unified()
  .use(parse)
  .use(render, {
     h: h, // create element function
     rootClassName: 'markdown-body' // vdom root element class name,
     rootTagName: 'main'
  })
  .process('# h1  \n## h2', function(err, file) {
    if (err) throw err
    console.dir(file.contents, {depth: null})
  })

Renderers

	renderers
React	remark-preact-renderer
Preact	remark-react-renderer
Vue	remark-vue-renderer
HyperScript	remark-hyperscript-renderer
snabbdom	remark-snabbdom-renderer
virtual-dom	remark-virtual-dom-renderer
morphdom	morphdom

Examples

Presets provide a potentially sharable way to render. They can contain multiple modes and optionally settings as well.

html

<div id="preview">div>

HyperScript

npm install remark-render remark-hyperscript-renderer

var unified = require('unified')
var parse = require('remark-parse')
var render = require('remark-render')
var renderer = require('remark-hyperscript-renderer');

var h = require('hyperscript');
unified()
  .use(parse)
  .use(render, {
     renderer: renderer,
     h: h,
     rootClassName: 'markdown-body'
  })
  .process('# h1  \n## h2', function(err, file) {
    if (err) throw err
    console.dir(file.contents, {depth: null})
    var preview = document.getElementById('preview');
    preview.appendChild(vdom);
  })

React

npm install remark-react-renderer

var unified = require('unified')
var parse = require('remark-parse')
var render = require('remark-render')
var renderer = require('remark-react-renderer');
var React = require('react');
var h = React.createElement;

var processor = unified()
    .use(parse)
    .use(render, {
        renderer: renderer,
        h: h
    });
 
var file = processor.processSync('# h1');

ReactDOM.render(
    file.contents,
    document.getElementById('preview')
);

Vue

npm install remark-vue-renderer

var unified = require('unified')
var parse = require('remark-parse')
var render = require('remark-render')
var renderer = require('remark-vue-renderer');
var Vue = require('vue');
 
var processor = unified()
    .use(parse)
    .use(render, {
        renderer: renderer
    }).freeze();
 
const app = new Vue({
    el: '#preview',
    render(h) {
        var file = processor().data('h', h).processSync('# h1');
        return file.contents;
    }
});

Writing a custom renderer/Extend a renderer

var unified = require('unified')
var parse = require('remark-parse')
var render = require('remark-render')
var renderer = require('remark-hyperscript-renderer'); 
var h = require('hyperscript');

renderer.text = function(h, node, children) {
    return h('span', {
        key: node.properties.key,
        style: {'font-size': '60px'}
    }, node.value);
};

unified()
  .use(parse)
  .use(render, {
     h: h,
     renderer: renderer
  })
  .process('# h1  \n## h2', function(err, file) {
    if (err) throw err
    var preview = document.getElementById('preview');
    preview.appendChild(vdom);
  })

morphdom - Writing a custom renderer.

node MDAST

{
    "type": "heading",
    "depth": 1 <= number <= 6,
    "tagName": "a",
    "parent": parent,
    "properties": {
        "href": "href",
        "id": "id",
        "className": ["bravo"]
    },
    "children": []
}

renderer

{
    /**
     * root element (根元素)
     * @param {*} h create element function (构建元素节点函数)
     * @param {*} node  current node  (当前根元素节点)
     * node.key is node index if node in array for key. default is 0 (如果当前节点在数组中，返回当前节点在数组中的序列，这是为了构建数组key)
     * @param {*} children node create element children (当前节点的子节点)
     */
    root : function(h, node, children) {},

    text : function(h, node, children) {},

    ...
}

var unified = require('unified');
var parse = require('remark-parse');
var render = require('remark-render')
var morphdom = require('morphdom');

function createElement(type, props, children) {
    let dom = document.createElement(type);
    if(props.className) {
        dom.className = props.className;
    }
    if(props.hasOwnProperty('id')) {
        dom.id = props.id;
    }
    dom.appendChild( createElements(children) );
    return dom;
}

function createElements(children) {
    const doms = document.createDocumentFragment();
    children && children.length > 0 && children.forEach(function (dom) {
        dom && doms.appendChild(dom);
    });
    return doms;
}

var renderer = {
    root: function(h, node, children) {
        return h('div', node.props, children);
    },
    text: function(h, node, children) {
        return document.createTextNode(node.value);
    },
    blockquote: function(h, node, children) {
        return h('blockquote', node.props, children);
    },
    heading: function(h, node, children) {
        return h('h'+node.depth, node.props, children);
    }
    ...
}


var processor = unified()
    .use(parse, {})
    .use(render, {
        renderer: renderer,
        h: createElement
    });

var file = processor.processSync('# h1\n## h2');
var markdownContainer = file.contents;

var previewContainer = document.getElementById('preview');

morphdom(previewContainer, markdownContainer);

License

MIT © yucopowo

A Powerful and Highspeed Markdown Parser for Vue

vue-markdown If you want vue-markdown for vue1.X.X, please checkout vue-markdown1.X.X. A Powerful and Highspeed Markdown Parser for Vue. Quick start:

1.8k Jan 2, 2023

mavonEditor - A markdown editor based on Vue that supports a variety of personalized features

mavonEditor 喜爱 & 想要将mavonEditor变得更好的小伙伴，邮这里 [email protected] ps: 毕业/工作已经把我榨干，能维护mavonEditor的时间越来越少（近两年的重心没有在前端，忘大家谅解:)），希望有能力的小伙伴可以来共同维护好这个小小编辑器！ E

5.9k Jan 2, 2023

A Simple and Highspeed Markdown Parser for Vue

VueSimpleMarkdown A Simple and Highspeed Markdown Parser for Vue Installation npm install --save vue-simple-markdown Usage Bundler (Webpack, Rollup) i

82 Nov 26, 2022

A markdown editor component for Vue that renders in place without the need for a preview pane.

vue-markdown-editor A Markdown editor component for Vue that renders in place without the need for a preview pane. This is the component tha

68 Aug 20, 2022

MkDown is an online markdown editor built with vueJs

115 Dec 4, 2022

Generate a Markdown Documentation for a SFC Vue Component. Contribute: https://gitlab.com/vuedoc/md#contribute

Vuedoc Markdown Documentation Generator Generate a Markdown Documentation for a Vue file Table of Contents Install Features Command line usage Command