zibll主题代码高亮功能详解-使用古腾堡块插入高亮代码教程

zibll主题代码高亮功能详解-使用古腾堡块插入高亮代码教程-火凤凰资源网
zibll主题代码高亮功能详解-使用古腾堡块插入高亮代码教程
此内容为付费阅读,请付费后查看
会员专属资源
您暂无购买权限,请先开通会员
开通会员
付费阅读

有很多技术类型的站长在使用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)添加代码高亮教程-高亮代码功能详解

注意:这里设置的是全局的默认参数,在文章中添加代码高亮时候,可以针对每一个块进行单独设置

使用古腾堡块在文章中插入

在文章中插入代码高亮的功能就是十分简单了,使用古腾堡块【zibll 高亮代码模块】
粘贴代码后可在右侧设置相关参数

图片[2]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解
图片[3]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解

在评论中使用高亮代码

主题默认开启评论中插入代码高亮功能,如需关闭或者重新开启,请在主题设置->用户&互动->评论设置:设置是否开启代码高亮

图片[4]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解

在私信中使用高亮代码

主题默认开启私信中插入代码高亮功能,如需关闭或者重新开启,请在主题设置->用户&互动->消息通知:设置是否开启私信代码高亮

图片[5]-WordPress主题zibll子比主题使用古腾堡(Gutenberg)添加代码高亮教程-高亮代码功能详解
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片