SyntaxHighlighter与webpack的反应

Question

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

我通过npm安装它。

npm install --save syntaxhighlighter

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

我试过这样做：

import SyntaxHighlighter from 'syntaxhighlighter';

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

TypeError:无法指定对象“#”的只读属性“导出”

我如何与webpack一起使用syntaxHighlighter并做出反应？

Answer 1

第1步:安装react语法-荧光笔

npm install react-syntax-highlighter

第2步:导入反应-语法-荧光笔

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：HLJS.MD的语言
• 支持棱镜语言：PRISM.MD
• Github回购：https://github.com/conorhastings/react-syntax-highlighter