字符串语法高亮

本节目标：理解“字符串语法高亮”的核心思路，并能把它用于实际开发或面试表达。

地址：[https://github.com/conorhastings/react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter)
使用react-syntax-highlighter组件

先安装：
npm install react-syntax-highlighter --save

引入
方式一：
==import== ==SyntaxHighlighter== ==from== =='react-syntax-highlighter'====;========import== =={ docco }== ==from== =='react-syntax-highlighter/dist/esm/styles/hljs'====;========const== ==Component== ===== ==()== ===>== =={======  ==const== ==codeString== ===== =='(num) => num + 1'====;======  ==return== ==(======    ==<====SyntaxHighlighter language========="javascript"== ==style========={docco}====>======      =={codeString}======    ==</====SyntaxHighlighter====>======  ==);========};==

方式二：
==import== =={ Prism== ==as== ==SyntaxHighlighter }== ==from== =='react-syntax-highlighter'====;========import== =={ dark }== ==from== =='react-syntax-highlighter/dist/esm/styles/prism'====;========const== ==Component== ===== ==()== ===>== =={======  ==const== ==codeString== ===== =='(num) => num + 1'====;======  ==return== ==(======    ==<====SyntaxHighlighter language========="javascript"== ==style========={dark}====>======      =={codeString}======    ==</====SyntaxHighlighter====>======  ==);========};==

导入指定语言
import React from 'react'
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import csharp from 'react-syntax-highlighter/dist/esm/languages/prism/csharp';
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
SyntaxHighlighter.registerLanguage('csharp', csharp);
export default function App() {
    const codeString = 'at ExpressMapper.TypeMapperBase`2.Compile(CompilationTypes compilationType, Boolean forceByDemand)';
    // const codeString = '<Pi key={"1"}>afabd</Pi>';
    return (
        <div>
            <h1>Hello</h1>
            <SyntaxHighlighter language='csharp' style={prism}>
                {codeString}
            </SyntaxHighlighter>
        </div>
    )
}