之前对前端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 针对
标签内的xml语言 需对'<'和'>'符号处理成转义字符 通过htmlEncode方法处理。后你的数据已经转移过,忽略过。
htmlEncode: function (str) {
// console.log('str========================================================',str)
var s = ""
str = str || ''
if (str.length == 0) return ""
s = str.replace(/<\/pre>/ig, function (i,a) {
// console.log('i====',i,'\n a==========',a)
// return '
return '<\/pre>'
})
// console.log('转换后=======================================================',s)
return s;
}
我本处只处理的'<' 转义，经测试 这样也是可以的。
最后预览效果
