WordPress JustNews主题高亮代码美化教程

文章目录(展开/隐藏→)

展开
4.6
(5)

今天,逛别人网站时,突然发现justnews主题的默认代码高亮还挺好看的。所以,我就想以后不用插件来实现高亮代码了。此外,justnews主题的代码高亮可以在古腾堡编辑器(即WP默认编辑器)中很方便的插入。当然,我还是要对这个代码高亮加一些自己的CSS样式,使得代码高亮更加美化大气。

WordPress JustNews主题高亮代码美化教程

高亮代码使用

先说下WordPress JustNews主题高亮代码的使用方法:

  1. 新建一篇文章,新增区块
  2. 区块名称为代码高亮
  3. 代码高亮区块中就可以输入要高亮的代码了
  4. 右侧可以修改高亮代码的语言

详情如下图:

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文件中。

共计5人评分,平均4.6

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress-justnew-code-beautify.html

(1)
上一篇 2022年07月09日 16:14
下一篇 2022年08月22日 20:14

相关推荐

发表回复

登录后才能评论

评论列表(3条)

  • 剑心
    剑心 2022年08月21日 22:14

    其实当时justnews自带的的内联代码没有任何效果,是我反馈给官方得到改善的,后来我尝试让官方给代码高亮功能加数字行数显示,没成功~~ 他们觉得没必要

    • 古哥
      古哥 2022年08月21日 22:16

      @剑心我正在修改我200多篇文章,全换成主题自带的高亮代码,准备去掉插件了。笑哭
      好累啊,还在改

    • 剑心
      剑心 2022年08月21日 22:24

      @古哥嘿嘿,确实累大笑 细活

    本站APP