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>
                &lt;ul&gt;
                    &lt;li&gt;窗前明月光&lt;/li&gt;
                    &lt;li&gt;疑是地上霜&lt;/li&gt;
                    &lt;li&gt;举头望明月&lt;/li&gt;
                    &lt;li&gt;低头思故乡&lt;/li&gt;
                &lt;/ul&gt;
            </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, "&lt;").replace(/>/ig, "&gt;") + '</code><\/pre>'
        return '<pre><code ' + a.replace(/</ig, "&lt;")+ '</code><\/pre>'
      })
      // console.log('转换后=======================================================',s)
      return s;
    }

我本处只处理的'<' 转义，经测试 这样也是可以的。

 最后预览效果

 

posted @ 2018-09-26 11:23  cc_loving  阅读(1768)  评论(0)    收藏  举报