有很多技术类型的站长在使用WordPress建站的时候,代码高亮的功能是必不可少的了。zibll子比主题自带了了强大的代码高亮功能,支持多种代码语言,同时深度适配主题的日间、夜间显示模式,让整体代码高亮效果更加的美观、已读
特色简介
- 多种代码语言,几乎包含全部常用语言
- 自动识别代码语言,或者手动设置
- 多种显示主题,支持日间、夜间模式单独设置高亮主题
- 支持复制代码、新窗口打开等扩展功能
- 支持显示行号、单独高亮行号功能
- 文章中使用古腾堡模块化插入,使用简单、配置丰富
- 评论、私信均支持代码高亮显示
效果预览
我们简单的预览以下部分代码高亮效果
/*——这是一段css代码示例——-*/
/*——使用自动主题,显示主题会跟随日间、夜间模式自动切换——-*/
.pay-switch .but {
margin: 5px 0;
}
.pay-payment.alipay .t-alipay {
display: none;
}
.pay-payment.wechat .t-wechat {
display: none;
}
.pay-qrcon .pay-logo {
height: 35px;
width: 35px;
display: inline-block;
max-width: 100%;
background-repeat: no-repeat;
vertical-align: middle;
background-size: contain;
background-position: center;
}
/*——这是一段css代码示例——-*/
/*——选择开启行号,设置自定义主题——-*/
.pay-switch .but {
margin: 5px 0;
}
.pay-payment.alipay .t-alipay {
display: none;
}
.pay-payment.wechat .t-wechat {
display: none;
}
.pay-qrcon .pay-logo {
height: 35px;
width: 35px;
display: inline-block;
max-width: 100%;
background-repeat: no-repeat;
vertical-align: middle;
background-size: contain;
background-position: center;
}
选项设置
我们可以进入主题设置->全局&功能->常用功能:设置代码高亮的默认参数及功能:
![图片[1]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解](https://oss.zibll.com/zibll.com/2021/07/%E5%9B%BE%E7%89%87.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_451)
注意:这里设置的是全局的默认参数,在文章中添加代码高亮时候,可以针对每一个块进行单独设置
使用古腾堡块在文章中插入
在文章中插入代码高亮的功能就是十分简单了,使用古腾堡块【zibll 高亮代码模块】
粘贴代码后可在右侧设置相关参数
![图片[2]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解](https://oss.zibll.com/zibll.com/2021/07/%E5%9B%BE%E7%89%87-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_924)
![图片[3]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解](https://oss.zibll.com/zibll.com/2021/07/%E5%9B%BE%E7%89%87-2.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_612)
在评论中使用高亮代码
主题默认开启评论中插入代码高亮功能,如需关闭或者重新开启,请在主题设置->用户&互动->评论设置:设置是否开启代码高亮
![图片[4]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解](https://oss.zibll.com/zibll.com/2021/07/%E5%9B%BE%E7%89%87-3.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_446)
在私信中使用高亮代码
主题默认开启私信中插入代码高亮功能,如需关闭或者重新开启,请在主题设置->用户&互动->消息通知:设置是否开启私信代码高亮
![图片[5]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解](https://oss.zibll.com/zibll.com/2021/07/%E5%9B%BE%E7%89%87-4.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_567)
感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END