Typora的Github主題美化

[!note]

Typora的Github主題進行一些自己喜歡的修改，主要包括：字體、代碼塊、表格樣式

美化前：

美化前

美化后：
在這里插入圖片描述

一、字體更換

之前便看上了「中文網字計劃」的「朱雀仿宋」字體，于是一直想更換字體，奈何自己拖延癥作祟，直到今天才開始行動。

關于「中文網字計劃」

「中文網字計劃」是一個致力于優化中文字體在互聯網中應用的開源項目，通過Web Font技術為開發者提供便捷、免費的中文字體解決方案。其核心特點包括：

字體分包技術：將龐大的字體文件切割為小型靜態分包，利用全球CDN加速加載，解決中文字體文件體積大、加載慢的問題；
豐富字體庫：收錄了霞鹛文楷、京華老宋體等眾多字體，支持在線預覽和按需調用；
開源工具鏈：提供字體分析工具（如font-analyze）、在線分包工具（在線切割）及NPM包（@konghayao/cn-font-split），方便開發者自定義字體優化；
全字符集渲染：支持OpenType特性，可自動按頁面內容加載所需字符區間，兼顧渲染速度與完整性。

項目官網為https://chinese-font.netlify.app/，GitHub倉庫見chinese-free-web-font-storage。

需注意部分字體授權信息需自行確認，建議優先選用明確開源授權的字體（如霞鹛文楷）。

中文網字計劃是支持直接使用它提供的CDN的，但是由于不知道怎么在主題的CSS中使用，于是選擇使用更為直接的方法：從中文網字計劃的Github倉庫中下載下來這個字體的.ttf文件，然后在CSS中使用該字體。

具體實現步驟

下載字體文件

下載自己想要的字體文件，例如朱雀仿宋；
并將字體文件放到合適的目錄位置，這個文件路徑之后要用得到，例如我就是直接放到主題css文件的同一目錄下，故引用的時候就直接使用相對路徑./字體文件名。

修改主題的css文件

引入本地字體

