Obsidian——CSS 样式代码片段分享（复刻Typora的orangeheart）

之前分享过typora的主题样式，今天再来分享一下Obsidian的样式，但是在分享之前可能就有读者问了：主播主播，为什么不能直接将Typora的CSS主题样式复制到Obsidian中呢？
欸，你算是问对了，那咱们就好好唠一唠（当然有点啰嗦，笔者也可自行点击跳转到 orangeheart——Obsidian 直接获取CSS样式）➡

为什么不能直接复制粘贴Typora的CSS到Obsidian呢？

很多人会想：既然喜欢Typora的排版，直接把Typora主题的CSS复制到Obsidian主题文件夹就能用。实际直接粘贴会大量样式失效、布局错乱，同时也不建议做成完整主题，应当采用CSS样式片段，核心原因来自两者底层渲染架构、加载机制的差异。

1、渲染引擎完全不一样，DOM结构不兼容

• Typora：整篇笔记是一套完整HTML，标题、引用、代码全部输出标准HTMLDOM，CSS直接作用于h2、blockquote、pre这类标签。伪元素、背景、三角装饰、复杂块样式全部可以直接生效。
• Obsidian：分为两套完全独立的渲染体系
  1. 阅读视图（Preview）：会把Markdown转HTML，可以识别部分标签；
  2. 源码编辑视图（SourceMode）：底层是CodeMirror6，不是HTML。没有真正的<h2>、<blockquote>DOM，全部是一行行的.cm‑line文本行，Markdown的##、>符号是文本内容，不是标签。

直接粘贴Typora的主题CSS：大量选择器在编辑模式完全找不到对应元素，样式直接丢弃。像Typora h2的右下角三角装饰，在Obsidian源码编辑模式下根本无法实现，强行使用会出现错位、遮挡光标、重复渲染的问题。

2、两套视图要同时兼容，不能只做阅读视图

Typora不存在“编辑/阅读双模式”，所见即所得，只需要一套CSS。

但Obsidian用户会频繁切换「源码编辑」和「阅读预览」：

• 如果只照搬Typora的CSS，只有阅读视图有样式，编辑视图会完全变回原生简陋样式，两边字体、字号、行高、配色割裂，写稿体验很差。
• 想要编辑视图和阅读视图视觉尽量统一，需要分别写两套选择器：阅读视图使用.markdown‑preview‑view，编辑视图使用CodeMirror的.cm‑header‑2、.HyperMD‑quote等专属类名，无法复用Typora的原始代码。

3、代码块高亮体系完全独立

• Typora使用自己封装的高亮库；
• Obsidian：
  • 阅读预览：PrismJS；
  • 源码编辑模式：CodeMirror6。

两者Token的CSS类名完全不一样。直接复制Typora的代码高亮，代码块会出现黑底黑字、配色全部失效，必须重新编写两套语法高亮规则，分别适配预览和编辑。

4、布局逻辑差异：居中、边距、容器不一样

Typora的页面容器、边距、居中逻辑是固定写死的。

Obsidian有侧栏、标签页、多文档分屏、弹窗，页面容器结构完全不同。

举个实际踩坑例子：

照搬Typora的max‑width限制内容宽度，但缺少margin:0 auto，会出现内容直接贴窗口左侧，无法居中。这就是调试中遇到的真实问题。

直接复制过来会出现：笔记靠左、内容溢出、分屏下排版崩坏，需要重新调整边距、居中、padding，适配Obsidian的容器。

5、功能组件冲突

Obsidian自带内部链接、双向链接、脚注、标签、callout、插件元素，Typora没有这些组件。

直接导入Typora的CSS，会干扰Obsidian原生组件样式，出现链接看不见、脚注错乱、插件界面异常，需要做兼容处理。

---

为什么使用「CSS样式代码片段」，而不放到主题文件夹做成完整主题

那么这时又有老铁问了说：主播主播，既然是自定义CSS，为什么不做成完整.css主题放到themes文件夹，而是放在样式片段？

