97 lines
2.4 KiB
Markdown
97 lines
2.4 KiB
Markdown
---
|
||
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
|
||
|