/* 添加以下代碼，引入本地字體 */
@font-face {/* 自定義字體名稱 */font-family: "自定義字體";/* 字體文件路徑 */src: url('./ZhuqueFangsong-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;
}

將需要的內容設置成自定義字體

/* 將 body 設置為自定義字體 */
body {font-family: "自定義字體", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;color: rgb(51, 51, 51);line-height: 1.6;
}/* 將標題設置為自定義字體 */
h1,
h2,
h3,
h4,
h5,
h6 {position: relative;margin-top: 1rem;margin-bottom: 1rem;font-weight: bold;line-height: 1.4;cursor: text;font-family: "自定義字體", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
}/* 將段落、表格文字設置成自定義字體 */
p,
blockquote,
ul,
ol,
dl,
table {margin: 0.8em 0;font-family: "自定義字體", "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
}

可以根據自己的需要自行設置

重啟Typora

不出意外的話，重啟便能看到更換好字體之后的效果了

二、代碼塊裝飾

希望能添加仿mac窗口風格的代碼塊上檐，覺得很好看。

類似下圖：

仿mac窗口風格的代碼塊上檐

已備條件

先前在美化Hexo博客站的時候子在網上找到了大佬在Hexo的Fluid主題中實現仿mac窗口風格的方法，即通過``自定義CSS，并提供了stylus代碼`：

.highlightbackground: #21252bborder-radius: 5pxbox-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)padding-top: 30px&::beforebackground: #fc625dborder-radius: 50%box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4bcontent: ' 'height: 12pxleft: 12pxmargin-top: -20pxposition: absolutewidth: 12px

有了stylus代碼，直接讓 AI 幫忙改一下就可以用在這里了

利用條件

我們需要將這段 Stylus 代碼適配到 Typora 的 GitHub 主題中，以下是修改后的 CSS 實現和詳細說明：

/* 在原有 .md-fences 樣式基礎上修改 */
.md-fences {background: #21252b;border-radius: 5px !important;box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4) !important;padding-top: 30px !important;position: relative; /* 新增定位上下文 */margin: 15px 0;    /* 保持原有外邊距 */
}/* 添加 Mac 風格窗口按鈕 */
.md-fences::before {content: ' ';position: absolute;top: 15px;         /* 調整垂直位置 */left: 15px;        /* 調整水平位置 */width: 12px;height: 12px;border-radius: 50%;background: #fc625d;box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;z-index: 1;        /* 確保按鈕顯示在代碼上方 */
}/* 調整代碼內容位置 */
.md-fences .code-tooltip {margin-top: -20px; /* 補償頂部 padding */
}/* 保持代碼區域高度 */
.md-fences pre {padding-top: 10px; /* 調整代碼與按鈕的間距 */
}

需要在你原來的主題 CSS 中找到 .md-fences 相關樣式，替換或修改為上述代碼。以下是主要修改點說明：

定位上下文：
添加 position: relative 為偽元素定位提供基準
窗口按鈕實現：
使用 ::before 偽元素創建三個圓形按鈕，通過：
- box-shadow 創建多個按鈕
- 精確的定位調整按鈕位置
- z-index 確保按鈕可見

樣式覆蓋：
使用 !important 覆蓋 Typora 默認樣式：

border-radius: 5px !important;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4) !important;

布局調整：
- 增加 padding-top 為按鈕預留空間
- 通過負 margin 保持代碼區域位置
- 調整代碼內容的 padding

最終效果：

代碼塊頂部會有 macOS 風格的紅黃綠按鈕
代碼塊帶有陰影和圓角
按鈕位置適配代碼塊布局
保持原有代碼高亮樣式

如果需要調整按鈕位置或顏色，可以修改以下參數：

top/left 值：控制按鈕位置
background 值：紅色按鈕顏色
box-shadow 值：黃色和綠色按鈕顏色及位置
width/height：按鈕大小
border-radius：按鈕圓角程度

建議在修改后通過實際預覽微調具體數值，不同主題可能需要不同的位置補償值。

對box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4) !important; 的解釋：

給元素添加一個向下偏移的半透明模糊陰影，具體參數解析如下：

0：水平偏移量（h-shadow）
表示陰影在水平方向不偏移

10px：垂直偏移量（v-shadow）
表示陰影向下偏移10像素（負值會向上偏移）

30px：模糊半徑（blur）
陰影邊緣會產生30像素的模糊漸變效果，數值越大越模糊

0：擴散半徑（spread）
陰影大小與元素原始尺寸一致（正值擴大陰影，負值收縮）

rgba(0, 0, 0, .4)：陰影顏色
使用黑色（#000）且透明度為40%（0.4），通過透明度實現陰影深淺控制

!important：優先級標記
強制覆蓋其他可能存在的陰影樣式規則

最終效果表現為：元素下方會呈現一個向下延伸10px、模糊范圍30px、半透明黑色（類似霧狀）的陰影層，常用于創建卡片浮起效果或增強界面層次感。

[!note]

2025.2.22更新

主要修改：

頂部仿mac的背景顏色變為深色，下方的代碼部分背景顏色不變
上次改動使得代碼塊的行高發生變化，過于高了，現將行高改的合適一些

要實現 頂部仿 Mac 按鈕區域為深色背景，而下方代碼區域保持淺色，需要通過 分層背景控制 和 偽元素定位 來實現。以下是具體修改方案：

修改后的完整 CSS 代碼

/* 核心修改部分 */
.md-fences {/* 移除整體深色背景 */background: transparent !important;/* 保持原有容器樣式 */border-radius: 5px !important;box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1) !important;padding-top: 25px !important;padding-bottom: 2px !important;position: relative;margin: 15px 0;/* 添加淺色邊框分隔 */border: 3px solid #e7eaed;
}/* 新增：頂部深色背景條 */
.md-fences::after {content: '';position: absolute;top: 0;left: 0;right: 0;/* 與 padding-top 一致 */height: 25px;/* 原深色背景 */background: #21252b;/* 僅頂部圓角 */border-radius: 5px 5px 0 0;/* 確保在按鈕下方 */z-index: 0;
}/* 調整 Mac 按鈕層級 */
.md-fences::before {/* 原有按鈕樣式不變 */content: ' ';position: absolute;top: 10px;left: 10px;width: 10px;height: 10px;border-radius: 50%;background: #fc625d;box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;margin-top: 0px;/* 提升到頂部背景條之上 */z-index: 2;
}/* 恢復代碼區域背景色 */
.md-fences pre {/* 原淺色背景 */background: #f8f8f8 !important;margin: 0;padding: 10px 15px !important; /* 需刪去 *//* 底部圓角 */border-radius: 0 0 5px 5px;position: relative;/* 確保在頂部背景條之上 */z-index: 1;
}

關鍵修改說明

通過 三層結構 實現分層控制：

頂部深色背景條 (::after 偽元素)
- 高度與容器的 padding-top 一致（30px）
- 僅設置頂部圓角，與容器圓角匹配
- 使用 z-index: 0 作為底層
Mac 風格按鈕 (::before 偽元素)
- 提升 z-index: 2 確保按鈕顯示在頂部背景條之上
- 保持原有定位和樣式
代碼內容區域 (pre 標簽)
- 顯式設置淺色背景 #f8f8f8
- 添加 z-index: 1 覆蓋頂部背景條
- 底部圓角避免背景色溢出

按照上面修改好之后，發現代碼塊的行高高的離譜，原本以為是行高太大的問題，于是就直接加了一行行高控制（如下所示）：

/* 新增行高控制 */
line-height: 1.5 !important; /* 合適的范圍：1.4-1.6*/

發現沒有效果，進而才想到了可能是padding的問題，于是便嘗試將代碼塊的padding控制元素給注釋掉，發現行高恢復正常了，問題找到，只要刪去padding即可。

上面的代碼是先直接讓deepseek幫忙寫的，事實證明：AI確實能提高編程速度，但仍不能完全代替人類進行工作。

效果驗證

區域	背景色	特性
頂部按鈕區域	深色(#21252b)	包含 Mac 風格紅黃綠按鈕
代碼內容區域	淺色(#f8f8f8)	保持原有代碼樣式和行間距
容器邊框	淺灰色(#e7eaed)	分隔頂部深色和代碼區域

調整細節（按需修改）

頂部背景條高度：修改 .md-fences::after 的 height 值（需同步調整容器的 padding-top）
代碼區域邊距：調整 .md-fences pre 的 padding 值
圓角一致性：檢查 border-radius 數值是否與容器匹配

最終效果應實現 頂部深色按鈕區 + 下方淺色代碼區 的視覺分層，同時保持代碼內容的原有樣式。

三、表格樣式修改

將原主題的表格樣式改成三線表樣式

以下是修正后的三線表完整CSS代碼：

將原CSS中的相關樣式用以下替換即可

/* ================= 三線表完整樣式 ================= */
table {border-collapse: collapse !important;border-spacing: 0 !important;border: none !important;margin: 1.5em 0 !important;
}/* 頂線 */
table {border-top: 2px solid #333 !important;
}/* 底線 */
table {border-bottom: 2px solid #333 !important;
}/* 表頭線（中間線） */
thead tr:first-child th {border-bottom: 1.5px solid #666 !important;
}/* 單元格樣式 */
td, th {border: none !important;padding: 8px 12px !important;background: transparent !important;
}/* 表頭文字樣式 */
th {font-weight: 600 !important;color: #2c3e50 !important;
}/* 移除斑馬紋 */
tr:nth-child(2n) {background: transparent !important;
}/* 調整對齊方式 */
th {text-align: center !important;
}
td {text-align: left !important;
}

修改要點說明：

明確三條線的實現方式：
- 頂線：table元素的頂部邊框（2px）
- 中間線：表頭單元格(th)的底部邊框（1.5px）
- 底線：table元素的底部邊框（2px）
顏色層級：
- 頂/底線使用深灰色（#333）
- 中間線使用稍淺的灰色（#666）
增強可讀性：
- 表頭文字加粗（600字重）
- 表頭文字顏色加深（#2c3e50）
- 單元格增加橫向間距（8px→12px）

實際效果預覽：

__________________________ 頂線（2px）姓名    年齡    職位
__________________________ 中間線（1.5px）張三     28    工程師李四     35    設計師
__________________________ 底線（2px）

驗證方法：