今天，逛别人网站时，突然发现justnews主题的默认代码高亮还挺好看的。所以，我就想以后不用插件来实现高亮代码了。此外，justnews主题的代码高亮可以在古腾堡编辑器（即WP默认编辑器）中很方便的插入。当然，我还是要对这个代码高亮加一些自己的CSS样式，使得代码高亮更加美化大气。
高亮代码使用
先说下WordPress JustNews主题高亮代码的使用方法：
- 新建一篇文章，新增区块
- 区块名称为代码高亮
- 代码高亮区块中就可以输入要高亮的代码了
- 右侧可以修改高亮代码的语言
详情如下图：
代码高亮美化
WordPress后台，主题设置，插入代码，自定义CSS中输入如下代码即可：
.wp-block-wpcom-hljs:after {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fff;
width: 12px;
height: 12px;
top: 0;
left: 15px;
margin-top: 11px;
-webkit-box-shadow: 20px 0 #fff, 40px 0 #fff;
box-shadow: 20px 0 #fff, 40px 0 #fff;
transition-duration: .3s;
}
.wp-block-wpcom-hljs:hover:after {
background: #f92900;
-webkit-box-shadow: 20px 0 #fbc606, 40px 0 #448ef6;
box-shadow: 20px 0 #fbc606, 40px 0 #448ef6;
}
.wp-block-wpcom-hljs pre.hljs {
padding-top: 40px;
}本来还想着加个行号，但看高亮代码实现的过程中，没用到<li>标签，所以只能放弃显示行号了。
内联代码美化
顺便再给各位个内联代码的样式，这里同样放到WordPress后台，主题设置，插入代码，自定义CSS中。内联代码的样式，可以参考本文中所有的英文字母样式。
code {
background: var(--theme-color)!important;
color: #fff;
}
code a {
color: #ffa;
}
code a:hover {
color: #ff0;
}上述代码中的var(--theme-color)指的是justnews主题的主题主色调，想其他颜色可以自行查找。需要注意的是：
background指的是内联代码背景颜色color指的是文字的颜色a标签是为了防止标签自动内联导致链接变成内联代码时，文字看不清而设置的。- 如果
background是深色，那color就必须设置为浅色，不然就看不清了
子主题食用方法
想来都知道justnews支持子主题设置，不懂的可以参考文章：《WordPress JustNews子主题创建教程》
同样的，可以把以上提到的CSS代码放到子主题中的style.css文件中。
原创文章，作者：古哥，转载需经过作者授权同意，并附上原文链接：https://iymark.com/articles/2609.html
微信扫一扫 
支付宝扫一扫 
评论列表（3条）
其实当时justnews自带的的内联代码没有任何效果，是我反馈给官方得到改善的，后来我尝试让官方给代码高亮功能加数字行数显示，没成功~~ 他们觉得没必要
@剑心：我正在修改我200多篇文章，全换成主题自带的高亮代码，准备去掉插件了。
好累啊，还在改
@古哥：嘿嘿，确实累
细活