PrismJS babel配置在React中不起作用

Question

我安装了babel插件prismjs，made.babelrc，代码为：

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

并将Prism导入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不暴露巴氏合金配置。查看此答案以了解更多信息。

对于您的用例，最简单的方法是转到prismjs页面下载CSS文件。选择正确的主题，然后单击页面底部的"下载CSS"。

在你的App.js代码中导入这个CSS文件。

import '../prism.css';

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

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