Vue框架中实现页面代码高亮的方法及代码

近期有一个网站建设项目使用了VUE框架，其中有部分页面会有相关代码显示，并且要求做高亮显示。之前用 Ace 高亮代码，但依赖包过大，由于项目本身需要的功能也不是很多，只有代码高亮、显示行号、高亮某行经过对比发现用Prismjs就可以实现，现将过程分享出来供大家参考。

1、 安装依赖

yarn add prismjs // 安装 prismjs 组件
yarn add babel-plugin-prismjs --dev // 安装编译器插件

2、配置插件

// .babelrc 或 babel.config.js 文件里配置以下内容
{
  "plugins": [
    ["prismjs", {
        "languages": ["javascript", "css", "php"], // 需要的语言
        "plugins": ["line-numbers", "line-highlight"], // 引入的插件
        // "theme": "twilight", // 自定义主题
        "css": true
    }]
  ]
}

3、代码片段

// pre 和 code 写在同一行（不然行号会错乱
<template>
  <pre
    :data-line="props.lineNumber"
    :class="[`language-${props.language}`, 'highlight-code line-numbers']"><code :class="[`language-${props.language}`]">{{props.code}}</code></pre>
</template>
<script setup>
import { defineProps, onMounted } from "vue;
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
const props = defineProps ( {
  code: String,
  language: String,
  lineNumber: {
    type: Number, 
    defalut: 0,
  },
});
onMounted(() => {
  setTimeout(() => // 必须加（获取不到高亮行的高度和宽度
    Prism.highlightAll(); // 异步请求的数据，可在获取数据后调用此方法
  });
});
</script>

以上代码中注意看注释，非常重要。

好了，通过以上代码就可以实现Vue框架中页面代码高亮的功能了，喜欢的话记得收藏哦。