vue实现代码块
Vue 实现代码块的常用方法
使用第三方库如 highlight.js
安装 highlight.js 并配置 Vue 插件，通过自定义指令或组件实现代码高亮。
npm install highlight.js在 Vue 中注册全局指令：
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 引入样式
Vue.directive('highlight', {
inserted(el) {
hljs.highlightBlock(el);
}
});模板中使用：
<pre v-highlight><code class="javascript">const foo = 'bar';</code></pre>封装可复用的代码块组件
创建 CodeBlock.vue 组件，动态加载语言高亮规则。
<template>
<pre><code :class="language" ref="code">{{ content }}</code></pre>
</template>
<script>
import hljs from 'highlight.js';
export default {
props: ['content', 'language'],
mounted() {
hljs.highlightBlock(this.$refs.code);
}
};
</script>调用示例：
<code-block content="console.log('Hello')" language="javascript" />结合 Markdown 渲染
若需要渲染 Markdown 中的代码块，使用 marked 和 highlight.js 组合。
npm install marked highlight.js配置 Markdown 解析器：
import marked from 'marked';
import hljs from 'highlight.js';
marked.setOptions({
highlight: (code, lang) => hljs.highlight(lang, code).value
});在 Vue 中转换 Markdown：
<div v-html="compiledMarkdown"></div>
<script>
export default {
computed: {
compiledMarkdown() {
return marked('```js\nconst x = 1;\n```');
}
}
};
</script>动态语言切换
通过 watch 监听语言变化，重新高亮代码块。
watch: {
language() {
this.$nextTick(() => {
hljs.highlightBlock(this.$refs.code);
});
}
}注意事项
- 样式需单独引入，如
github.css或atom-one-dark.css。 - 避免直接使用
v-html渲染未过滤的内容，防止 XSS 攻击。 - 服务端渲染 (SSR) 需检查
highlight.js的兼容性。
