我这个博客上基本都是收集的一些教程，或者说写的一些无聊的日记，虽然有时也会贴一小段代码，但几乎很少有涉及到大段代码的内容，所以我从来没有考虑过使用代码高亮插件。

不过我最近实在是忍受不了这个主题设置的代码格式，太难看了。好在网上有使用coderender来实现代码高亮的教程。

教程基本步骤有3步：

1 引入css

你可以直接引用本站的css，也可以下载到自己的服务器上

地址：https://static.imtrq.com/highlight.css

直接引用：

  1. <link rel="stylesheet" href="https://static.imtrq.com/highlight.css" />  

我并不想在所有的页面都引入这个css，所以我只在需要贴代码的文章里面新建一个“自定义HTML”，然后把上面的代码贴到里面，效果是一样的。

2 将代码高亮转化为HTML

你可以使用本站备份的CodeRender，也可以自行搜索别的网站备份的资源。

具体的使用方法如下。

2.1 复制你要高亮的代码，比如我这一段：

<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/fetch.min.js"></script>  
  
<script>  
  fetch('https://v1.hitokoto.cn')  
    .then(function (res){  
      return res.json();  
    })  
    .then(function (data) {  
      var hitokoto = document.getElementById('hitokoto');  
      hitokoto.innerText = data.hitokoto;   
    })  
    .catch(function (err) {  
      console.error(err);  
    })  
</script>

2.2 粘贴到CodeRender中：

3 将html粘贴到文章中

在文章中添加自定义HTML，把上图中第4步复制下来的HTML代码粘贴进去即可。最终效果如下：

  1. <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>    
  2. <script src="https://cdn.jsdelivr.net/npm/[email protected]/fetch.min.js"></script>    
  3.     
  4. <script>    
  5.   fetch('https://v1.hitokoto.cn')    
  6.     .then(function (res){    
  7.       return res.json();    
  8.     })    
  9.     .then(function (data) {    
  10.       var hitokoto = document.getElementById('hitokoto');    
  11.       hitokoto.innerText = data.hitokoto;     
  12.     })    
  13.     .catch(function (err) {    
  14.       console.error(err);    
  15.     })    
  16. </script>    

原贴地址：WordPress无插件实现代码高亮方法 一条CSS样式解决问题