1. 完整主题会覆盖全部界面，侵入性太强

   放到themes下的主题文件是全量主题，接管Obsidian全部界面：侧边栏、设置、按钮、弹窗、菜单全部要自己定义。

   如果只把排版样式丢进主题文件夹，缺少界面相关样式，会造成侧边栏、按钮、设置界面样式错乱、控件丢失。

   我们这套样式只修改笔记编辑、阅读区域，不去改动软件UI，不需要接管整个软件界面。

2. 样式片段可以自由开关，方便调试排错

   CSS片段每个文件拥有独立开关：

• 可以单独关闭排版，只保留代码高亮；
• 可以关闭代码高亮，只保留排版；
• 样式出问题时，一键关闭片段即可恢复原生，方便调试定位是代码块出错还是正文排版出错。

如果是完整主题，只能整体切换，无法局部关闭一部分样式；一旦CSS有语法错误，整个主题全部崩溃。

3. 可以和其他第三方主题共存

CSS片段是叠加生效：你可以继续使用你喜欢的第三方主题（比如Minimal、Obsidian默认主题），我们的样式片段只叠加修改笔记内容区域，软件整体UI沿用原来主题。

如果放到themes文件夹作为完整主题，就必须切换到该主题，不能和别的主题共存。

4. 职责拆分，便于维护迭代

本次拆分为两个片段：

• typora-orangeheart-read.css：负责正文排版；
• typora-orangeheart-code.css：只负责代码块高亮。

片段模式可以独立修改其中一个，互不影响。而完整主题一般要求全部样式写在一起，文件庞大，修改排查麻烦。

5. 升级、迁移库更方便

样式片段直接放在库的snippets目录，更换设备、同步库，直接同步这两个文件即可；不需要修改themes目录、不需要手动切换主题，开启开关就生效。

总结

Typora的CSS不能直接迁移到Obsidian，不是CSS语法不通用，而是底层文档模型、渲染引擎、双视图机制存在本质区别。我们参考Typora的配色、字体、排版审美，但选择使用CSS样式片段而非完整主题文件。

样式片段只叠加修改笔记内容，不接管软件整体界面，可与第三方主题共存，支持单独开关调试；而完整主题文件会接管全部UI，侵入性高，容易造成侧边栏、按钮等系统界面错乱。因此将正文排版、代码高亮拆分为独立CSS片段，既还原Typora的阅读效果，又保证源码编辑视图书写体验，同时兼容Obsidian原生功能与各类插件。

h2的橙色背景样式没有随着字的多少而变化的原因是：
Typora 是依靠 <h2><span>h2标题内容</span></h2>HTML 标签实现橙色底色块。
Obsidian Markdown## h2标题内容不会自动生成<span>标签！！Markdown 语法本身不会输出 span，所以原来写的h2 span{background:rgb(239,112,96)}这一段完全不会生效。
Typora 内部会自动给h2标题文本套一层span，Obsidian不会，这就是h2橙色块消失的根本原因
那就只能直接给h2加整行背景了或者手动加上<span>标签

orangeheart——Obsidian

## typora-orangeheart-read.css

/* ==============================================
  项目：复刻 Typora OrangeHeart 主题 · Obsidian 双视图排版片段
  功能：同时兼容【阅读预览视图】+【源码编辑视图】字体/标题/列表/引用/链接/表格样式
  配套：typora-orangeheart-code.css（独立控制代码块语法高亮，无需修改本文件）
============================================== */

