vue实现语法高亮提示
实现语法高亮的方法
使用highlight.js库
安装highlight.js并引入核心功能及需要的语言包：
npm install highlight.js在Vue组件中注册并应用高亮样式：
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/github.css'; // 选择主题样式
hljs.registerLanguage('javascript', javascript);
export default {
mounted() {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
});
}
};在模板中使用<pre><code>包裹代码：
<pre><code class="javascript">
const message = "Hello, Vue!";
console.log(message);
</code></pre>结合vue-markdown与语法高亮
若需支持Markdown中的代码块，安装vue-markdown并集成高亮：
npm install vue-markdown highlight.js配置Vue组件：
import VueMarkdown from 'vue-markdown';
import hljs from 'highlight.js';
export default {
components: { VueMarkdown },
methods: {
highlight(code, lang) {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code).value;
}
return hljs.highlightAuto(code).value;
}
}
};模板中使用vue-markdown并传递高亮函数：
<vue-markdown
:source="yourMarkdownText"
:html="false"
:highlight="highlight"
/>使用prismjs替代方案
安装prismjs并配置：
npm install prismjs在Vue组件中引入：
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css'; // 主题样式
export default {
mounted() {
Prism.highlightAll();
}
};模板中使用<pre><code>并指定语言类：
<pre><code class="language-javascript">
function test() { return "Prism"; }
</code></pre>动态内容的高亮更新
若需在动态内容变化后重新高亮，调用高亮函数：
this.$nextTick(() => {
hljs.highlightAll(); // 或 Prism.highlightAll()
});注意事项
- 主题样式需单独引入，可从库的
styles目录选择。 - 动态加载语言包可减少初始体积，按需注册语言。
- 服务端渲染（SSR）场景需避免
document直接操作，改用v-html或插件。
