在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮。
于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉。
开始了正式的捣鼓。
在捣鼓之前去别的网站看了看。这里贴上简书的效果:
- <pre class="hljs javascript"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">functionspan> <span class="hljs-title">getPersonInfospan>(<span class="hljs-params">name,age,sexspan>) span>{
- <span class="hljs-built_in">consolespan>.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">functionspan> <span class="hljs-title">getPersonInfospan>(<span class="hljs-params">argsspan>)span>{
- <span class="hljs-built_in">consolespan>.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="stylesheet">
- <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js">script>
- <script >hljs.initHighlightingOnLoad();script>
这里使用了bootstarp提供的cdn,可以直接通过上面的连接来访问cdn,选择需要的版本。就是那么简单。
2.好用就要应用到实际开发中去
如此简单就可以应用非常的开心,于是应用到了项目中去。
结果遇到了大麻烦....
项目中使用了require.js来加载js,整个应用用的又是angular的框架。
如果直接这样写明显不符合规范,于是将代码变通一下,使用require.js来加载highlight.js。
然后在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">varspan> math = (<span class="hljs-string">\'math\'span>) ;
- <span class="hljs-keyword">exportspan>.increment = <span class="hljs-function"><span class="hljs-keyword">functionspan>(<span class="hljs-params">valspan>) span>{
- <span class="hljs-keyword">returnspan> math.add(val,<span class="hljs-number">1span>)
- }
- code>
- pre>↵

2016年10月24日 下午5:23 1F
好东西
