在逛别人的博客的时候，看见别人的代码的例子使用了高亮的语法，无论是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。

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，选择需要的版本。就是那么简单。

这个配色也不是很好看。想要好看的配色可以直接在官网中参考。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>↵

使用highlight.js高亮你的代码的更多相关文章

  1. 【blog】使用highlight.js高亮你的代码

    我的代码 <!--代码高亮插件--> <link rel="stylesheet" type="text/css" href="/w ...

  2. 如何使用 highlight.js 高亮代码

    highlight 是一款简单易用的 web 代码高亮插件,可以自动检测编程语言并高亮,兼容各种框架,可以说是十分强大了.下面就简单介绍一下如何使用这款插件. 两种使用方式: 1. 手动选择主题,官网 ...

  3. 使用highlight.js高亮静态页面的语言代码

    显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串. 不过能使静态的文本能高亮显示,倒更炫酷一点.其实很简单的,引入highlight.js包,可以使用cd ...

  4. 用 highlight.js 为文章中的代码添加语法高亮

    来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...

  5. highlight.js 设置行号

    原文地址:highlight.js 设置行号 博客地址:http://www.extlight.com 一.背景 笔者在开发这套博客系统时使用 Editormd 作为 Markdown 编辑器,由于不 ...

  6. 给大家推荐一款高大上的代码高亮插件（sublime，github风格）——highlight.js

    经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等.毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验.经过我在网上的一番搜罗, ...

  7. highlight.js 页面 代码高亮

    官网:https://highlightjs.org/ 功能: 支持 155 种编程语言的语法解析:拥有 73 种样式 自动检测编程语言 可以在 node.js 平台上运行 支持各种标签 与任何 js ...

  8. 【highlight.js】页面代码高亮插件

    [highlight.js] 很多博客都支持页面插入各种语言的代码,而这些代码肯定是有高亮设置的.那么在我们自己的页面上如何进行代码高亮设置?有现成的这个highlight.js插件我们可以使用. h ...

  9. Ghost本地安装highlight.js使代码高亮

    对于程序猿写博客来说,这代码高亮是起码的要求.可是Ghost本身没有支持高亮代码. 可是能够通过扩展来实现,它就是highlight.js--附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行 ...

随机推荐

  1. 短信验证码js实现

    短信验证码实现 我们在使用移动.电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码.最近因为某省业务需要,也做了个类似的功能. 原理很简单,就是在用户点击"获 ...

  2. 【转】微信Android SDK示例代码及运行方法

    原文网址:http://blog.csdn.net/icyfox_bupt/article/details/23742217 最近在研究微信SDK,无奈网上好使的教程太少,对于程序员来说最好的东西,一 ...

  3. php5.4下安装ECshop出现错误的解决办法

    转:http://www.programmernote.com/?p=65 1.安装是会提示 Warning: date_default_timezone_get(): It is not safe ...

  4. canvas——画板

    注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...

  5. java String 去除空格

    1. java 去掉字符串的空格(中间空格,左右空格) 比如 时间字符串,去掉‘-’,‘:’,与空格 String x = "2008-09-08 11:12:23"; x=x.r ...

  6. autoit使用

    autoit下载地址: http://www.autoitx.com/thread-12964-1-1.html?sid=4zMMSb 在autoit的安装目录下有个Au3Info.exe文件,该文件 ...

  7. POJ 1159 Palindrome 最长公共子序列的问题

    Description A palindrome is a symmetrical string, that is, a string read identically from left to ri ...

  8. 折腾iPhone的生活——通过设置使iPhone更省电

    入手了iPhone5s,上手感觉iPhone没有过去省电了,可能是iOS7的关系,也有可能是我一直在下应用的关系,但是iPhone5s那1500mA的电池的确是有点真的不那么够用的样子,通过设置来省电 ...

  9. c++函数模板声明与定义相分离

    最近在仿写stl,发现stl源码中将模板的声明与定义写在一起实在很不优雅.自己尝试用“传统”方法,及在.h文件里声明,在.cpp文件里定义,然后在main函数里包含.h头文件,这样会报链接错误.这是因 ...

  10. codeforces 400D Dima and Bacteria 并查集+floyd

    题目链接:http://codeforces.com/problemset/problem/400/D 题目大意: 给定n个集合,m步操作,k个种类的细菌, 第二行给出k个数表示连续的xi个数属于i集 ...