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中的使用
