以前使用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