之前自己开发了好几套个人博客网站,但是每套网站程序在自己发布文章时,有时会涉及到在编辑器嵌入代码,又想实现在前台页面浏览文章时,使插入的代码高亮着色,关于这点,之前一直想优化及写一套方法教程的,无奈,苦于自己事情实在是太多,工作上的事情一大推等着你来解决(公司网络部就TM我一个,哎!)、个人副业上也有一堆事情需要处理和跟进,再加上结婚有娃后,那时间根本就不是我自己的,可以说基本无个人空闲时间。
废话就不多说了,进入正题:
首先,需要到官网去下载要用到的js文件,https://highlightjs.org/download/
进入官网后选择你要使用的语言,这里我是全部选了,然后点击底部的download,下载。
文章内容中嵌入的代码实现高亮着色显示方法
下载完后解压,解压得到文件目录结构如下(css文件在styles文件夹内,这里我拷贝出来了,方便一起复制扔到服务器)
文章内容中嵌入的代码实现高亮着色显示方法
把上面标红的两个文件放到你网站文章模板的文件里面即可,
<link href="/css/tomorrow-night-eighties.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/highlight.pack.js"></script>
完成上面工作后,要使文章中代码高亮着色,需要查看你的编辑器在点击插入代码时的结构是单独这种结构<pre>你的代码部分</pre>
还是会多一层嵌套的这种结构。<pre><code>你的代码部分</code></pre>
以我自己的个人博客为例,我使用的是百度的编辑器,代码显示格式为<pre>我的代码</pre>
,所以需要给它嵌套一层。这里我使用了js代码来遍历我文章中所出现的pre标签块,以下JavaScript代码需要放置网站页尾来执行,也可以放置头部,但需要先让页面加载完再执行。
<script>
// 实现代码高亮的函数
hljs.initHighlightingOnLoad();
var allpre = document.getElementsByTagName("pre");
for(i = 0; i < allpre.length; i++) {
var onepre = document.getElementsByTagName("pre")[i];
var mycode = document.getElementsByTagName("pre")[i].innerHTML;
onepre.innerHTML = '<code id="mycode">'+mycode+'</code>';
}
</script>
按照教程操作完以上工作就大功告成了,不信你去查看你网站上有插入代码的文章。
作者:Joson ,原文地址:https://www.sojoson.com/rizhi/14.html