在Nuxt 3中如何配置PrismJS和Autoloader插件？

在之前的文章Vue或Nuxt中如何渲染数学公式？中，我们讲解了如何在Nuxt.js中使用本地CDN渲染数学公式。通过本地CDN，我们可以很轻松的加载很多JavaScript库，且不用担心因此导致页面加载变慢。

PrismJS是一个轻量的代码高亮JavaScript库，如果使用平常的方式配置PrismJS（参考如何使用Nuxt实现高亮代码块？），那么你想高亮的每一个语言几乎都需要引入一遍，比如说你想高亮Typescript，那么你需要添加import "prismjs/components/prism-typescript"。显然这很麻烦。

然而，PrismJS有多个插件扩充了它的功能。Autoloader插件可以自动加载你需要的语言，让你不必再一个个的引入你需要高亮语言的文件。加载Autoloader插件最简单的方法是用CDN，在本文，我们将会讲解在Nuxt 3中，如何用加载Mathjax的同一种方法来配置PrismJS和它的autoloader插件。

1. 首先从Github中下载PrismJS的源代码：

https://github.com/PrismJS/prism/archive/refs/tags/v1.29.0.zip

你也可以用npm来下载它：

npm install prismjs

2. 然后将它移动到你Nuxt项目的public目录中。文件的目录结构如下：

Nuxt-app/
     node_modules
     pages
     ...
     public/
        prismjs

3. 最后配置你的nuxt.config.ts文件：

  css: [
    "prismjs/themes/prism-tomorrow.css"
  ],
  app: {

    head: {
      link: [{ rel: "icon", type: "image/png", href: "/favicon.svg" }],

      script: [

        {
          src: "/prismjs/components/prism-core.min.js",
          tagPosition: "bodyClose",
        },

        {
          src: "/prismjs/plugins/autoloader/prism-autoloader.min.js",
          tagPosition: "bodyClose",
        },

    ]
}

现在，PrismJS就会自动加载每个你需要的语言，你仅仅需要调用highlightAll()函数即可。

原文地址：在Nuxt 3中如何配置PrismJS和Autoloader插件？
更多各领域的原创文章：弦圈- 找到属于你的圈子,让知识无荒原
百科全书：弦圈百科
个人生活、经验分享：弦圈社区