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

有很多技术类型的站长在使用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>


####创建段落
    这是一个段落
        这是另一个段落
                这又是另一个段落