Use the code highlighting plugin Prism in the vue3+vite project to make your code look better

Use the code highlighting plugin Prism in the vue3+vite project to make your code look better

Without further ado, go to the official website first

step

1, download

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

//安装prismjs的编译器插件
npm install babel-plugin-prismjs -D

2, Configure 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, used in the page

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, display