rename content/post to content/posts

content/posts/2021/2021-09-03-Twitter主题设置仿mac_UI_语法高亮代码方法/index.md

@@ -0,0 +1,96 @@
+---
+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
+