Nuxt开发: Prism高亮代码
2025-03-31 · Develop

先安装依赖

npm i prism

在nuxt.config.ts内写入

  vite: {
    plugins: [
      prismjs({
        languages: "all", // 支持全部语言
        plugins: ['toolbar', 'show-language', 'copy-to-clipboard'],
        theme: "tomorrow.min",
        css: true
      })
    ]
  }

最后在文章页面

import * as Prism from 'prismjs';
// 代码高亮处理
const highlightCode = async () => {
    await nextTick();
    if (process.client && window.Prism) {
        window.Prism.highlightAll();
    }
};
// 在组件挂载后高亮代码
onMounted(highlightCode);

完事~

© 转载请保留原链接

来杯咖啡吧

还没有人充电,快来当第一个充电的人吧!