reactjs - PrismJS 与 React : using babel-plugin-prismjs

Question

我最近决定将 PrismJS 与 React 一起使用，为了避免重复导入，我设法使用这个 babel-plugin-prismjs 包来加载插件、语言等。

如插件文档中所示，我在根文件夹中创建了一个 .babelrc 文件:

{
  "plugins": [
    ["prismjs", {
        "languages": [
          "applescript",
          "css",
          "javascript",
          "markup",
          "scss"
        ],
        "plugins": ["line-numbers"],
        "theme": "twilight",
        "css": true
    }]
  ]

但我发现这个文件似乎被忽略了，因为没有加载任何内容，并且在控制台记录我导入的 Prism 对象时，我只看到默认语言的语法突出显示。

我想要语法高亮的文件有 import Prism from 'prismjs'声明和 Prism.highlightAll()
所以是的，我可以继续在我的每个文件中手动导入插件、主题和语言，但我想找出出现此类问题的原因。

谢谢 !

Answer 1

你已经成功了一半。你还需要导入prismjs某处，通常在您的app.js文件，然后调用 Prism.highlightAll()在要突出显示语法的页面的相应文件中。
我的过程如下:

设置我的.babelrc.js文件:

const env = require('./env-config')

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      'transform-define',
      env,
    ],
    [
      'prismjs', {
        'languages': ['javascript', 'css', 'html', 'jsx'],
        'plugins': ['line-numbers', 'show-language', 'copy-to-clipboard'],
        'theme': 'tomorrow',
        'css': true
      },
    ]
  ],
}

进口 prismjs进入我的_app.js文件(因为我使用的是 Next.js，但使用 React，您可以将其导入我们的 app.js 文件:

// ...
import 'prismjs'

// ...

使用 prismjs API 调用 .highlightAll()所需页面上的方法:

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

export default function Page () {
  usePrismHighlightAll()

  // ...
}

作为旁注，
也可以移动 usePrismHighlightAll()钩到你的 app.js文件，以便您可以在所有页面中启用语法突出显示，如果这样可以避免您在多个位置调用钩子(Hook)。
但是，我尝试这样做，不幸的是，它在 Next.js 中不起作用:

/* DO NOT USE THIS CODE NEXT.JS AS IT DOES NOT WORK */
import 'prismjs'

// ...

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

export default function App ({ Component, pageProps }) {
  usePrismHighlightAll()

  return (
    <>
      <Layout>
        <Header />
        <Component {...pageProps} />
      </Layout>
    </>
  )
}
/* DO NOT USE THIS CODE NEXT.JS AS IT DOES NOT WORK */

所以，坚持我在步骤 1-3 中概述的过程。
这对我来说可以在页面的第一次加载时启用语法突出显示，如果这对你有用，请告诉我。