在vue3+vite项目中使用代码高亮插件Prism,让你的代码更好看
话不多说先上 官方网站
步骤
1,下载
//安装prismjs 插件 yarn add prismjs //安装prismjs的编译器插件 yarn add vite-plugin-prismjs -D
2,配置vite.config.js
import { prismjsPlugin } from 'vite-plugin-prismjs';
export default defineConfig({
plugins: [
vue(),
prismjsPlugin({
languages: 'all',
plugins: ['line-numbers', 'copy-to-clipboard'], //官网有其他功能,这里开启行数和复制按钮功能
theme: 'okaidia',
css: true,
}),
],
})3,页面中使用
import Prism from 'prismjs';
onMounted(() => {
Prism.highlightAll();
});
<div>
<pre style="padding-left: 0"> //这里处理一下代码头部空间太多问题
<code class="language-js line-numbers">
function getImageUrl(name: string) {
return new URL(`/tool/${name}.png`, import.meta.url).href;
}
</code>
</pre>
</div>4,展示