• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > 让 Markdown 中的代码可以实时运行

    让 Markdown 中的代码可以实时运行

    作者: 分类:前端开发 点击: 149 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      背景

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

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

      需求

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

      明确需求以后,写了一个 React 组件来满足这些功能, react-code-view , 首先看一下效果:

      让 Markdown 中的代码可以实时运行

      在线预览: https://simonguo.github.io/react-code-view/

      原理

      • 就通过 markdown-loaderhtml-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--> 之间。

      API

      Name Type Default value Description
      dependencies Object 依赖的组件
      showCode boolean true 显示代码
      babelTransformOptions Object { presets: ['stage-0', 'react', 'es2015'] } babel 配置参数 options

      谁在用?



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006198266.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.