前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Twitter主题设置仿mac UI 语法高亮代码方法

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

作者头像
imzql
发布2021-12-28 08:57:13
5420
发布2021-12-28 08:57:13
举报
文章被收录于专栏:用户8297521的专栏

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

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

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

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

教程开始

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

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

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

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

代码语言:javascript
复制
#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代码

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

代码语言:javascript
复制
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);}

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 教程开始
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档