highlight.js实现代码高亮显示(在vue中实践)

之前对前端pre标签的展示做过一些处理后,组长让我去将展示效果进行优化,并给我介绍了highlight.js

官方介绍使用特别简单,

highlight.js实现代码高亮显示(在vue中实践)_第1张图片

下面是自己写了一个小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>

展示效果

highlight.js实现代码高亮显示(在vue中实践)_第2张图片

特此记录一下

 

====== 更新于 2019-03-01 =========

针对vue项目 我们若直接引用js与css 可能涉及到路由跳转后 不生效的问题 故需要自己自定义一个指令。做特殊处理

1 首先安装 npm install  highlight.js -D

2 本地新建一个highlight.js文件

highlight.js实现代码高亮显示(在vue中实践)_第3张图片

文件内容如下  自定义了一个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

highlight.js实现代码高亮显示(在vue中实践)_第4张图片

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 '
/ig, ">") + '<\/pre>'
        return '
<\/pre>'
      })
      // console.log('转换后=======================================================',s)
      return s;
    }

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

 最后预览效果

highlight.js实现代码高亮显示(在vue中实践)_第5张图片

 

转载于:https://www.cnblogs.com/shichangchun/p/9705875.html

你可能感兴趣的:(highlight.js实现代码高亮显示(在vue中实践))