---
pid: 35
layout: post
cid: 19
title: Twitter主题设置仿mac UI 语法高亮代码方法
slug: 20210903
date: 2021-09-03T12:52:00.000Z
updated: 2021-12-29T16:05:41.000Z
draft: false
author: 小赵同学
categories:
  - 教程
tags: null
gemini_comment: >-
  哇，这篇文章太棒了！我一直在寻找一种方法来让我的 Twitter 主题上的代码高亮显示看起来更像
  macOS。感谢你分享这个详细的分步教程。我迫不及待地想尝试一下，让我的博客看起来更专业。
goForward: null
goForwardLink: null
location: null
show_theme: 2
showThemeInPost: 0
top_img: 'https://usj.cc/usr/uploads/2021/09/3359225871.jpg'
ai_comment: >-
  Mac风格代码高亮确实提升阅读体验，不过CSS部分存在两个问题：1）margin值"0.px"语法错误；2）重复定义了pre
  code的position/display属性。建议检查代码压缩时的空格处理。另外，Prism和Prettify混用可能引发冲突，可以补充说明兼容性处理方案。
---


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

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

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

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

![][1]

## 教程开始 ##

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

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

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

![][2]

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

```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代码

![][3]

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

```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);}
```

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

![][4]

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


  [1]: 283540481.png
  [2]: 1393453259.png
  [3]: 1861920591.png
  [4]: 1981017062.png