/* ---------------------- 全局基础：字体、页面宽度、行间距（双视图共用） ---------------------- */
/* 阅读预览容器 + 源码编辑文本容器统一基础样式 */
.markdown-preview-view,
.markdown-source-view.mod-cm6 .cm-content {
  /*max-width: 860px; */       /* 限制正文最大宽度，复刻Typora窄阅读模式 */
  /*margin: 0 auto; */        /* 关键：内容块整体页面居中，文字内部左对齐 */
  font-size: 16px;
  color: black;
  padding: 0 10px;        /* 左右内边距，避免文字贴紧窗口边缘 */
  line-height: 1.6;
  word-spacing: 0px;
  letter-spacing: 0px;
  word-break: break-word; /* 长英文/链接自动换行，不溢出容器 */
  word-wrap: break-word;
  text-align: left;       /* 文字统一左对齐 */
  /* 字体栈：优先苹果思源，其次英文衬线字体，还原Typora原版字体 */
  font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* 通用段落行高，排除标题、引用、列表行（单独定制） */
.markdown-preview-view p,
.markdown-source-view.mod-cm6 .cm-line:not(.HyperMD-header):not(.HyperMD-quote):not(.HyperMD-list-line) {
  font-size: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0;
  line-height: 26px;      /* 固定段落行高，保证阅读舒适 */
  color: black;
}

/* ---------------------- 模块1：阅读视图 各级标题样式（h2橙色块+右下角三角） ---------------------- */
/* 全部标题通用基础属性 */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 0px;
  font-weight: bold;
  color: black;
}
.markdown-preview-view h1 { font-size: 1.5rem; }
/* 二级标题核心样式：橙色背景、底部橙线、圆角 */
.markdown-preview-view h2 {
  font-size: 1.3rem;
  border-bottom: 2px solid rgb(239, 112, 96);
  display: block;
  padding-right: 20px;
  padding-left: 12px;
  line-height: 1.75;
  background-color: rgb(239, 112, 96); /* 橙色底色 */
  color: #ffffff !important;           /* 白色文字，保证可读性 */
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  position: relative;
}
/* h2内部超链接：适配橙色背景，白色文字+半透明白下划线 */
.markdown-preview-view h2 a {
  color:#fff !important;
  border-bottom:1px solid #ffffff88;
}
/* h2右下角灰色三角装饰 */
/*.markdown-preview-view h2:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: bottom;
  border-bottom: 36px solid #efebeb;
  border-right: 20px solid transparent;
  margin-right: -20px;
  position: relative;
  left: 0;
}*/
.markdown-preview-view h3 { font-size: 1.2rem; }
.markdown-preview-view h4 { font-size: 1.1rem; }
.markdown-preview-view h5,
.markdown-preview-view h6 { font-size: 1rem; }

/* ---------------------- 模块2：源码编辑视图 标题样式（字号对齐阅读视图，简化配色） ---------------------- */
.markdown-source-view.mod-cm6 .cm-header-1 { font-size: 1.5rem; font-weight:bold; }
.markdown-source-view.mod-cm6 .cm-header-2 {
  font-size: 1.3rem;
  font-weight:bold;
  color: rgb(239, 112, 96); /* 二级标题文字橙色，和预览视图统一色系 */
  border-bottom: 2px solid rgb(239, 112, 96);
  padding-bottom:2px;
}
.markdown-source-view.mod-cm6 .cm-header-3 { font-size: 1.2rem; font-weight:bold; }
.markdown-source-view.mod-cm6 .cm-header-4 { font-size: 1.1rem; font-weight:bold; }
.markdown-source-view.mod-cm6 .cm-header-5,
.markdown-source-view.mod-cm6 .cm-header-6 { font-size: 1rem; font-weight:bold; }

/* ---------------------- 模块3：列表样式（分阅读视图/编辑视图两套独立规则） ---------------------- */
/* ========== 阅读视图列表：原生列表流 ========== */
.markdown-preview-view ul,
.markdown-preview-view ol {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 26px; /* 整体左侧缩进距离 */
  color: black;
}
.markdown-preview-view ul { list-style-type: disc; }        /* 一级无序列表实心圆点 */
.markdown-preview-view ul ul { list-style-type: square; }  /* 二级嵌套无序列表方块 */
.markdown-preview-view ol { list-style-type: decimal; }    /* 有序列表阿拉伯数字 */

/* 列表条目基础：依靠固定行高实现圆点与文字垂直居中，不破坏原生布局 */
.markdown-preview-view li {
  margin: 6px 0;
  line-height: 26px;
  text-align: left;
  font-weight: 500;
}
/* 清除li内部段落默认边距，防止列表内多行文本间距异常 */
.markdown-preview-view li p {
  margin:0;
  padding:0;
}

