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

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