highlight.js实现代码高亮显示(在vue中实践)
之前对前端pre标签的展示做过一些处理后,组长让我去将展示效果进行优化,并给我介绍了highlight.js
官方介绍使用特别简单,
下面是自己写了一个小demo和展示效果
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet"> <title>代码高亮显示</title> </head> <body> <div>js代码片段</div> <div> <pre> <code> function add(n,m){ console.log(n,m) return n+m } </code> </pre> </div> <div>html代码片段</div> <div> <pre> <code> <ul> <li>窗前明月光</li> <li>疑是地上霜</li> <li>举头望明月</li> <li>低头思故乡</li> </ul> </code> </pre> </div> <div>css代码片段</div> <div> <pre> <code> .help-content{ margin-bottom:0; padding:0 20px 20px 0; font-size:14px; color:#666 } </code> </pre> </div> </body> <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> <script >hljs.initHighlightingOnLoad();</script> </html>
展示效果
特此记录一下
====== 更新于 2019-03-01 =========
针对vue项目 我们若直接引用js与css 可能涉及到路由跳转后 不生效的问题 故需要自己自定义一个指令。做特殊处理
1 首先安装 npm install highlight.js -D
2 本地新建一个highlight.js文件
文件内容如下 自定义了一个v-highlight指令
import Vue from 'vue' import Hljs from 'highlight.js' let Highlight = {} Highlight.install = function (Vue, options) { Vue.directive('highlight', function (el) { var blocks = el.querySelectorAll('pre code'); // blocks.forEach((block) => { // blocks是个类数组 在ie版本不支持 无法高亮 // Hljs.highlightBlock(block) // }) Array.prototype.forEach.call(blocks, (block) => { Hljs.highlightBlock(block) }) }) } export default Highlight
3 修改main.js 其中css样式可选择库中任一风格 或者重写一个属于自己风格的css
4 在组件中使用v-highlight指令 其中content.txt是我显示的内容数据 htmlEncode是我对数据展示前的特殊处理
5 针对<pre><code>标签内的xml语言 需对'<'和'>'符号处理成转义字符 通过htmlEncode方法处理。后你的数据已经转移过,忽略过。
htmlEncode: function (str) { // console.log('str========================================================',str) var s = "" str = str || '' if (str.length == 0) return "" s = str.replace(/<pre><code([\s\S]*?)<\/code><\/pre>/ig, function (i,a) { // console.log('i====',i,'\n a==========',a) // return '<pre><code ' + a.replace(/</ig, "<").replace(/>/ig, ">") + '</code><\/pre>' return '<pre><code ' + a.replace(/</ig, "<")+ '</code><\/pre>' }) // console.log('转换后=======================================================',s) return s; }
我本处只处理的'<' 转义,经测试 这样也是可以的。
最后预览效果