讓 Markdown 中的代碼可以實時運行

背景

讓 Markdown 中的代碼可以實時運行，為什么會有這樣一個需求？

在我們前端團隊中，技術相關的文檔都采用 Markdown 編寫， 文檔中往往會伴隨很多示例代碼，我們希望大家在閱讀文檔的時候，可以運行示例代碼，看到效果。

需求

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

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

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

原理

• 就通過 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: https://github.com/simonguo/react-markdown-reader

添加 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--> 之間。

誰在用？

• React Suite