js使用highlight.js高亮你的代码
在逛别人的博客的时候，看见别人的代码的例子使用了高亮的语法，无论是java，js还是php等等语言，都会自动的对关键字进行高亮。
于是在前几天自己写了一个博客，遇到code时，自然就想到了别人网站如何漂亮，巴拉巴拉。
开始了正式的捣鼓。
在捣鼓之前去别的网站看了看。这里贴上简书的效果：
其中的关键字，方法名，字符串都有不同的颜色，虽然这个代码高亮得不是很好看，但还过得去。于是去看了看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。
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，选择需要的版本。就是那么简单。
这个配色也不是很好看。想要好看的配色可以直接在官网中参考。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>
然后打开浏览器一看：
灰常完美。
但是当使用了ng-bind-html，来显示从后台返回的文档时：
代码完全不高亮了。仔细想想，
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS库之Highlight.js的用法详解
官网:https://highlightjs.org/ 下载地址:https://highlightjs.org/download/ 下载到本地后,新建个页面测试 1.在head中加入css和js的引用 <head> <title>highlight</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link r
-
JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创
本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig
-
JS库 Highlightjs 添加代码行号的实现代码
Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式. 然而,Highlightjs默认是不包括显示代码行号(Line Number)这一特性的,不过可以通过简单的JS代码和CSS样式表实现对Highlightjs的行号显示功能. 参考博文链接: syntax-highlighting-with-highlightjs Javascript代码: //numbering for pre>code blocks $(function(){ $('pr
-
js使用highlight.js高亮你的代码
在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮. 于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉. 开始了正式的捣鼓. 在捣鼓之前去别的网站看了看.这里贴上简书的效果: 其中的关键字,方法名,字符串都有不同的颜色,虽然这个代码高亮得不是很好看,但还过得去.于是去看了看document,发现是这样的: <pre class="hljs javascript">
-
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
主要从两个方面入手了: 1.高亮显示/换行 2.复制代码按钮 这两方面都有现成的插件. 代码高亮插件--highlight.js 1.下载highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选常用语言,通常common就足够用了. 点击download,下载,解压,里面会有js文件和css文件. js文件决定哪些部分高亮,css决定代码颜色 2.在解压后的文件里找到一个highlight.pack.js文件,在使用时导入
-
在react中使用highlight.js将页面上的代码高亮的方法
通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮,highlight.js官方文档 下载highlight.js npm i highlight.js 导入highlight.js import hljs from 'highlight.js' import 'highlight.js/styles/vs2015.css' 用highlight.js useEffect(() => { // 配置 highlight.js hljs
-
vue使用showdown并实现代码区域高亮的示例代码
前言:当我们想把makedown文档转译为html在网页上显示,并且能漂亮的展示出自己想要的网页形式,接下来我给大家介绍插件来达到我们所想要的功能. 注:下面安装及使用方式是基于vue进行滴. 1.安装showdown npm install showdown --save 2.将showdown引入到使用的页面中 <template> <div v-html="htms"></div> </template> <script>
-
highlight.js 代码高亮插件的使用详解
在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下载一个highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮.通常common就足够用了. 然后点击下面的download按钮,下载,解压,里面会有j
-
vue3引入highlight.js进行代码高亮的方法实例
目录 背景描述: 一.安装依赖: 二.在vue3主入口main文件,对highlight进行引入和注册: 三.页面使用: 四.看下效果展示吧: 五.一些优化: 1.问题 2.解决方法 3. 处理后的效果 总结 背景描述: 在项目开发中,经常一些日志预览,还有文件的预览,需要进行代码高亮显示.这样可以让文本内容展示的时候显得更加友好,也便于阅读 效果类似markdown语法的代码高亮,如下: <TestPlan guiclass="TestPlanGui" testclass=&q
-
Vue中使用highlight.js实现代码高亮显示以及点击复制
目录 效果如下 第一步 安装highlight.js 第二步 在main.js中引入 第三步 创建组件 效果如图:点击显示代码 第四步: 使用组件 第五步 实现点击复制代码clipboard.js. 本文主要介绍了Vue中使用highlight.js实现代码高亮显示以及点击复制,具体如下: 效果如下 第一步 安装highlight.js yarn add highlight.js 第二步 在main.js中引入 import hl from 'highlight.js' // 导入代码高亮文件
-
JS+CSS实现表格高亮的方法
本文实例讲述了JS+CSS实现表格高亮的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran