highlight.js 可以帮助你高亮代码。

官网：https://highlightjs.org/

1 安装

npm install highlight.js
npm install @highlightjs/vue-plugin@1.0.2

@highlightjs/vue-plugin 是一个 vue 插件，是一个写好的组件。

注意：vue2 中使用，安装 1.x.x 版本。

2 使用

2.1 基本使用

main.js 中添加：

import highlightPlugin from "@highlightjs/vue-plugin";
Vue.use(highlightPlugin);

组件中使用：<highlightjs />

<template>
  <div class="gl-view-rootbox">
    <highlightjs language="javascript" :code="code"></highlightjs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: `
      let x = 5;
      let y=10;
      let obj={
        age:12,
        name:'lihao'
      }`,
    };
  },
};
</script>

<style lang="less" scoped></style>

效果：

2.2 引入样式

main.js 中：

import highlightPlugin from "@highlightjs/vue-plugin";
import 'highlight.js/styles/dark.css'; // 引入内置样式

Vue.use(highlightPlugin);

这个时候你会发现样式并没有生效，这是 @highlightjs/vue-plugin 的问题。

解决：

在 node_modules 中找到 @highlightjs/vue-plugin，修改 src 下的 vue.js：

// import hljs from "highlight.js/lib/core.js"; // 注释掉原来的导入
import hljs from 'highlight.js/lib/common'; // 使用该导入，样式即生效

效果：

参考资料：

[1] https://blog.csdn.net/weixin_40532650/article/details/109988630