js使用highlight.js高亮你的代码


Posted in Javascript onAugust 18, 2017

在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮。

于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉。

开始了正式的捣鼓。

在捣鼓之前去别的网站看了看。这里贴上简书的效果:

js使用highlight.js高亮你的代码

其中的关键字,方法名,字符串都有不同的颜色,虽然这个代码高亮得不是很好看,但还过得去。于是去看了看document,发现是这样的:

<pre class="hljs javascript"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">name,age,sex</span>) </span>{
  <span class="hljs-built_in">console</span>.log(name+age+sex);
}
<span class="hljs-comment">//要是我这样传,name就成了18,age成了王二了。</span>
getPersonInfo(<span class="hljs-string">'18'</span>,<span class="hljs-string">'王二'</span>,<span class="hljs-string">'男'</span>);
<span class="hljs-comment">//所以可以这样写</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">args</span>)</span>{
  <span class="hljs-built_in">console</span>.log(args.name+args.age+args.sex);
}
getPersonInfo({name:<span class="hljs-string">'王二'</span>,age<span class="hljs-string">'18'</span>,sex:<span class="hljs-string">'男'</span>});</code></pre>

hljs??绝对就是这货了。于是找到了我们的主角:highlight.js。

highlight.js官网

highlightjs的用法可以直接在官网里look

这里我主要写下自己在使用过程中踩到些什么坑,以及最终的解决办法。

1.心急吃不了热豆腐,万事开头最是难

根据官网的doc,只需要三行代码就可以使用了,非常方便,自己写了个小demo测试了一下。还是很有效果的。

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="external nofollow" rel="stylesheet"> 
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> 
<script >hljs.initHighlightingOnLoad();</script>

这里使用了bootstarp提供的cdn,可以直接通过上面的连接来访问cdn,选择需要的版本。就是那么简单。

js使用highlight.js高亮你的代码

这个配色也不是很好看。想要好看的配色可以直接在官网中参考。https://highlightjs.org/static/demo/

2.好用就要应用到实际开发中去

如此简单就可以应用非常的开心,于是应用到了项目中去。

结果遇到了大麻烦....

项目中使用了require.js来加载js,整个应用用的又是angular的框架。

如果直接这样写明显不符合规范,于是将代码变通一下,使用require.js来加载highlight.js。

在require.config中增加highlight的路径配置

'highlight':'http://cdn.bootcss.com/highlight.js/8.0/highlight.min',

在require的回调函数中执行hljs.initHighlightingOnLoad();

require(loadList, function ($, angular) {
    $(function () {
      angular.bootstrap(document, ['blogApp']);
    });
    hljs.initHighlightingOnLoad();
  });

css还是通过link,也可以使用less的@import加载,因为项目用了less,所以我选择了@import

@import "/lib/highlight/styles/tomorrow-night-eighties.css";

然后在html页面写一个code测试:

<body>
    <div ng-include="'template/header.html'"></div>
    <div>
      <pre>
        <code class="lang-javascript">
    function init(){
      $scope.req.getArticle();
      $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    }
        </code>
      </pre>
    </div>
    <div class="content" ui-view></div>
    <footer>cloud blog by@ermu </footer>
  </body>

然后打开浏览器一看:

js使用highlight.js高亮你的代码

灰常完美。

但是当使用了ng-bind-html,来显示从后台返回的文档时:

js使用highlight.js高亮你的代码

代码完全不高亮了。仔细想想,

hljs.initHighlightingOnLoad();

不就是onload的时候执行渲染么,也就是说,在此之后改变document都不会在执行了。所以很显然这样并不能高亮从接口取会来的文档的代码。

google了一下,有一个叫angular-highlightjs 的东西,尝试了使用,但一直报错,官网上也没有什么说明文档

幸好代码托管到了github上面,于是去上面看了看,发现使用说明和官网一样短,issues上也没有人问这个问题,于是我问了一下,希望有人能解答:问题地址

我想highlight.js一定有提供对应的方法,在加载完成之后还可以执行一次,但无奈api文档是英文的,看得比较吃力,决定还是想别的法子。

最终解决问题的方法是接口返回使用highlight.js编译好的html,因为后端使用的是node,于是在cnode论坛上搜了一下,发现marked已经解决了这个问题。

只需要在marked的配置中添加highlight项即可(要先npm install highlight.js):

var marked = require('marked');
var highlight = require('highlight.js');
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  highlight: function (code) {
  return highlight.highlightAuto(code).value;
 }
});

返回的文档已经添加了对应的class。

<pre>
<code class="lang-js">
<span class="hljs-keyword">var</span> math = (<span class="hljs-string">'math'</span>) ;
<span class="hljs-keyword">export</span>.increment = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">val</span>) </span>{
  <span class="hljs-keyword">return</span> math.add(val,<span class="hljs-number">1</span>)
}
</code>
</pre>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js取float型小数点后两位数的方法
Jan 18 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
javascript解析json实例详解
Nov 05 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 #Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 #Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 #Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 #Javascript
JavaScript你不知道的一些数组方法
Aug 18 #Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 #Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 #Javascript
You might like
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python实现八大排序算法
2016/08/13 Python
python实现换位加密算法的示例
2018/10/14 Python
python递归法解决棋盘分割问题
2019/07/17 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
为什么使用接口?
2014/08/13 面试题
三爱活动实施方案
2014/03/19 职场文书
项目合作协议书范本
2014/04/16 职场文书
护理学专业求职信
2014/06/29 职场文书
老干部座谈会主持词
2015/07/03 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
一文搞懂MySQL索引页结构
2022/02/28 MySQL