用 react-syntax-highlighter 给 React 添加代码高亮

介绍

react-syntax-highlighter 是一个 React 的代码高亮组件，项目地址。

相较于其它代码高亮库的优势：

• 其它的高亮库实现原理是通过 dangerouslySetInnerHTML 或者手动修改 DOM
• 这个库是通过一个语法树动态构建 Virtual DOM
• 因此与 React 的思想结合地更好

同时，代码样式默认是用 JavaScript Styles 定义的，没有使用 css（也支持切换到使用 CSS 的形式）。

Props

组件支持的 Props 如下：

上面只包含了一部分常用的，完整地参考项目文档。

封装

这个库对外提供一个 SyntaxHighlighter 组件，我打算在这个组件外面再包一层， 原因是把相关的配置项封装在内部，这样外面调用的时候会简化很多。

代码如下(Code.js)：

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter/prism-async-light';
import {base16AteliersulphurpoolLight as theme} from 'react-syntax-highlighter/styles/prism'

export class Code extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <SyntaxHighlighter showLineNumbers={true}
                                  language={this.props.lang} 
                                  style={theme}>
                    {this.props.children.replace(/^\s+|\s+$/g, '')}
               </SyntaxHighlighter>
    }
}

在使用的时候代码如下：

<Code lang='jsx'>{`
let codeInsertScript = <Code lang="js">{\`
(function(d) {
    var wfAD = d.createElement('script'), sAD = d.scripts[0];
    wfAD.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    wfAD.async = true;
    sAD.parentNode.insertBefore(wfAD, sAD);
})(document);
\`}</Code>
`}</Code>

懒加载

这个库说是支持分包懒加载，由于文档写得并不清楚，不知道 registerLanguage 具体的内部机制是什么。

要弄明白这个的话，需要深入到库的内部实现原理中，由于时间精力有限，这个研究就暂放了。

感兴趣的同学可以深入挖掘一下。