背景

让 Markdown 中的代码可以实时运行，为什么会有这样一个需求？

在我们前端团队中，技术相关的文档都采用 Markdown 编写， 文档中往往会伴随很多示例代码，我们希望大家在阅读文档的时候，可以运行示例代码，看到效果。

需求

• 让 Markdown 中的代码可以运行，并预览效果。
• 代码可以在线编辑。
• 不影响整个文档流的布局。
• 支持 React, 支持代码高亮。
• 可以配置 babel。

明确需求以后，写了一个 React 组件来满足这些功能， ， 首先看一下效果：

在线预览:

原理

• 就通过 markdown-loader 与 html-loader 解析 Markdown 文档。
• 通过正则表达式取出 code ，交给 codemirror
• 把 codemirror 中的代码通过 babel 编译，再通过 ReactDOM.render 渲染到指定的容器中。

安装

npm install react-code-view

配置 webpack

在 webpack 中需要添加对 markdown-loader 的支持。 需要安装：

npm install html-loader --save-devnpm install markdown-loader --save-devnpm install react-markdown-reader --save-dev

webpack.config.js 配置

>=webpack 2.x +

const markdownRenderer = require('react-markdown-reader').renderer;{  test: /\.md$/,  use: [{    loader: 'html-loader'  }, {    loader: 'markdown-loader',    options: {      pedantic: true,      renderer: markdownRenderer(/**languages:Array
    
     **/)    }  }]}
    

languages 默认值：["javascript", "bash", "xml", "css", "markdown", "less"];

Github:

添加 Babel

示例代码中通常是使用到 ES2015+ , React 等，需要对代码实时做编译，所以在 html 中引入 babel :

示例

import CodeView from 'react-code-view';import '~react-code-view/lib/less/index.less';import { Button } from 'rsuite';
    
       {require('./example.md')}
    

源代码都统一写在 markdown 中，参考:

这里需要注意的是把需要运行的代码一定要放在 <!--start-code--> 与 <!--end-code--> 之间。

API

谁在用？