在浏览别人的博客时，我看到别人的代码示例使用高亮语法，无论是java、js还是php，都会自动高亮关键词。

所以前几天自己写了一篇博客。遇到代码的时候，自然想到别人的网站有多美，巴拉巴拉。

开始正式工作。

在做这个把戏之前，我去了其他网站。在这里粘贴一本小书的效果：

关键字、方法名和字符串都有不同的颜色。虽然这段代码没有突出显示得很好，但是还可以。于是我看了看文档，发现是这样的：

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 '姓名、年龄、性别/span)/span { span class=' hljs-内置_in'console/span.log(姓名年龄性别)；}span class='hljs-comment'/如果我这样传下去，名字就变成了18，年龄就变成了第二个王者。/spangtepersonfo(span class=' hljs-string ' ' 18 '/span，span class=' hljs-string ' ' Wang Er '/span，span class=' hljs-string ' '雄'/span)；Span class='hljs-comment'/所以可以这样写/span class=' hljs-function ' span class=' hljs-keyword ' function/span class=' hljs-title ' getpersonfo/span(span class=' hljs-params ' args/span)/span { span class=' hljs-内置_ in ' console/span . log(args . name args . age args . sex)；} getpersonfo({ name : span class=' hljs-string ' ' Wang er '/span，agespan class=' hljs-string ' ' 18 '/span，sex:span class=' hljs-string ' '雄'/span })；/code/prehljs？这绝对是货。所以我们找到了主角：highlight.js

Highlight.js官网

使用外观highlightjs可以直接在官网使用。

这里主要写下我在使用过程中踩了哪些坑以及最终的解决方法。

1.不能急着吃热豆腐。这是一切开始时最困难的事情

根据官网的doc，只需要三行代码，非常方便。我写了一个小演示来测试它。非常有效。

link href=' http://cdn . bootscs.com/highlight . js/8.0/styles/mono kai _ sublime . min . CSS ' rel=' external no follow ' rel='样式表'脚本src=' http 3360http://cdn . bootscs.com/highlight . js/8.0/highlight . min . js '/脚本hljs . inithighlingnload()；/script这里，使用了bootstarp提供的cdn。您可以通过上述连接直接访问cdn，并选择所需的版本。就这么简单。

这个配色也不太好。想要好看，可以直接参考官网。https://highlightjs.org/static/demo/

2.易于使用，必须应用于实际开发

很简单，可以很愉快的应用，所以应用到项目中。

我最终遇到了大麻烦.

在项目中，用require.js加载js，整个应用使用了一个angular框架。

如果直接写显然不符合规范，代码会被修改，用require.js加载highlight.js

在require.config中添加高亮显示的路径配置

在require的回调函数中突出显示“:”http://cdn.bootcss.com/highlight.js/8.0/highlight.min',执行hljs . inithighlingnload()；

require(loadList，function ($，angular){ $(function(){ angular . bootstrap(document，[' BloGapp '])；});hljs . inithighlingnload()；});Css可以通过link或者@import的少来加载，因为项目用的少，所以我选择了@import

@ import '/lib/highlight/style/明日夜-八十年代. CSS '；然后在html页面上编写一个代码测试：

body div ng-include=' template/header . html ' '/div div pre code class=' lang-JavaScript ' function init(){ $ scope . req . getarticle()；$(“预编码”)。每个(函数(I，block){ hljs . highlight block(block)；});}/code/pre/div class=' content ' ui-view/div footer cloud blog[email protected]/footer/body然后打开浏览器看一看：

灰色总是完美的。

但是当ng-bind-html用于显示从后台返回的文档时：

代码完全变暗。仔细想想，

hljs . inithighlingnload()；onload时不执行渲染，也就是说，之后更改文档不会被执行。所以很明显，这并没有突出显示从接口检索到的文档代码。

谷歌曾经，有个东西叫angular-highlightjs，我试过用，但是总是报错，官网也没有解释文档

幸运的是，代码托管在github上，所以我看了一下，发现使用说明和官网一样简短。没有人问这个问题，所以我问了一会儿，希望有人能回答：问题的地址

我觉得highlight.js必须提供一个对应的方法，加载后可以执行一次，但是api文档是英文的，所以很难读懂，所以我决定另辟蹊径。

问题的最终解决方案是界面返回用highlight.js编译的html，因为后端使用node，所以我搜索了cnode论坛，发现marked已经解决了这个问题。

只需将突出显示的项目添加到标记的配置中(首次npm安装highlight.js):

var marked=require(' marked ')；var highlight=require(' highlight . js ')；marked . SetOptions({ render : new marked。Renderer()，gfm: true，tables: true，breaks: false，迂腐： false，pedantic: false，smartLists: true，smartypants: false，highlight : function(code){ return highlight . highlight auto(code)。价值；}});相应的类已添加到返回的文档中。

precode class=' lang-js ' span class=' hljs-key ' var/span math=(span class=' hljs-string ' ' math '/span)；Span class=' hljs-关键字' export/Span . increment=Span class=' hljs-function ' Span class=' hljs-关键字' function/Span(Span class=' hljs-params ' val/Span)/Span { Span class=' hljs-关键字' return/span math。add (val，span class=' hljs-number ' 1/span)}/code/pre以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。