highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。
常来我网站的小伙伴都知道，我的文章有一个栏目是“前端”，主要推荐一下实用的前端开源项目或者组件库，写技术类文章免不了要贴代码，我的网站基于 wordpress 搭建，此前我一直为找一款代码高亮插件烦恼，但大部分 wordpress 的代码高亮插件实在太臃肿，出来的样式又不美观。大多时候是截图 VsCode 的代码界面，甚至还用过 codepng 这个工具把代码变成图片贴在文章中，但这样做是美观了，但也存在2个问题：
最终还是找到了 highlight.js，完美解决了上面两个问题，而且配置简单，演示漂亮，定制化简单。不禁感叹：用纯前端的方式解决，才能精准控制，实现想要的效果。
下面以我的网站为例，展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装，我的网站基于 wordpress 开发，主题是自己写的，最简单的方式就是在文章详情页引入 highlight.js 和主题样式。
虽然 highlight.js 支持几百种开发语言，但为了将文件体积控制到最小，我们可以点击“get version”按钮进入下载页，通过勾选我们需要的开发语言，来构建最轻量的库。
下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件，主题样式都在 style 文件夹里，我选择了一个比较喜欢的 monokai-sublime 主题，只需要一个 css 文件，然后初始化：
就是这么简单，highlight.js 会自动将文章中的
点击查看本次分享的网址以及代码高亮效果
highlight.js - 让网页上的代码高亮美化的免费开源工具库 那些免费的砖
这个高亮，实质上是把12变成<span style="backgroud: yellow">12</span>。
那么只要做一个替换就可以了。但是需要考虑两点：
需要被替换的内容，必须是标签里的内容，不能是属性。比如，不能把<div width="100%" color="#12fe45">这里的100，12，45都不应该被替换。
需要被替换的内容，不能是<script>标签里的内容（理所当然的吧）。比如<script>var a=123xxx</script>这里的123不应该被替换。
所以，考虑到以上，最终的做法必须是遍历所有的标签，然后如果标签里没有标签的时候，才把标签里的文字作替换。
(function hilightNumber(jqObj) {// 不能替换script标签里的数字
var domObj = jqObj[0]
if (domObj.nodeName == "SCRIPT") {
return
}
// 如果标签里有标签，我们也不作替换，而是递归进去遍历内层的标签。
var children = jqObj.children()
if (children.length > 0) {
for(var i=0 i<children.length i++) {
hilightNumber($(children[i]))
}
} else {
// 标签里只有文字，没有内层标签的时候，才做替换，
// 把123替换成带颜色的标签内包含123，就实现了高亮。
var hilightedHtml = jqObj.html().replace(/([+\-]?[0-9]+(\.[0-9]+)?)/g, "<span style='background:yellow'>$1</span>")
jqObj.html(hilightedHtml)
}
})($("body"))
注意！这个不能解决全部的问题，但大部分情况应该可以用了。
不能解决的例子：
<p>我是诡异的段落2333，但是我里面竟然还有子标签！<b>这里是加黑的字666</b>。<span>这里是其它颜色12345的哈哈</span></p>如果是上面这样的HTML，2333可能不会被加亮。。。毕竟p里还有内层标签b和span。。。
<script type="text/javascript">/**
*由于你的代码很多，而我只更改了JavaScript部分，所以我只发JS部分了。
*
*另外，我改动的地方都做了注释，具体详见：
*/
var obj = document.getElementById("frameContent")//获取内容层
var pages = document.getElementById("pages")//获取翻页层
window.onload = function()//重写窗体加载的事件
{
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight))//获取页面数量
pages.innerHTML = "<b>共"+allpages+"页</b> "//输出页面数量
for (var i=1i<=allpagesi++){
//这里对初始分页做了判断，如果是第一次循环，则将第一页高亮，因为是JS分页程序也决定了网页开启后为第一页：
pages.innerHTML += "<a href=\"javascript:showPage('"+i+"')\" style=\"color:" + (i==1?"#F00":"#06C") + "\">第"+i+"页</a> "
//循环输出第几页
}
}
function showPage(pageINdex)
{
obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight)//根据高度，输出指定的页
//下面我做了点击事件的判断，点击了哪个，哪个高亮，其余的变回原色：
var as = pages.getElementsByTagName('a')
for(var i=0 i<as.length i++){
as[i].style.color = i+1 == pageINdex ? '#F00' : '#06C'
}
}
</script>
