Typora的Github主题美化

对Typora的Github主题进行一些自己喜欢的修改，主要包括：字体、代码块、表格样式

美化前：

美化前效果

美化后：

美化后效果

字体更换

之前便看上了「中文网字计划」的「朱雀仿宋」字体，于是一直想更换字体，奈何自己拖延症作祟，直到今天才开始行动。

关于「中文网字计划」

「中文网字计划」是一个致力于优化中文字体在互联网中应用的开源项目，通过Web Font技术为开发者提供便捷、免费的中文字体解决方案。其核心特点包括：

  1. 字体分包技术：将庞大的字体文件切割为小型静态分包，利用全球CDN加速加载，解决中文字体文件体积大、加载慢的问题；
  2. 丰富字体库：收录了霞鹛文楷、京華老宋体等众多字体，支持在线预览和按需调用；
  3. 开源工具链：提供字体分析工具（如font-analyze）、在线分包工具（在线切割）及NPM包（@konghayao/cn-font-split），方便开发者自定义字体优化；
  4. 全字符集渲染：支持OpenType特性，可自动按页面内容加载所需字符区间，兼顾渲染速度与完整性。

项目官网为https://chinese-font.netlify.app/，GitHub仓库见chinese-free-web-font-storage。

需注意部分字体授权信息需自行确认，建议优先选用明确开源授权的字体（如霞鹛文楷）。

中文网字计划是支持直接使用它提供的CDN的，但是由于不知道怎么在主题的CSS中使用，于是选择使用更为直接的方法：从中文网字计划的Github仓库中下载下来这个字体的.ttf文件，然后在CSS中使用该字体。

具体实现步骤

  1. 下载字体文件

  • 下载自己想要的字体文件，例如朱雀仿宋；

  • 并将字体文件放到合适的目录位置，这个文件路径之后要用得到，例如我就是直接放到主题css文件的同一目录下，故引用的时候就直接使用相对路径./字体文件名。

  1. 修改主题的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;
}

可以根据自己的需要自行设置

  1. 重启Typora

不出意外的话，重启便能看到更换好字体之后的效果了

代码块装饰

希望能添加仿mac窗口风格的代码块上檐，觉得很好看。

类似下图：

仿mac窗口风格的代码块上檐

已备条件

