PrismJS babel配置在React中不起作用

Question

我安装了babel-plugin-prismjs，用下面的代码做了.babelrc：

{
    "plugins": [
        ["prismjs", {
            "languages": ["javascript", "css", "html"],
            "plugins": ["line-numbers", "show-language", "copy-to-clipboard", "toolbar", "inline-color"],
            "theme": "prism-tomorrow",
            "css": true
            }
        ]
    ]
}

并将棱镜导入App.js。

这是App.js中的代码：

import React, { useEffect } from "react";
import Prism from "prismjs";

const code = `
const foo = 'foo';
const bar = 'bar';
console.log(foo + bar);
`.trim()

function App() {
  useEffect(() =>{
    Prism.highlightAll();
  }, [])

  return (
    <pre className="line-numbers">
      <code className="language-js">
        {code}
      </code>
    </pre>
  );
}

export default App;

但是网页并没有突出显示语法。这里我漏掉了什么？

Answer 1

如果您在从create-react-app (CRA)构建的react项目中使用它，您的代码将无法工作。您的.babelrc文件未被使用。CRA不公开babel配置。请查看this answer了解更多有关这方面的信息。

对于您的用例，最简单的方法是go to prismjs page to download the CSS file。选择正确的主题，然后单击页面底部的“下载CSS”。

在您的App.js代码中导入此CSS文件。

import '../prism.css';

这将适用于Javascript和其他一些内置语言包。如果没有为您的语言显示适当的标记，则还需要手动导入这些语言。

注意:这只是一个不弹出您的CRA项目的变通方法。如果可以的话，推荐的方式仍然是使用babel-plugin-prismjs。