渲染 Markdown 文档

渲染 Markdown 文档

1. marked

• 安装

  npm install marked --save

• 使用

  import marked from 'marked';
  var html = marked('# h1');

  这时候 html 不能直接用在 React 组件中：

  <div>
      {html}
  </div>

  但可以:

  document.getElementById('content').innerHTML = marked('<h1>dasda</h1>');

  如果想在 React 中使用，需要使用 dangerouslySetInnerHTML 属性。

  const Md = ({ string }) => {
      return (
          <div
              dangerouslySetInnerHTML={{
                  __html: marked('<h1>string</h1>')
              }}
          >
          </div>
      )
  }

  上面的步骤只是把 Markdown 文档解析为了 HTML，并将其插入了 DOM。但这样并不够，我们还需要为其添加样式。

• 样式

  • hightlight.js

    npm install hightlight.js --save

    导入并使用高亮插件：

    import hljs frorm 'hightlight.js';
    marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false,
    highlight: (code) =>  hljs.highlightAuto(code).value // 这段代码
    });

    这一步 highlight.js 插件会自动检测编程语言，然后给它们加上不同的 class。剩下的一步就是将 CSS 文件引入，可以使用 CDN 或者其他。