之前自己开发了好几套个人博客网站,但是每套网站程序在自己发布文章时,有时会涉及到在编辑器嵌入代码,又想实现在前台页面浏览文章时,使插入的代码高亮着色,关于这点,之前一直想优化及写一套方法教程的,无奈,苦于自己事情实在是太多,工作上的事情一大推等着你来解决(公司网络部就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>
按照教程操作完以上工作就大功告成了,不信你去查看你网站上有插入代码的文章。
还没有评论,来说两句吧...