文章内容中嵌入的代码实现高亮着色显示方法教程

管理员 2020-11-13 17:33:19 1861 抢沙发

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


按照教程操作完以上工作就大功告成了,不信你去查看你网站上有插入代码的文章。

文章版权及转载声明

作者:管理员 ,本文地址:https://www.sojoson.com/rizhi/14.html发布于 2020-11-13 17:33:19
文章转载或复制请以超链接形式并注明出自SoJoson博客

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 1861人围观,暂无评论) 参与讨论

还没有评论,来说两句吧...