讓 Markdown 中的代碼能夠實時運行

背景

讓 Markdown 中的代碼能夠實時運行，爲何會有這樣一個需求？

在咱們前端團隊中，技術相關的文檔都採用 Markdown 編寫， 文檔中每每會伴隨不少示例代碼，咱們但願你們在閱讀文檔的時候，能夠運行示例代碼，看到效果。

需求

• 讓 Markdown 中的代碼能夠運行，並預覽效果。
• 代碼能夠在線編輯。
• 不影響整個文檔流的佈局。
• 支持 React, 支持代碼高亮。
• 能夠配置 babel。

明確需求之後，寫了一個 React 組件來知足這些功能， react-code-view ， 首先看一下效果：

在線預覽: simonguo.github.io/react-code-…

原理

• 就經過 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-dev
npm install markdown-loader --save-dev
npm 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<string>**/)
    }
  }]
}
複製代碼

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

Github: github.com/simonguo/re…

添加 Babel

示例代碼中一般是使用到 ES2015+ , React 等，須要對代碼實時作編譯，因此在 html 中引入 babel :

<script type="text/javascript" src="//cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js"></script>
複製代碼

示例

import CodeView from 'react-code-view';
import '~react-code-view/lib/less/index.less';

import { Button } from 'rsuite';


<CodeView dependencies={{ Button }} > {require('./example.md')} </CodeView>

複製代碼

源代碼都統一寫在 markdown 中，參考: example.md

這裏須要注意的是把須要運行的代碼必定要放在 <!--start-code--> 與 <!--end-code--> 之間。

API

Name	Type	Default value	Description
dependencies	Object		依賴的組件
showCode	boolean	true	顯示代碼
babelTransformOptions	Object	{ presets: ['stage-0', 'react', 'es2015'] }	babel 配置參數 options

誰在用？

• React Suite