vue3中使用prismjs或者highlight.js实现代码高亮

在Vue 3中，你可以使用Prism.js或highlight.js库来实现代码高亮。以下是使用这两个库的简要步骤和示例代码。

使用Prism.js

1. 安装Prism.js:

npm install prismjs

2. 在你的Vue组件中引入Prism.js和所需的语言定义:

import Prism from 'prismjs';
import 'prismjs/components/prism-clike'; // 例如，如果你需要高亮C/C++等类C语言
 
export default {
  mounted() {
    this.$nextTick(() => {
      Prism.highlightAll();
    });
  }
};

3. 在模板中使用<pre>和<code>标签包裹你的代码:

<pre><code class="language-cpp">// 你的代码</code></pre>

使用highlight.js

1. 安装highlight.js:

npm install highlight.js

2. 在你的Vue组件中引入highlight.js和所需的语言定义:

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 引入样式
import 'highlight.js/lib/languages/cpp'; // 例如，如果你需要高亮C/C++等语言
 
export default {
  mounted() {
    document.querySelectorAll('pre code').forEach((block) => {
      hljs.highlightBlock(block);
    });
  }
};

3. 在模板中使用<pre>和<code>标签包裹你的代码:

<pre><code class="cpp">// 你的代码</code></pre>

确保你的Vue组件中的CSS类名与你引入的语言定义相匹配。例如，language-cpp对应Prism.js，.cpp对应highlight.js。

以上代码需要在你的Vue项目中适当的位置执行，并确保你已经正确安装了Prism.js或highlight.js。