Twitter主题设置仿mac UI 语法高亮代码方法

优世界

OpenWrt 路由器改纯 AP 模式记录（Cudy TR3000 + 中兴 F50） Ubuntu 24.04 安装 Zabbix 8.0 全记录我的静态博客动态化方案 Claude Code 启动脚本我的5G路由器方案：中兴F50+cudy tr3000 256MB 还是弃用了使用多年的全拼输入法临走前一份襄阳牛肉面 EdgeOne Pages 部署 Twikoo 评论一个朋友圈风格 Hugo 主题搓了一个仿朋友圈的Hugo主题一个人烧烤被拒单了周末闲暇时间翻修了一下博客我把Vercel换成了EdgeOne Pages 博客友链实时健康监测方案 Artalk评论区接入AI摘要的尝试给Hugo博客添加瀑布流相册功能 Hugo静态博客如何实现搜索功能 Artalk评论系统实现段落评论功能为什么我觉得网页昼夜切换那么重要博客六周年：从折腾到回归平淡如何hugo静态实现友联朋友圈功能脂溢性皮炎的烦恼还是放弃了iPhone16e 米环勿扰同步问题除草日记 Hugo使用GitHub Action自动刷新多吉云CDN缓存迁移博客至hugo 添加ikun摆件 parsec远程软件报6023错误 win11右键菜单改回win10方法

2021-09-03 · via 优世界

在自己做博客的时候，我们常常喜欢记录一些代码知识

这时候就需要使用到主题的代码高亮功能

这次我简单讲述一下仿mac UI 语法高亮代码方法

效果图我放下面了，喜欢的小伙伴可以仔细读完此篇文章

教程开始

首先下载插件CodePrettify，下载地址我放在下面

github.com https://github.com/Xcnte/Code-Prettify-for-typecho ↗

在后台启用插件，并且按照下图设置

在主题的自定义css下面加入以下代码

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

在Twitter主题找到pjax开始执行的js代码

在主题的这个地方加入下面的代码在主题的相应位置

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

每次我们要写文章的时候我们只用按照下面那种格式就可以啦

教程结束，转载请注明出处

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

优世界

教程开始