markdown和prismjs代码高亮

Vite构建

安装markdown包
npm install marked

安装语法高亮包
npm install prismjs -S
npm install vite-plugin-prismjs -D

编辑vite.config.js

import { prismjsPlugin } from 'vite-plugin-prismjs'; //语法高亮插件

export default defineConfig({
  plugins: [
    //...其他插件
    prismjsPlugin({
      languages: ['markup', 'css', 'javascript','go','json','python','sql','shell'], // 语言
      plugins: ['line-numbers'], //官网有其他功能:https://prismjs.com/#plugins
      theme: 'default', // 主题
      css: true,
  }),
  ],
     //...其他配置
})

在组件中使用

import Prism from 'prismjs'; // 代码高亮

onMounted(() => {
    Prism.highlightAll();
  });

prismjs文档:https://prismjs.com/#plugins

vue3构建实时markdown示范：