prismjs插件在nuxt3中的使用

在上篇文章中介绍了如何在nuxt3中集成并且使用prismjs来高亮代码。 这里就主要讲下prismjs中的插件的使用。

代码语言显示插件

代码语言显示插件比较简单，只需要在nuxt.config.ts中添加如下配置即可:

import prismjs from 'vite-plugin-prismjs'
vite: {
        plugins: [
            prismjs({
                ...
                // 配置prism插件 toolbar是后面两个插件依赖的插件.
                plugins: ['toolbar', 'show-language'],
                ...
            })
        ]
    },

这样就会在右上角显示代码的语言

pic1.jpg

代码复制插件

先在nuxt.config.ts添加如下配置

import prismjs from 'vite-plugin-prismjs'
vite: {
        plugins: [
            prismjs({
                ...
                // 配置prism插件 toolbar是后面两个插件依赖的插件.
                plugins: ['toolbar', 'copy-to-clipboard'],
                ...
            })
        ]
    },

此时就有了复制功能，但复制的提示文字都是英文的，需要改成中文。换成中文也非常简单，在app.vue文件中添加如下代码即可:

<!-- app.vue -->
<script setup>
useHead({
    bodyAttrs: {
        "data-prismjs-copy": "复制",
        "data-prismjs-copy-error": "复制出错",
        "data-prismjs-copy-success": "已复制"
    }
})
</script>

这样就显示中文

pic2.jpg

默认的复制按钮点击时是黑色的，添加如下样子可修改显示的颜色

div.code-toolbar>.toolbar>.toolbar-item>a:hover,
div.code-toolbar>.toolbar>.toolbar-item>a:focus,
div.code-toolbar>.toolbar>.toolbar-item>button:hover,
div.code-toolbar>.toolbar>.toolbar-item>button:focus,
div.code-toolbar>.toolbar>.toolbar-item>span:hover,
div.code-toolbar>.toolbar>.toolbar-item>span:focus {
    color: white
}

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