highlight.js —— 一个开源语法高亮库，用于在网页上对源代码进行语法高亮显示。
安装
npm i highlight.js
yarn add highlight.js
引入
// main.js import { createApp } from 'vue'; import App from "./App.vue"; import hljs from "highlight.js"; // 代码高亮插件 import "highlight.js/styles/color-brewer.css" // 引入高亮样式const app = createApp(App); // 自定义指令 app.directive("highlight", function (el) {const blocks = el.querySelectorAll("pre code");blocks.forEach((el2: any) => {hljs.highlightElement(el2);}); }); app.mount('#app');
使用
<pre v-highlight><code class="language-javascript">{{ code }} </code> </pre>
效果预览:
报错：
1）：
Deprecated as of 10.7.0. highlightBlock will be removed entirely in v12.0.（自10.7.0起弃用。highlightBlock将在v12.0中完全删除）
Deprecated as of 10.7.0. Please use highlightElement now.（自10.7.0起弃用。请立即使用highlightElement。）
原因：highlightBlock方法废弃了，改为highlightElement吧。
如果你的版本低于上面的提示版本，那就得改了，我的是最新的。
2）：WARN: Could not find the language 'undefined', did you forget to load/include a language module?（警告：找不到语言“undefined”，是否忘记加载/包含语言模块？）
原因：你要在代码块的一个类名写上诸如class="language-javascript"的标识，它highlight.js才能识别，通常是这么写：
<code class="language-javascript">// ...</code>
3）：Element previously highlighted. To highlight again, first unset dataset.highlighted.（之前突出显示的元素。要再次突出显示，请先将未设置的数据集高亮显示。）
解决方案：重启服务，这个我觉得是在开发中应该会遇到过，至少现在是这样。
ps：我上面的代码已经是改好的了，坑我已经踩了。
