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 相关文章推荐
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
二维码图片生成器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数据流应用的一个简单实例
2012/09/14 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
军训后的感想
2015/08/07 职场文书
自荐信范文
2019/05/20 职场文书
如何书写授权委托书?
2019/06/25 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis