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
            }
        ]
    ]
}

并将 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 不公开 babel 配置。检查 this answer 以了解更多信息。

对于您的用例，最简单的方法是 go to prismjs page to download the CSS file。 Select 正确的主题并点击页面底部的 'DOWNLOAD CSS'。

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

import '../prism.css';

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

注意：这只是不弹出 CRA 项目的变通方法。可以的话还是推荐使用babel-plugin-prismjs

PrismJS babel 配置在 React 中不起作用

PrismJS babel config not working in React

reactjs

prismjs