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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
node.js实现上传文件功能
Jul 15 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
javascript实现拖拽碰撞检测
Mar 12 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学习之字符串比较和查找
2011/04/17 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php实现将Session写入数据库
2015/07/26 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python入门之井字棋小游戏
2020/03/05 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
django中cookiecutter的使用教程
2020/12/03 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
应用艺术毕业生的自我评价
2013/12/04 职场文书
24岁生日感言
2014/01/13 职场文书
运动会入场解说词300字
2014/01/25 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript