带有React的PrismJS :使用babel-plugin

Question

最近，我决定使用带有React的PrismJS，并且为了避免导入重复，我设法使用这个babel- plugins包来加载插件、语言等等。

如插件文档所示，我在根文件夹中创建了一个.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()。

我的过程如下：

1. 设置我的.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
      },
    ]
  ],
}

1. 将prismjs导入到_app.js文件中(因为我使用的是Next.js，但是使用React，您可以将其导入app.js文件：

)

// ...
import 'prismjs'

// ...

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

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

export default function Page () {
  usePrismHighlightAll()

  // ...
}

作为一个副手，

还可以将usePrismHighlightAll()钩子移动到app.js文件中，以便在所有页面中启用语法高亮显示，如果这样可以避免在多个位置回忆钩子。但是，我尝试过这样做，不幸的是，它在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中描述的过程。对于我来说，在第一次加载页面时启用语法高亮显示是有效的，请让我知道这是否适用于您。