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自定义图片热区效果
Jul 21 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
vuex实现数据状态持久化
Nov 11 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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
初识php MVC
2014/09/10 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
JS获取时间的方法
2015/01/21 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
深入解析Python中的上下文管理器
2016/06/28 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
python安装及变量名介绍详解
2020/12/12 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
大学生村官事迹材料
2014/01/21 职场文书
服务整改报告
2014/11/06 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
蜗居观后感
2015/06/11 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
赞美教师的句子
2019/09/02 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
如何用python清洗文件中的数据
2021/06/18 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js