先前在美化Hexo博客站的时候子在网上找到了大佬在Hexo的Fluid主题中实现仿mac窗口风格的方法，即通过``自定义CSS，并提供了stylus代码`：

.highlight
    background: #21252b
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 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 相关样式，替换或修改为上述代码。以下是主要修改点说明：

  1. 定位上下文：
    添加 position: relative 为伪元素定位提供基准

  2. 窗口按钮实现：
    使用 ::before 伪元素创建三个圆形按钮，通过：

    • box-shadow 创建多个按钮
    • 精确的定位调整按钮位置
    • z-index 确保按钮可见

  3. 样式覆盖：
    使用 !important 覆盖 Typora 默认样式：

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

  4. 布局调整：

    • 增加 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; 的解释：

给元素添加一个向下偏移的半透明模糊阴影，具体参数解析如下：

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

  2. 10px：垂直偏移量（v-shadow）
    表示阴影向下偏移10像素（负值会向上偏移）

  3. 30px：模糊半径（blur）
    阴影边缘会产生30像素的模糊渐变效果，数值越大越模糊

  4. 0：扩散半径（spread）
    阴影大小与元素原始尺寸一致（正值扩大阴影，负值收缩）

  5. rgba(0, 0, 0, .4)：阴影颜色
    使用黑色（#000）且透明度为40%（0.4），通过透明度实现阴影深浅控制

  6. !important：优先级标记
    强制覆盖其他可能存在的阴影样式规则

最终效果表现为：元素下方会呈现一个向下延伸10px、模糊范围30px、半透明黑色（类似雾状）的阴影层，常用于创建卡片浮起效果或增强界面层次感。

表格样式修改

将原主题的表格样式改成三线表样式

以下是修正后的三线表完整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;
}

修改要点说明：

  1. 明确三条线的实现方式：

    • 顶线：table元素的顶部边框（2px）
    • 中间线：表头单元格(th)的底部边框（1.5px）
    • 底线：table元素的底部边框（2px）

  2. 颜色层级：

    • 顶/底线使用深灰色（#333）
    • 中间线使用稍浅的灰色（#666）

  3. 增强可读性：

    • 表头文字加粗（600字重）
    • 表头文字颜色加深（#2c3e50）
    • 单元格增加横向间距（8px→12px）

实际效果预览：

__________________________ 顶线（2px）
 姓名    年龄    职位
__________________________ 中间线（1.5px）
 张三     28    工程师
 李四     35    设计师
__________________________ 底线（2px）

验证方法：

  1. 在Typora中插入3行2列的表格
  2. 观察是否呈现：
    • 顶部粗线
    • 表头下方细线
    • 底部粗线
  3. 检查是否没有其他干扰线条

如果希望调整线条粗细，可以修改以下参数：

  • 顶/底线粗细：2px → 推荐范围 1.5px-3px
  • 中间线粗细：1.5px → 推荐范围 1px-2px

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/973513.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DeepSeek 助力 Vue 开发：打造丝滑的 键盘快捷键（Keyboard Shortcuts）

DeepSeek 助力 Vue 开发：打造丝滑的 键盘快捷键（Keyboard Shortcuts）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…
阅读更多...
[深度学习][python]yolov12+bytetrack+pyqt5实现目标追踪

[深度学习][python]yolov12+bytetrack+pyqt5实现目标追踪

【算法介绍】 实时目标检测因其低延迟特性而持续受到广泛关注，具有重要的实际应用价值[4, 17, 24, 28]。其中，YOLO系列[3, 24, 28, 29, 32, 45-47, 53, 57, 58]通过有效平衡延迟与精度，在该领域占据主导地位。尽管YOLO的改进多集中在损失函数…
阅读更多...
Python大数据可视化：基于大数据技术的共享单车数据分析与辅助管理系统_flask+hadoop+spider

Python大数据可视化：基于大数据技术的共享单车数据分析与辅助管理系统_flask+hadoop+spider

开发语言：Python框架：flaskPython版本：python3.7.7数据库：mysql 5.7数据库工具：Navicat11开发软件：PyCharm 系统展示 管理员登录 管理员功能界面 场地信息界面 单车信息界面 归还信息界面 共享单车界面 系…
阅读更多...
ssm-day06 ssm整合

ssm-day06 ssm整合

从springMVC总结再回顾一下 60节 整合就是应用框架，并且把这个框架放到IOC容器中 web容器：装springMVC和controller相关的web组件 root容器：装业务和持久层相关的组件 子容器可以引用父容器中的组件，父容器不能调子容器 一个容器…
阅读更多...
MATLAB基础学习相关知识

MATLAB基础学习相关知识

MATLAB安装参考：抖音-记录美好生活 MATLAB基础知识学习参考：【1小时Matlab速成教程-哔哩哔哩】 https://b23.tv/CnvHtO3 第1部分：变量定义和基本运算 生成矩阵： % 生成矩阵% 直接法% ,表示行 ;表示列 a [1,2,3;4,5,6;7,8,9];%…
阅读更多...
Windows - 通过ssh打开带有图形界面的程序 - 一种通过计划任务的曲折实现方式

Windows - 通过ssh打开带有图形界面的程序 - 一种通过计划任务的曲折实现方式

Windows(奇思妙想) - 通过ssh打开带有图形界面的程序 - 一种通过计划任务的曲折实现方式 前言 Windows启用OpenSSH客户端后就可以通过SSH的方式访问Windows了。但是通过SSH启动的程序： 无法显示图形界面会随着SSH进程的结束而结束 于是想到了一种通过执行“计划…
阅读更多...
WPS接入deepseek-OfficeAI助手插件下载

WPS接入deepseek-OfficeAI助手插件下载

功能简介 OfficeAI 助手 是一款免费的智能AI办公工具软件，专为 Microsoft Office 和 WPS 用户打造。 无论你是在寻找如何输入“打勾（√）符号”的方法，还是想知道“怎么在插入表格前添加文字”，或者“该用哪个公式”&a…
阅读更多...
【JavaEE进阶】Spring MVC(4)-图书管理系统案例

【JavaEE进阶】Spring MVC(4)-图书管理系统案例

欢迎关注个人主页：逸狼 创造不易，可以点点赞吗 如有错误，欢迎指出~ 图书管理系统 创建书籍类BookInfo import lombok.Data;import java.math.BigDecimal;Data //这个类基本上是和数据库对应起来的 public class BookInfo {private Integer id…
阅读更多...
路由器的WAN口和LAN口有什么区别？

路由器的WAN口和LAN口有什么区别？

今时今日，移动终端盛行的时代，WIFI可以说是家家户户都有使用到的网络接入方式。那么路由器当然也就是家家户户都不可或缺的设备了。而路由器上的两个实现网络连接的基础接口 ——WAN 口和 LAN 口，到底有什么区别？它们的功能和作用…
阅读更多...
AI客服-接入deepseek大模型到微信（本地部署deepseek集成微信自动收发消息）

AI客服-接入deepseek大模型到微信（本地部署deepseek集成微信自动收发消息）

1.本地部署 1.1 ollama Ollama软件通过其高度优化的推理引擎和先进的内存管理机制，显著提升了大型语言模型在本地设备上的运行效率。其核心采用了量化技术（Quantization）以降低模型的计算复杂度和存储需求，同时结合张量并行计算&…
阅读更多...
基于COSTAR模型的内容创作：如何用框架提升写作质量

基于COSTAR模型的内容创作：如何用框架提升写作质量

目录 前言1. Context（上下文）：理解背景，奠定写作基础1.1 何为上下文1.2 上下文的作用1.3 案例解析 2. Objective（目标）：明确写作方向，避免跑题2.1 确立目标2.2 如何设定目标2.3 案例…
阅读更多...
kafka-集群缩容

kafka-集群缩容

一. 简述： 当业务增加时，服务瓶颈，我们需要进行扩容。当业务量下降时，为成本考虑。自然也会涉及到缩容。假设集群有 15 台机器，预计缩到 10 台机器，那么需要做 5 次缩容操作，每次将一个节点下线…
阅读更多...
DeepSeek 提示词：定义、作用、分类与设计原则

DeepSeek 提示词：定义、作用、分类与设计原则

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…
阅读更多...
基于vue和微信小程序的校园自助打印系统（springboot论文源码调试讲解）

基于vue和微信小程序的校园自助打印系统（springboot论文源码调试讲解）

第3章 系统设计 3.1系统功能结构设计 本系统的结构分为管理员和用户、店长。本系统的功能结构图如下图3.1所示： 图3.1系统功能结构图 3.2数据库设计 本系统为小程序类的预约平台，所以对信息的安全和稳定要求非常高。为了解决本问题，采用前端…
阅读更多...
大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(3)

大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(3)

Paimon的下载及安装，并且了解了主键表的引擎以及changelog-producer的含义参考： 大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1) 利用Paimon表做lookup join，集成mysql cdc等参考： 大数据组件(四)快速入门实时数据…
阅读更多...
blender笔记2

blender笔记2

一、物体贴地 物体->变换->对齐物体 ->对齐弹窗(对齐模式：反方，相对于：场景原点，对齐：z)。 之后可以设置原点->原点--3d游标 二、面上有阴影 在编辑模式下操作过后，物体面有阴影。 数据-&g…
阅读更多...
MinkowskiEngine安装（CUDA11.8+torch2.0.1+RTX4070TI）

MinkowskiEngine安装（CUDA11.8+torch2.0.1+RTX4070TI）

1、背景 1）因为项目要用这个库：MinkowskiEngine，Minkowski Engine — MinkowskiEngine 0.5.3 documentation 然后就用了之前安装好 MinkowskiEngine 的torch1.8.1,cuda11.1的环境。 2）自己的代码出现cuda不支持torch用gpu进行矩…
阅读更多...
【Blender】二、建模篇--05，阵列修改器与晶格形变

【Blender】二、建模篇--05，阵列修改器与晶格形变

阵列修改器是bender里面一个比较常用的修改器，所以我们单独开口来讲，我们会先从几片树叶出发，然后我们用阵列修改器把这几片树叶变成这样的造型和这样的造型。这两个造型分别就代表着阵列修改器最常用的两种偏移方法，我们现在就开始我们先来做几个树叶。 1.树叶建模 首先…
阅读更多...
华为昇腾服务器（固件版本查询、驱动版本查询、CANN版本查询）

华为昇腾服务器（固件版本查询、驱动版本查询、CANN版本查询）

文章目录 1. **查看固件和驱动版本**2. **查看CANN版本**3. **其他辅助方法**注意事项 在华为昇腾服务器上查看固件、驱动和CANN版本的常用方法如下： 1. 查看固件和驱动版本 通过命令行工具 npu-smi 执行以下命令查看当前设备的固件（Firmware&#xff0…
阅读更多...
2024电子取证“獬豸杯”WP

2024电子取证“獬豸杯”WP

简介： 竞赛为个人赛，工具自备，只发证书（还没用，公告这么写的哈）竞赛选手们将对模拟的案件进行电子数据调查取证，全面检验参赛选手电子数据取证的综合素质和能力。 检材链接： 百度网盘…
阅读更多...
最新文章

Copyright @ 2022~2023