在vue3+vite项目中使用代码高亮插件Prism,让你的代码更好看

在vue3+vite项目中使用代码高亮插件Prism,让你的代码更好看

话不多说先上 官方网站

步骤

1,下载

//安装prismjs 插件
npm install prismjs -S

//安装prismjs的编译器插件
npm install babel-plugin-prismjs -D
npm install 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,展示