/* ========== 源码编辑视图列表：修复多行文字异常缩进，实现悬挂缩进 ========== */
.markdown-source-view.mod-cm6 .HyperMD-list-line {
  padding-left: 25px;
  line-height:26px;
  text-indent: -1.5em; /* 悬挂缩进核心：第二行文字与首行文字对齐，不跟随圆点/序号 */
}

/* ---------------------- 模块4：引用块（双视图统一橙色左侧竖线+浅橙底色） ---------------------- */
/* 阅读视图引用 */
.markdown-preview-view blockquote {
  display: block;
  font-size: 0.9em;
  overflow: auto;
  border-left: 3px solid rgb(239, 112, 96); /* 橙色左侧标识线 */
  color: #6a737d;
  padding: 10px 10px 10px 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  background: #fff9f9; /* 浅粉色背景区分正文 */
}
.markdown-preview-view blockquote p {
  margin: 0px;
  color: black;
  line-height: 26px;
}
/* 编辑视图引用同步配色 */
.markdown-source-view.mod-cm6 .HyperMD-quote {
  border-left:3px solid rgb(239, 112, 96);
  padding-left:16px;
  color:#6a737d;
  background:#fff9f9;
}

/* ---------------------- 模块5：超链接（全局橙色标识，区分普通文字） ---------------------- */
/* 阅读视图全局链接 */
.markdown-preview-view a {
  text-decoration: none;
  word-wrap: break-word;
  font-weight: bold;
  border-bottom: 1px solid rgb(239, 112, 96);
  color: rgb(239, 112, 96);
}
/* h2内链接单独适配橙色背景，上方已单独定义，此处预留兼容 */
.markdown-preview-view h2 > a {
  color: #ffffff !important;
  border-bottom: 1px solid #ffffff88;
}
/* 编辑视图内部链接/外部裸链接统一橙色 */
.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.markdown-source-view.mod-cm6 .cm-hmd-barelink {
  color: rgb(239, 112, 96) !important;
  font-weight:bold;
}

