解决wordpress插件Crayon Syntax Highlighter语法高亮插件多余空行的问题

以前使用WordPress做博客,安装了 Crayon Syntax Highlighter 语法高亮插件,但是发现每一个代码块最后一行都有一个空行,看起来很不协调,看着心里难受,于是去百度了解决方案,发现一哥们的方法可行。 这个方法是在主题文件中插入一段js,利用js去除多余的空行。我把js写在了文章页面single.php中,解决了多余空行的问题。

分享这段代码:

<script>
 /*
  * 由于Crayon Syntax Highlighter组件会在展示代码时在末尾多出一个空行,
  * 因此增加一个脚本,用来去掉这个多余的空行
  */
//遍历每个crayon的代码表格dom元素
var codes = document.querySelectorAll('.crayon-main');
for (var i = codes.length - 1; i >= 0; i--) {
      //刪除最后的行号(左侧)
      var nums_content = codes[i].querySelectorAll('.crayon-num')
      var num_node_count = nums_content.length;
      if(num_node_count>1){
        var last_num_node = nums_content[num_node_count-1]; 
        last_num_node.parentNode.removeChild(last_num_node); 
      }
      //删除最后的代码行(右侧)
      var codes_content = codes[i].querySelectorAll('.crayon-line')
      var code_node_count = codes_content.length;
      if(code_node_count>1){
        var last_code_node = codes_content[code_node_count-1]; 
        last_code_node.parentNode.removeChild(last_code_node); 
      }
};
</script>

参考文档:GoldSudo

最近更新

猜你喜欢

最近的文章

(转)AI+C4D教程!教你绘制2.5D风格插画

本次主要内容是2.5D风格制作,本来一年前就该出来的,但诸事繁忙,拖到现在才发出来。也幸亏写得晚,如今对2.5D的理解比一年前更深入了,就作为一个专题教程...…

ai c4d 伪3D继续阅读
更早的文章

自制docker镜像实现goaccess网站日志实时分析

自从入坑docker以后,不管做什么都第一时间想着能不能用docker容器的方式实现,为什么喜欢docker,还是那个观念:方便,而且什么都跑在容器里面,...…

docker goaccess继续阅读