bisheng-plugin-preview v1.0.1

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