Nuxt3中使用prismjs高亮代码

项目需要高亮显示markdown文档中的代码。刚开始使用的是highlight库，但使用中发现这个库对一些语言的支持不太好，然后换成prism库，发现这个库语言支持能力和样式都不错，所以就选择这个库。

下面介绍如何在nuxt3中使用这个库。

安装下面几个库

yarn add prismjs

# 这个库主要是一些ts的类型声明文件，
# 这些类型与纯js写的库中导出的方法和变量相对应
#以便ts中能方便的使用纯js写的代码。
# 简单的说就是在typescript中使用 javascript写的代码。
yarn add --dev @types/prismjs 

# 此插件依赖babel-plugin-prismjs
# babel插件主要是根据配置来导入相应的插件和主题库,并且根据浏览器兼容性的需要转成
# 低版本支持的代码。
yarn add --dev vite-plugin-prismjs 

添加配置

在nuxt.config.ts文件中添加如下配置

import prismjs from 'vite-plugin-prismjs'


vite: {
        plugins: [
            prismjs({
                // 添加支持的高亮的语言, 如果需要支持全部的话改成这样:  languages: "all"
                languages: ['cpp',
                 'javascript',
                  'bash',
                   'dart',
                    'sql',
                    'css',
                    'html',
                    'java',
                    'json',
                    'sass',
                    'scss',
                    'c',
                    'log',
                    'swift',
                    'md',
                    'nginx',
                    'yaml',
                    'xml',
                    'shell',
                    'ts'
                ],
                // 配置prism插件 toolbar是后面两个插件依赖的插件.
                // show-language: 显示语言名。
                // copy-to-clipboard: 添加复制代码功能。
                plugins: ['toolbar', 'show-language', 'copy-to-clipboard'],
                // 主题名称,支持的主题可以在 node_moduels中安装此库的目录下寻找。
                theme: "tomorrow",
                css: true
            })
        ]
    },

使用示例

prism 库在浏览器加载后，会自动调用highlightAll, 来高度HTML中的代码块，并根据在配置文件中配置的插件，自动执行插件模块的代码。
如果你的markdown文档已经在ssr的服务端转成了html，则你不需要添加任何代码，就可以完成代码高亮。

但如果你的markdown文档内容需要在客户端获取并展示的话，需要添加如下代码，主动触发highlightAll

<script setup>
import Prism from 'prismjs'
onMounted(async () => {
    // 先获取数据
    // nextTick保证你的获取到的已转成html的markdown内容已经更新到HTML的DOM结构中了。
     await nextTick()
    //  然后执行高亮即可
    Prism.highlightAll()
})
</script>

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：Nuxt3中使用prismjs高亮代码