2

我最近决定将 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()

所以是的，我可以继续在我的每个文件中手动导入插件、主题和语言，但我想找出出现此类问题的原因。

谢谢 ！

4

1 回答 1

3

你已经成功了一半。您仍然需要导入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. 使用prismjsAPI 调用.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 中概述的过程。这对我来说可以在页面的第一次加载时启用语法突出显示，如果这对你有用，请告诉我。

于 2020-08-24T15:19:17.943 回答