Highlighting Code Block 插件支持古登堡编辑器和传统编辑器，我们可以在对应的编辑器模块中看到有插入<HCB>的图标按钮，然后可以将需要的代码轻松的用高亮的效果显示。我们可以在插件设置区域，将找到显示语言名称、行号和复制按钮的选项。飞牛还是喜欢使用这个简单高效的插件
Highlighting Code Block有提供浅色和深色配色方案，将其应用于前端的内容和后端。但是浅色和深色方案并不会随着主题浅色和黑色自动改变，所以飞牛想了个办法，把配色方案的背景调成透明，这样子，代码框就会随着主题的颜色自动适配，过程中还对一些细节进行修改。
进入正题，全程只用修改hcb--light.css文件，在插件的build/css/文件夹内
一、在代码框添加带颜色的实线 border: solid 1px #7f5d321c;
.hcb_wrap.hcb_wrap{display:block;margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}.hcb_wrap.hcb_wrap{display:block;margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0;border: solid 1px #7f5d321c;}二、把整个代码框背景调成全透明，以适应不同的颜色主题。
--hcb-color--text-shadow:#fff;--hcb-color--bg:#f7f6f6;--hcb-color--text-shadow:#fff;--hcb-color--bg:#f7f6f600;三、解决在主题黑暗模式下发光导致的字体模糊，把下面这一段删掉。
text-shadow:0 1px var(--hcb-color--text-shadow,#fff);
还是那句话：大家要用就直接拿去用，要是转载在自己的网站还设置一堆的注册登录、回复隐藏可见，或者掐头去尾装原创，我是不能怎么样，不过你也就这样了。
评论 (0)