vue实现语法高亮提示
使用 Prism.js 实现语法高亮
安装 Prism.js 库
通过 npm 或 yarn 安装 Prism.js 核心库及需要的语言插件：
npm install prismjs引入 Prism.js 和样式
在 Vue 组件中引入 Prism.js 核心和所需语言支持：
import Prism from 'prismjs';
import 'prismjs/themes/prism.css'; // 默认主题
import 'prismjs/components/prism-javascript'; // 加载 JavaScript 语法支持高亮代码逻辑
在 mounted 或需要高亮的时机调用 Prism.highlightAll()：
mounted() {
this.$nextTick(() => {
Prism.highlightAll();
});
}模板中使用 <pre> 和 <code> 标签
确保代码包裹在标准的 Prism.js 结构内：
<pre><code class="language-javascript">
const example = 'Hello, Prism.js!';
</code></pre>使用 highlight.js 实现语法高亮
安装 highlight.js
通过 npm 安装核心库及样式：
npm install highlight.js配置 Vue 全局指令
注册一个自定义指令自动高亮代码：
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 选择喜欢的样式主题
Vue.directive('highlight', {
inserted(el) {
hljs.highlightBlock(el);
}
});模板中使用指令
通过 v-highlight 指令触发高亮：
<pre v-highlight><code class="javascript">
function test() { return true; }
</code></pre>动态代码高亮更新
监听内容变化
使用 Vue 的 watch 或结合 updated 钩子重新高亮：
watch: {
codeContent(newVal) {
this.$nextTick(() => {
Prism.highlightAll(); // 或 hljs.initHighlighting.called = false; hljs.highlightAll();
});
}
}使用 Monaco Editor 实现 IDE 级高亮
集成 Monaco Editor
适用于需要复杂编辑功能的场景：
npm install monaco-editor初始化编辑器
在组件中创建编辑器实例：
import * as monaco from 'monaco-editor';
export default {
mounted() {
this.editor = monaco.editor.create(this.$refs.editorContainer, {
value: '// your code here',
language: 'javascript',
theme: 'vs-dark'
});
}
}模板容器
添加一个承载编辑器的 DOM 元素：
<div ref="editorContainer" style="height: 400px; width: 100%;"></div>自定义主题和语言扩展
扩展 Prism.js 语言
手动加载未包含的语言定义：
import 'prismjs/components/prism-typescript';自定义 highlight.js 样式
替换引入的 CSS 文件即可更换主题：
import 'highlight.js/styles/atom-one-dark.css';Monaco 主题定制
通过 monaco.editor.defineTheme 定义自定义主题：
monaco.editor.defineTheme('myTheme', {
base: 'vs',
inherit: true,
rules: [{ token: 'comment', foreground: 'FF0000' }]
});
