带有 webpack 和 react 的 SyntaxHighlighter

Question

我尝试使用 react 和 webpack 来实现 SyntaxHighlighter。

我是通过 npm 安装的。

npm install --save syntaxhighlighter

它安装完美。现在的问题是如何正确导入它。

我试过这样：

import SyntaxHighlighter from 'syntaxhighlighter';

但它不起作用，Chrom 控制台报告如下错误：

类型错误：无法分配给对象“#”的只读属性“exports”

如何在 webpack 中使用 syntaxHighlighter 并做出反应？

Answer 1

第1步：安装react-syntax-highlighter

npm install react-syntax-highlighter

第2步：导入react-syntax-highlighter

import SyntaxHighlighter from "react-syntax-highlighter";

第 3 步：导入样式

import { aStyle } from "react-syntax-highlighter/styles/hljs-or-prism";

第 4 步：显示您的代码

<SyntaxHighlighter language="yourLanguage" style={aStyle}>
     {yourCode}
</SyntaxHighlighter>

例子

import React from "react";
import ReactDOM from "react-dom";

import SyntaxHighlighter from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/styles/hljs";

function App() {
    return (
        <div className="App">
            <SyntaxHighlighter language="javascript" style={docco}>
                {console.log('Hello world!...');}
            </SyntaxHighlighter>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

实时运行示例

• 我创建了这个实时运行示例：https ://codesandbox.io/s/wyjp41m1zl

完整文档

• hls 支持的语言：https://github.com/conorhastings/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
• 棱镜支持的语言：https://github.com/conorhastings/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD
• Github 仓库：https://github.com/conorhastings/react-syntax-highlighter