赞
踩
在 vue 中实现代码块高亮,即
<pre><code>
标签中用于直接在页面中展示的代码,增加高亮显示的效果,可以使用highlight.js
来帮助我们实现。
npm install highlight.js -S
// 引入 highlight.js 代码高亮工具
import hljs from "highlight.js";
// 使用样式,有多种样式可选
import "highlight.js/styles/github-gist.css";
// 增加自定义命令v-highlight
Vue.directive("highlight", function(el) {
let blocks = el.querySelectorAll("pre code");
blocks.forEach(block => {
hljs.highlightBlock(block);
});
});
// 增加组定义属性,用于在代码中预处理代码格式
Vue.prototype.$hljs = hljs;
<div v-highlight> <!-- 使用指令 --> <pre> <code class="css"><!-- 声明什么类型的代码 --> [CSS] { width:'100px' } </code> <code class="javascript"> [javascript] var a = 123; var b = document.getElementById('tr') </code> <code class="html"> [HTML] <div></div><!-- html代码需要转义 --> </code> </pre> </div>
<pre>
和<code>
标签里面可以使用
vue.$hljs.highlightAuto("内容").value
来格式化代码,然后再将格式化之后的代码渲染到页面上。
<template> <div v-html="codeHtml" v-highlight></div> </template> <script> export default { data() { return { codeHtml: "" } }, monted() { this.format(); }, methods: { format() { let code = "function() { console.log(\"Hello world!\"); }"; const html = this.$hljs.highlightAuto(code).value; this.codeHtml = html; } } } </script>
引入样式在 "highlight.js/styles/"
中,引用时将样式名字大写转小写并将名字之间的空格替换为"-"
,再在最后添加 ".css"
后缀
例如:Github Gist → github-gist.css
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。