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;
}
//这是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>


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

选项设置

我们可以进入主题设置->全局&功能->常用功能:设置代码高亮的默认参数及功能:

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

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

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

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

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

在评论中使用高亮代码

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

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

在私信中使用高亮代码

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

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

© 版权声明
THE END
文章不错?点个赞呗
点赞57赞赏
分享
评论 共3条

请登录后发表评论

    没有评论内容