bisheng-plugin-preview

Generate a preview for Markdown files in bisheng.

Usage

Install:

npm i --save bisheng-plugin-preview

Add 'bisheng-plugin-preview' to bisehng.config.js's plugins.

module.exports = {
  plugins: ['bisheng-plugin-preview'],
};

In Markdown of demo directory:

title: ... ...

This is description.

---

Add preview and highlightedCode to markdown data

import { Input } from 'co-ui';
 
ReactDOM.render(<Input className="example overwrite" />, mountNode);

Add highlightedStyle to markdown data

.example {
  color: red;
}

Add style to markdown data

In template:

const { preview, highlightedCode, highlightedStyle, style } = pageData;
 
// use preview
<div> 
  {preview(React, ReactDOM)}
</div>
 
// use highlightedCode
<div> 
  {props.utils.toReactComponent(highlightedCode)}
</div>
 
// use highlightedStyle
<pre>
  <code dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
</pre>
 
// use style 
<style dangerouslySetInnerHTML={{ __html: style }} />

Liscense

MIT