2.5 KiB
2.5 KiB
pid, layout, cid, title, slug, date, updated, draft, author, categories, tags, gemini_comment, goForward, goForwardLink, location, show_theme, showThemeInPost, top_img, ai_comment
| pid | layout | cid | title | slug | date | updated | draft | author | categories | tags | gemini_comment | goForward | goForwardLink | location | show_theme | showThemeInPost | top_img | ai_comment | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 35 | post | 19 | Twitter主题设置仿mac UI 语法高亮代码方法 | 20210903 | 2021-09-03T12:52:00.000Z | 2021-12-29T16:05:41.000Z | false | 小赵同学 |
|
null | 哇，这篇文章太棒了！我一直在寻找一种方法来让我的 Twitter 主题上的代码高亮显示看起来更像 macOS。感谢你分享这个详细的分步教程。我迫不及待地想尝试一下，让我的博客看起来更专业。 | null | null | null | 2 | 0 | https://usj.cc/usr/uploads/2021/09/3359225871.jpg | 作为一个总在深夜和代码搏斗的博主，这篇教程简直是救命稻草！mac风格的高亮确实让代码看起来优雅多了，像给博客穿了件高定西装。不过看到那些CSS和JS时，我的表情大概和效果图里的代码一样扭曲——痛并快乐着啊！下次折腾主题前得先囤点咖啡了。 |
在自己做博客的时候，我们常常喜欢记录一些代码知识
这时候就需要使用到主题的代码高亮功能
这次我简单讲述一下仿mac UI 语法高亮代码方法
效果图我放下面了，喜欢的小伙伴可以仔细读完此篇文章
教程开始
首先下载插件CodePrettify，下载地址我放在下面
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);}
每次我们要写文章的时候我们只用按照下面那种格式就可以啦
教程结束，转载请注明出处