【问题标题】：SyntaxHighlighter with webpack and reactSyntaxHighlighter 与 webpack 和反应
【发布时间】：2018-01-09 03:51:33
【问题描述】：

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

我通过 npm 安装它。

npm install --save syntaxhighlighter

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

我试过这样：

import SyntaxHighlighter from 'syntaxhighlighter';

但是不行，Chrom控制台报如下错误：

TypeError：无法分配给对象“#”的只读属性“exports”

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

【问题讨论】：

标签： reactjs webpack syntaxhighlighter

【解决方案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

【讨论】：