/* ---------------------- 模块6：行内代码 `xxx` 配色（橙色文字浅灰背景） ---------------------- */
/* 阅读视图行内代码 */
.markdown-preview-view p code,
.markdown-preview-view li code {
  font-size: 14px;
  word-wrap: break-word;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 0 2px;
  color: rgb(239, 112, 96);
  background-color: rgba(27,31,35,.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
  word-break: break-all;
}
.markdown-preview-view span code {
  color: rgb(239, 112, 96);
}
/* 编辑视图行内代码同步样式 */
.markdown-source-view.mod-cm6 .cm-inline-code {
  font-size:14px;
  padding:2px 4px;
  border-radius:4px;
  margin:0 2px;
  color:rgb(239, 112, 96);
  background:rgba(27,31,35,.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* ---------------------- 模块7：图片、表格（仅阅读视图生效，编辑视图无DOM标签无法渲染） ---------------------- */
/* 图片居中，自适应容器宽度 */
.markdown-preview-view img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.markdown-preview-view span img {
  display: inline-block;
  border-right: 0px;
  border-left: 0px;
}
/* 表格边框、隔行浅灰底色 */
.markdown-preview-view table {
  display: table;
  width: 100%;
}
.markdown-preview-view table tbody { border: 0; }
.markdown-preview-view table tr {
  border: 0;
  border-top: 1px solid #ccc;
  background-color: white;
}
.markdown-preview-view table tr:nth-child(2n) {
  background-color: #F8F8F8; /* 偶数行浅灰区分 */
}
.markdown-preview-view table th,
.markdown-preview-view table td {
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  /*text-align: center;*/
}
.markdown-preview-view table th {
  font-weight: bold;
  text-align: center;
  background-color: #f0f0f0; /* 表头更深底色 */
}

/* ---------------------- 模块8：脚注样式（仅阅读视图支持脚注DOM） ---------------------- */
.markdown-preview-view .footnote-ref {
  font-weight: bold;
  color: rgb(239, 112, 96);
}
.markdown-preview-view .footnote-item > .footnote-backref {
  padding-right: 1.8ch;
}

typora-orangeheart-code.css

/* ==============================================
  配套片段：代码块深色语法高亮
  作用：控制```包裹的整块代码，同时适配【阅读预览】+【源码编辑】代码区域
  说明：
    1. 预览代码块使用 Prism token 类；编辑代码块使用 CodeMirror cm-* 类
    2. 内置Mac窗口顶部三色圆点装饰，完全复刻Typora深色代码块配色
  依赖：配合typora-orangeheart-read.css正文排版片段使用
============================================== */

/* ---------- 第一部分：阅读视图预览代码块样式 ---------- */
.markdown-preview-view pre[class*="language-"] {
  position: relative;
  padding-top: 1rem !important;
  background:#292d3e !important; /* 深色代码块底色 */
  border-radius:4px;
  overflow:hidden;
}
/* Mac左上角三色小圆点装饰 */
.markdown-preview-view pre[class*="language-"]::before {
  content: '';
  background: #fa3534;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  position: absolute;
  left: 8px;
  top:8px;
  z-index: 999;
  box-shadow: 0.9rem 0px 0px #ff9900, 1.8rem 0px 0px #19be6b;
}
/* 代码文字基础浅色，覆盖Obsidian默认黑色文字 */
.markdown-preview-view pre[class*="language-"] code {
  background:transparent !important;
  color:#a6accd !important;
}
/* Prism 语法高亮token配色（预览视图关键字/字符串/数字分色） */
.markdown-preview-view .token.keyword    { color:#c792ea !important; }
.markdown-preview-view .token.operator   { color:#89ddff !important; }
.markdown-preview-view .token.function   { color:#82aaff !important; }
.markdown-preview-view .token.string     { color:#c3e88d !important; }
.markdown-preview-view .token.number     { color:#ff5370 !important; }
.markdown-preview-view .token.comment    { color:#676e95 !important; }
.markdown-preview-view .token.tag        { color:#ff5370 !important; }
.markdown-preview-view .token.attr-name  { color:#c792ea !important; }
.markdown-preview-view .token.builtin    { color:#ffcb6b !important; }

/* ---------- 第二部分：源码编辑视图 CodeMirror 代码高亮 ---------- */
/* 代码编辑容器基础深色背景 */
.cm-s-inner.CodeMirror {
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #292d3e;
  color: #a6accd;
  font-family: Consolas;
  border-radius: 4px;
}
.CodeMirror-lines {
  padding-left: 4px;
}
/* CodeMirror 各类语法标记配色，和预览视图保持统一色调 */
.cm-s-inner .cm-keyword { color: #c792ea; }
.cm-s-inner .cm-operator { color: #89ddff; }
.cm-s-inner .cm-variable-2 { color: #eeffff; }
.cm-s-inner .cm-variable-3, .cm-s-inner .cm-type { color: #decb6b; }
.cm-s-inner .cm-builtin { color: #ffcb6b; }
.cm-s-inner .cm-atom { color: #f78c6c; }
.cm-s-inner .cm-number { color: #ff5370; }
.cm-s-inner .cm-def { color: #82aaff; }
.cm-s-inner .cm-string { color: #c3e88d; }
.cm-s-inner .cm-string-2 { color: #f07178; }
.cm-s-inner .cm-comment { color: #676e95; }
.cm-s-inner .cm-variable { color: #f07178; }
.cm-s-inner .cm-tag { color: #ff5370; }
.cm-s-inner .cm-meta { color: #ffcb6b; }
.cm-s-inner .cm-attribute { color: #c792ea; }
.cm-s-inner .cm-property { color: #c792ea; }
.cm-s-inner .cm-qualifier { color: #decb6b; }
/* 语法错误标记底色 */
.cm-s-inner .cm-error {
  color: rgba(255, 255, 255, 1);
  background-color: #ff5370;
}
/* 括号匹配下划线高亮 */
.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}
/* 代码编辑光标橙色竖线，统一主题橙色标识 */
.CodeMirror div.CodeMirror-cursor {
  border-left: 1px solid rgb(239, 112, 96);
  z-index: 3;
}
.CodeMirror {
  padding-top: 1rem !important;
}