有很多技术类型的站长在使用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;
}
//这是JS代码示例,使用自动主题
function selectText() {
var range,
selection;
if (isOS()) {
range = document.createRange();
range.selectNodeContents(textArea);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, 999999);
} else {
textArea.select();
}
}
//这是JS代码示例,使用自定义主题
function selectText() {
var range,
selection;
if (isOS()) {
range = document.createRange();
range.selectNodeContents(textArea);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, 999999);
} else {
textArea.select();
}
}
//这是PHP代码示例,使用自动主题
function zib_posts_multi_thumbnail($size = '', $class = 'fit-cover')
{
if (!$size) {
$size = _pz('thumb_postfirstimg_size');
}
global $post;
$cache_html = wp_cache_get($post->ID, 'post_multi_thumbnail', true);
if (!$cache_html) {
$html = zib_get_post_img($size, $class, 4);
if (_pz('lazy_posts_thumb')) {
$html = str_replace(' src=', ' src="' . zib_get_lazy_thumb() . '" data-src=', $html);
$html = str_replace(' class="', ' class="lazyload ', $html);
}
wp_cache_set($post->ID, $html, 'post_multi_thumbnail');
} else {
$html = $cache_html;
}
return $html;
}
//这是PHP代码示例,使用自定义主题
function zib_posts_multi_thumbnail($size = '', $class = 'fit-cover')
{
if (!$size) {
$size = _pz('thumb_postfirstimg_size');
}
global $post;
$cache_html = wp_cache_get($post->ID, 'post_multi_thumbnail', true);
if (!$cache_html) {
$html = zib_get_post_img($size, $class, 4);
if (_pz('lazy_posts_thumb')) {
$html = str_replace(' src=', ' src="' . zib_get_lazy_thumb() . '" data-src=', $html);
$html = str_replace(' class="', ' class="lazyload ', $html);
}
wp_cache_set($post->ID, $html, 'post_multi_thumbnail');
} else {
$html = $cache_html;
}
return $html;
}
支持的代码类型很多,就算是未支持的类型,也可以使用通用代码高亮模式,显示效果依然很好,这里就随机的再示例一些其它的代码高亮,主题我也随机设置一下
<div>
<p><strong>新功能</strong></p>
<ul>
<li>新增古腾堡模块:视频剧集模块<a href="https://www.zibll.com/2223.html">【查看教程】</a></li>
<li>新增古腾堡模块:多栏目模块<a href="https://www.zibll.com/2195.html">【查看教程】</a></li>
<li>新增付费视频:添加付费剧集的功能</li>
<li>新增社交登录:微信公众号登录、绑定功能<a href="https://www.zibll.com/2206.html">【查看教程】</a></li>
<li>新增是否在文章列表显示付费、分类、标签信息的选项设置(主题设置-文章列表-列表标签)</li>
<li>新增文章图片自动添加 Alt 标签功能,提高 SEO 优化</li>
<li>新增主题 SEO 功能开关,方便无需主题做 SEO 优化时候关闭主题的 SEO 功能</li>
<li>新增页面模板:zibll文档导航</li>
<li>新增用户收到私信后给用户发送邮件通知的功能</li>
<li>新增V免签支付接口(免费开源支付接口)<a rel="noreferrer noopener" aria-label="【项目地址】(在新窗口打开)"
href="https://www.zibll.com/?golink=aHR0cHM6Ly9naXRodWIuY29tL3N6dm9uZS92bXFwaHA="
target="_blank">【项目地址】</a></li>
<li>新增码支付自定义支付接口地址的功能</li>
<li>新增微信官方接口JSAPI支付功能(微信APP内直接发起支付)</li>
</ul>
<p><strong>优化内容</strong></p>
<ul>
<li>进一步优化 SEO 自动获取内容的逻辑,补全部分缺失的SEO内容,确保google seo评分100</li>
<li>优化:用户名不允许为纯数字或邮箱,避免某些小概率逻辑错误</li>
<li>优化:在支付宝APP内支持支付宝登录</li>
<li>优化:社交登录同步检查用户名是否合法,不合法则自动创建用户名</li>
<li>优化:会员专属资源在文章列表的显示效果</li>
<li>优化:部分不支持高斯模糊的浏览器的显示效果</li>
<li>优化:图片灯箱在IOS系统中放大后的清晰度</li>
<li>修复:移动端列表无图模式、多图模式不生效的 bug</li>
<li>修复:未登录查看其它作者文章可能会会显示未发布的文章的 bug</li>
<li>修复:付费模块标题可能会被遮挡的 bug</li>
<li>修复:分类页面添加模块可能会重复显示的bug</li>
<li>修复:评论回复邮件昵称显示错误的bug</li>
</ul>
</div>
CREATE TABLE ENROLLS
(SNO NUMERIC(6,0) NOT NULL
CNO CHAR(4) NOT NULL
GRADE INT
PRIMARY KEY(SNO,CNO)
FOREIGN KEY(SNO) REFERENCES STUDENTS(SNO)
FOREIGN KEY(CNO) REFERENCES COURSES(CNO)
CHECK ((GRADE IS NULL) OR (GRADE BETWEEN 0 AND 100)))
#!/bin/bash
COUNT=1
SUM=0
MIN=0
MAX=100
while [ $COUNT -le 5 ]; do
read -p "请输入1-10个整数:" INT
if [[ ! $INT =~ ^[0-9]+$ ]]; then
echo "输入必须是整数!"
exit 1
elif [[ $INT -gt 100 ]]; then
echo "输入必须是100以内!"
exit 1
fi
SUM=$(($SUM+$INT))
[ $MIN -lt $INT ] && MIN=$INT
[ $MAX -gt $INT ] && MAX=$INT
let COUNT++
done
echo "SUM: $SUM"
echo "MIN: $MIN"
echo "MAX: $MAX"
MarkDown规则
#一级标题
##二级标题
###三级标题
####四级标题
#####五级标题
######六级标题
####无序列表(MarkDown2换行需要使用两个空格,序列实现效果也是需要空两个空格)
* 1
* 2
* 3
####有序列表
1. 1
2. 2
3. 3
>添加引用
####插入连接(插入连接与插入图片的区别在于是否存在!(感叹号))
[Baidu](http://www.baidu.com)
####插入图片
![Mou icon](http://www.yanyulin.info/pics/1593358327250.png)
####斜体(将需要设置为斜体的文字两端使用1个“*”或者“_”夹起来)
*这里是使用了斜体*
####粗体(将需要设置为斜体的文字两端使用2个“*”或者“_”夹起来)
**这里是使用了粗体**
####分割线
***
####代码框
`public void main(String[] args)`
####创建连接
<test@163.com>
####创建段落
这是一个段落
这是另一个段落
这又是另一个段落
选项设置
我们可以进入
注意:这里设置的是全局的默认参数,在文章中添加代码高亮时候,可以针对每一个块进行单独设置
使用古腾堡块在文章中插入
在文章中插入代码高亮的功能就是十分简单了,使用古腾堡块【zibll 高亮代码模块】
粘贴代码后可在右侧设置相关参数
在评论中使用高亮代码
主题默认开启评论中插入代码高亮功能,如需关闭或者重新开启,请在主题设置->用户&互动->评论设置:设置是否开启代码高亮
在私信中使用高亮代码
主题默认开启私信中插入代码高亮功能,如需关闭或者重新开启,请在主题设置->用户&互动->消息通知:设置是否开启私信代码高亮
© 版权声明
分享是一种美德,转载请保留原链接
THE END
- 最新
- 最热
只看作者