本站设计-代码高亮功能详解-使用古腾堡块插入高亮代码教程

有很多技术类型的站长在使用WordPress建站的时候,代码高亮的功能是必不可少的了。zibll子比主题自带了了强大的代码高亮功能,支持多种代码语言,同时深度适配主题的日间、夜间显示模式,让整体代码高亮效果更加的美观、已读

特色简介

  • 多种代码语言,几乎包含全部常用语言
  • 自动识别代码语言,或者手动设置
  • 多种显示主题,支持日间、夜间模式单独设置高亮主题
  • 支持复制代码、新窗口打开等扩展功能
  • 支持显示行号、单独高亮行号功能
  • 文章中使用古腾堡模块化插入,使用简单、配置丰富
  • 评论、私信均支持代码高亮显示

效果预览

我们简单的预览以下部分代码高亮效果CSSJSPHP其它代码

支持的代码类型很多,就算是未支持的类型,也可以使用通用代码高亮模式,显示效果依然很好,这里就随机的再示例一些其它的代码高亮,主题我也随机设置一下

/*------这是一段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"

选项设置

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

本站设计-代码高亮功能详解-使用古腾堡块插入高亮代码教程 插图1

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

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

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

本站设计-代码高亮功能详解-使用古腾堡块插入高亮代码教程 插图2

在评论中使用高亮代码

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

本站设计-代码高亮功能详解-使用古腾堡块插入高亮代码教程 插图3

在私信中使用高亮代码

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

本站设计-代码高亮功能详解-使用古腾堡块插入高亮代码教程 插图4
温馨提示:本文最后更新于2022-12-15 18:24:29,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

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

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容