vue实现代码插件
Vue 实现代码插件的方法
使用第三方库（如 Prism.js 或 Highlight.js）
安装 Prism.js 或 Highlight.js 库，这些库专门用于代码高亮显示。在 Vue 项目中引入并配置这些库，可以快速实现代码高亮功能。
npm install prismjs在 Vue 组件中引入 Prism.js 并初始化：
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
export default {
mounted() {
Prism.highlightAll();
}
};自定义代码高亮组件
创建一个 Vue 组件，用于包裹代码块并应用自定义样式。可以通过正则表达式或字符串处理函数对代码进行语法分析，并添加高亮类名。
<template>
<pre class="code-block"><code v-html="highlightedCode"></code></pre>
</template>
<script>
export default {
props: ['code', 'language'],
computed: {
highlightedCode() {
// 自定义高亮逻辑
return this.code;
}
}
};
</script>
<style>
.code-block {
background: #f5f5f5;
padding: 1em;
border-radius: 4px;
}
</style>使用 Vue 指令
通过 Vue 自定义指令，可以动态绑定代码内容并实现高亮。指令可以在元素插入 DOM 时触发高亮逻辑。
Vue.directive('highlight', {
inserted(el) {
Prism.highlightElement(el);
},
update(el) {
Prism.highlightElement(el);
}
});在模板中使用指令：
<pre v-highlight><code class="language-javascript">const message = 'Hello, Vue!';</code></pre>集成 Monaco Editor
对于需要复杂代码编辑功能的场景，可以集成 Monaco Editor（VS Code 的编辑器核心）。通过 Vue 组件包装 Monaco Editor，提供代码补全、语法高亮等功能。
npm install monaco-editor创建 Vue 组件：
<template>
<div ref="container" class="monaco-container"></div>
</template>
<script>
import * as monaco from 'monaco-editor';
export default {
props: ['code', 'language'],
mounted() {
this.editor = monaco.editor.create(this.$refs.container, {
value: this.code,
language: this.language,
theme: 'vs-dark'
});
}
};
</script>动态语言切换
支持多语言代码高亮时，可以通过动态加载语言模块实现切换。Prism.js 和 Highlight.js 都支持按需加载语言定义。
import Prism from 'prismjs';
import 'prismjs/components/prism-python';
export default {
methods: {
changeLanguage(lang) {
Prism.highlightAll();
}
}
};响应式代码块
结合 Vue 的响应式特性，动态更新代码内容时自动触发高亮。通过监听代码变化或使用计算属性，确保高亮效果实时更新。
watch: {
code(newVal) {
this.$nextTick(() => {
Prism.highlightAll();
});
}
}
