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 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
JS实现放烟花效果
Mar 10 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
谈谈JS中的!!
2017/12/07 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
r.js来合并压缩css文件的示例
2018/04/26 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python文件操作类操作实例详解
2014/07/11 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
预备党员转正思想汇报
2014/01/12 职场文书
学生会部长竞聘书
2014/03/31 职场文书
后进生评语大全
2015/01/04 职场文书
求职自我推荐信
2015/03/24 职场文书
针对吵架老公保证书
2015/05/08 职场文书
民间借贷借条如何写
2015/05/26 职场文书
校运会新闻稿
2015/07/17 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL