react-syntax-highlighter代码高亮

react-syntax-highlighter

react中代码高亮插件

安装

// npm
npm install react-syntax-highlighter --save
// yarn
yarn add react-syntax-highlighter

props

1. language - 高亮显示的代码语言，例如css、javascript、jsx等。其他选项可以查看hljs和prism
2. style - styles/hljs或styles/prism目录中需要的样式对象。需要导入

import { style } from 'react-syntax-highlighter/dist/styles/{hljs|prism}'

选项可以查看hljs和prism

3. children - 需要突出显示的代码
4. codeTagProps - 传到<code>标记中的道具，一般通过这个属性传递样式或者className
5. useInlineStyles - 此prop作为false传入的时候，语法高亮将失效。然后可以使用highlight.js提供的css文件设置代码块的样式
6. showLineNumbers - true/false，显示行号
7. startingLineNumber - number，行编号开始数
8. lineNumberContainerStyle - 行号容器默认显示在左侧，右侧填充10px。可以使用这个覆盖这些样式
9. lineNumberStyle - 行号样式
10. wrapLines - true/false，确定每行代码是否应该包装在父元素中。默认为false，如果为false，则无法对行级别元素执行操作
11. lineProps - 如果wrapLines为true，则传递给包裹每一行的span的props。可以是一个对象或者一个方法,接受当前行号作为参数并返回props对象
12. renderer - 用于渲染代码行的可选自定义渲染器
13. PreTag - 要使用的元素或自定义反应组件来代替默认的pre标记，即组件的最外层标记
14. CodeTag - 要使用的元素或自定义反应组件来代替默认代码标记，组件树的第二个标记
15. spread props - 传递任意道具以预先标记包装代码

具体使用

import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';


class Code extends React.Component {
  render() {
      return <SyntaxHighlighter showLineNumbers={true}
                                startingLineNumber = {0}
                                language={this.props.lang} 
                                style={dark} 
                                lineNumberStyle={{color: '#ddd', fontSize: 20}}
                                wrapLines={true}
                                lineProps={(num) => {console.log(num)} }>
                  {this.props.children.replace(/^\s+|\s+$/g, '')}
             </SyntaxHighlighter>
  }
}


export default class HighLighter extends React.Component {
  render() {
    return (
      <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>
    )
  }
}

参考文档
1.https://github.com/conorhastings/react-syntax-highlighter