Typora 的默认界面第一眼确实干净但真拿它当主力写作工具用上两三个月你多半会跟我一样冒出几个念头代码块背景能不能再深一点标题颜色这个蓝色实在晃眼插图老被复制到乱七八糟的目录里导出的 Word 排版跟预览根本是两回事。这就是典型的个性化设置没跟上。Typora 的个性化设置改好了写作体验完全是两个层次。这篇文章我从主题换肤、CSS 细节、图片路径、导出配置这几个方面把我实际用下来琢磨出来的方法一条一条说清楚适合所有已经在用 Typora 但还没认真收拾过它的朋友。1. 先弄明白 Typora 的界面和配置体系后面才好下手1.1 视觉改动的底层逻辑一套由 CSS 驱动的编辑器先说一个所有 Typora 老用户都懂的事Typora 的界面不是简单画出来的它整个 UI 就是一套浏览器页面外面套了个编辑器壳子。所以你在界面上看到的所有颜色、间距、圆角、阴影本质上都是 CSS 决定的。这个认知特别重要因为你一旦理解了这一点就会明白 Typora 的个性化设置其实有两条路第一条路是偏好设置里提供的可视化选项比如字体、字号、窗口宽度这些属于官方给的快速通道改起来零门槛第二条路是直接改主题文件里的 CSS这条路才是 Typora 个性化设置真正深的地方——从标题的颜色到代码块的高亮背景从引用块的左边框到表格的斑马纹全部可以自己说了算。我见过不少朋友一上来就问有没有更漂亮的主题下载其实 Typora 的个性化潜力根本不需要依赖别人做好的主题。官方内置的几个主题只是底子你完全可以拿其中一个当模板改成自己喜欢的样子。后边我会把具体怎么改的步骤写出来。1.2 主题文件夹的门道一个 CSS 文件就是一个主题在动手之前得先知道 Typora 是从哪里读取主题的。打开偏好设置快捷键Ctrl,mac 上是Cmd,进到外观这个选项卡主题旁边通常会有一个打开主题文件夹的按钮点一下就会弹出系统文件夹。这个文件夹里放着的所有.css文件每一个都对应主题菜单里的一个名字。比如里面有一个github.css你回到 Typora 的主题菜单里就能看到Github这个选项。规则就这么简单文件名叫什么主题菜单里就显示什么多放一个 CSS 进去菜单里就多一个主题。这里有个很容易被忽略的细节如果某个主题还带了独立资源文件比如特殊字体、背景图片Typora 会要求你把它们放在和这个主题同名的文件夹里。举例来说如果你拷贝了一份github.css打算改出一个叫mytheme的主题那配套的资源文件夹就应该叫mytheme否则引用外部资源时会找不到路径。我自己第一次改主题时就栽在这里改出来的 CSS 放在主题列表里了但里面的背景图死活加载不出来。2. 主题换肤从内置主题到随手改 CSS2.1 内置主题怎么挑才算找到对的底子Typora 内置的主题在不同版本里略有差异但我用过的版本里常驻的基本是这几款Github、Newsprint、Night、Midnight、Pie 之类。很多人选主题只看好不好看其实更应该看风格底子适不适合改。Github 主题属于最稳妥的底子对比度适中代码块和高亮配色偏程序员风格如果写技术文章居多拿它当起点最省事Newsprint 是纸张质感偏暖色适合长文写作、读书笔记这一类它的正文排版本身就比较讲究Night 和 Midnight 是暗色系深夜写作时很舒服但如果你打算在暗色基础上改亮色元素就要注意暗色主题里很多颜色是配套的强行改成亮色容易翻车。我的建议是第一次动手改主题选一个跟你最终想要的风格最接近的内置主题然后复制一份出来改 CSS而不是从零新建一个空文件。空文件意味着所有样式都要自己写工作量直接翻倍很容易劝退。2.2 复制主题文件并让改动生效的正确姿势具体操作我一步步说在主题文件夹里找到你想要作为底子的 CSS比如github.css复制一份重命名为mytheme.css。用任意文本编辑器我习惯 VS Code其实记事本也够用打开这个新文件。直接搜索你想改的元素比如搜h1、blockquote、.md-fences改对应的属性值。保存文件回到 Typora在主题菜单里选中mytheme。关键点来了CSS 改完保存后Typora 不会像浏览器那样自动刷新样式。你必须切换到别的主题再切回来或者干脆重启 Typora改动才会生效。如果你改了半天发现界面纹丝不动先别怀疑自己改错了先试试切换主题这个操作。还有一个我后来才琢磨明白的细节Typora 的编辑器区和普通 HTML 页面不太一样正文字体、居中、页面边距这类全局设置一般挂在#write这个选择器下面而不是body上。社区里有很多现成的 Typora CSS 片段新人直接拿来用的时候如果发现没效果八成就是选择器写错了。最好先打开主题文件搜一下#write看看它原本怎么写的再决定自己的样式挂在哪里。2.3 几个改完就很提气的自定义片段以下这几个 CSS 片段是我觉得改完效果立竿见影的可以直接往主题文件末尾追加存了之后按上面说的方式重启查看/* 标题颜色和字重 */ h1, h2, h3 { color: #2c3e50; font-weight: 700; } /* 行内代码的背景色和文字色 */ code { background-color: #f5f5f5; color: #c7254e; padding: 2px 6px; border-radius: 4px; } /* 代码块的圆角和背景 */ .md-fences { background-color: #f8f8f8; border-radius: 8px; border: 1px solid #eee; } /* 引用块的左边框配色 */ blockquote { border-left: 4px solid #42b983; background-color: #f6fffb; padding: 12px 16px; } /* 表格统一边框和表头底色 */ table { border-collapse: collapse; } th { background-color: #f0f0f0; } td, th { border: 1px solid #ddd; padding: 8px 12px; }这里要特别说一句不同版本的 Typora 对代码块的类名有过调整早期版本可能是.CodeMirror高一些的版本用.md-fences。如果追加之后代码块背景没变大概率是选择器版本不对。最稳的办法是打开主题原文件搜一下包含fenced或code的类名用原文件里出现过的选择器成功率最高。别问我为什么知道要这么做问就是我在版本更新后重新排查过两次。3. 写作区的细配置字体、居中、表情与排版细节3.1 中英文混排的字体设置比想象的更重要字体这部分在偏好设置的通用或者编辑器里就能调不需要动 CSS。但 Typora 里有一个比字体本身更重要的地方它可以给中文字体和西文字体分别设置。这对我这种经常写中英混排内容的人来说太关键了。当年我图省事全局只设了一款中文黑体结果代码里的英文字母和数字看起来又粗又钝非常影响阅读节奏。后来我把界面字体设置成中文思源黑体 或 苹方mac 上Windows 上可以用微软雅黑西文JetBrains Mono 或 Fira Code代码块字体JetBrains Mono字号比正文稍微小一点点。这样中文正文是正常黑体英文和数字用的是等宽字体标题、正文、代码之间的层次一下就出来了。尤其是代码块里的缩进对齐用等宽字体之后看着舒服得多这个建议我用下来一直没后悔过。3.2 上下居中、表情输入、上下标日常询问最多的小功能先解决一个很多人反复搜的问题Typora 怎么让内容上下居中其实水平居中好办在 Markdown 里直接嵌入 HTML 标签就行div aligncenter这一行会水平居中/div在 Typora 的普通视图里上面这段 HTML 会直接渲染成居中文本。但上下居中就麻烦一些因为 Markdown 本身只有段落流的概念并没有垂直居中这种说法。如果你的场景是做封面页、注释页想让一段文字出现在页面视口的中间位置可以用内联样式临时充当一个容器div styleheight: calc(100vh - 150px); display: flex; align-items: center; justify-content: center; 这里的内容会出现在屏幕中央 /div注意这种写法主要适用于屏幕阅读场景导出 PDF 时受页边距影响效果不一定跟屏幕上完全一致得自己微调。表情输入也是问得很多的。Typora 支持直接用冒号加英文单词触发 emoji 联想和 GitHub 的简写机制一致。比如输入:smile:然后回车就会变成对应的表情符号不用去系统里找。打字打多了之后这个机制其实就是 Markdown 写作时的表情快捷键。上下标也是不需要装插件的功能写化学式和数学公式时特别好用。H2O 写成H~2~O就能渲染成下标x 的平方写成x^2^就能渲染成上标。如果你写文档时经常遇到单位、化学式、脚标这些内容记住这四个符号就行~包下标^包上标。3.3 大纲、折叠标题与界面上的小开关Typora 的个性化不只是颜色和字体界面上很多开关键很值得一个个试一遍。我重点说三个用得最频繁的第一个是焦点模式和打字机模式。焦点模式会把当前编辑的段落高亮其他段落变淡适合大段文章精修打字机模式会让当前编辑行始终保持在整个窗口的中部附近写长篇内容时视线不用一直跟着光标跑。这两个开关在视图菜单里用快捷键切换更爽。第二个是标题折叠。鼠标悬停在标题上时左侧会出现一个小三角点一下就能折叠整个标题下的内容。这个功能配合大纲面板长文档的定位速度快非常多。第三个是侧边栏的文件树和文件列表。很多人不知道侧边栏底部的选项卡是可以拖出来变成悬浮面板的对于双屏写作的人来说把文件列表拖到副屏上主屏保持干净的编辑区体验会好很多。这个小技巧是典型的知道的人觉得理所当然不知道的人找半天找不到。4. 图片路径和图床不再让素材满天飞4.1 最推荐的图片设置复制到指定路径用 Typora 写过几篇文章的人大概率遇到过这种尴尬截图往文档里一贴保存一看图片散落在各个文件夹里有的甚至变成了绝对路径换个电脑打不开。这事的根源就是插入图片时的默认设置没有改。打开偏好设置找到图像选项卡最重要的是插入图片时这一项。我强烈建议直接把它从默认的不执行任何操作改成复制图片到指定路径然后路径填./images。这个配置的意思是每次往文档里粘贴一张图片Typora 会自动把图片复制到当前文档所在目录下的images子目录里然后在文章里用相对路径引用。为什么不选移动而选复制因为复制是安全的——原图还在截图目录里万一目标目录或者路径设置搞错了原始图片不会丢确认这套流程稳定可靠之后再考虑改不改移动。4.2 相对路径还是绝对路径别等换设备了才后悔图片路径有一个原则能用相对路径就不用绝对路径。绝对路径在你这台电脑上是D:/图片/xxx.png或者/Users/xxx/Pictures/xxx.png但你把文档发给别人或者把整个目录拖到另一台电脑甚至只是改了硬盘盘符图片就全废了。相对路径./images/xxx.png表示当前文档所在目录下的 images 文件夹里的 xxx.png只要文档和 images 文件夹一起移动图片就不会丢。这个规则对 Git 仓库尤其重要。我维护的静态博客项目里每篇文章的图片就放在对应文章目录的images文件夹下整个目录提交到 Git换任何设备 clone 下来文章和图片始终在一起非常干净。如果你已经在文档里插了一堆图片才想起来路径不对也不用重新贴一遍。Typora 的图像设置底部有个对本地已有图片应用以上规则的按钮点一下它会把当前文档里所有本地图片按新规则批量处理。这个功能网上很多人不知道但它真的是救命的。4.3 图床方案适合少量写作和多人协作的场景有些人不想在本地保留图片想把图片传到对象存储或者图床这样发布到博客、公众号、知乎时图片链接直接可用。Typora 对图床的支持也做得比较完善在偏好设置的图像选项卡里插入图片时选择上传图片然后在下方的上传服务里选择对应的图床工具。Mac 上我用过 uPicWindows 上更常见的是 PicGo。流程是先在系统里装好图床工具配好对象存储或者图床的密钥然后在 Typora 的服务里选中这个工具。这样每次粘贴图片Typora 会直接调用图床工具上传并把远程 URL 插入文档。不过我要说句实在话图床方案对个人本地写作来说不是必要项。它的问题是图片的本地备份需要额外考虑一旦图床服务出问题或者域名变更历史文章里的图片就会集体失效。比较稳妥的组合是本地相对路径存一份发布平台自动拉取一份。所以除非你有明确的跨平台发布需求否则我更推荐用好上一节的本地图片路径设置。5. 导出 PDF 和 Word模板、Pandoc 与中文字体5.1 Pandoc 装没装好一眼就能看出来Typora 导出 Worddocx和 LaTeX 相关格式的时候实际上是依赖一个叫 Pandoc 的转换工具。判断 Pandoc 有没有装好最简单的方式是打开终端或命令提示符敲一句pandoc -v如果显示了版本信息说明它已经躺在系统里了Typora 里导出的 WORD 选项可以直接用如果提示命令不存在那就得先去 pandoc.org 下载安装包或者用系统包管理器装mac 用brew install pandocWindows 下载一个.msi安装包Linux 用apt install pandoc或者 Snap 都可以。这里有个容易踩的坑装完 Pandoc 之后如果你是在安装之前就打开了 Typora最好重启一下 Typora否则它可能仍然检测不到 Pandoc。我遇到过不止一次装完了还提示没有转换工具的情况重启之后就好了。5.2 导出 PDF 时中文字体的大坑用 Pandoc 加 LaTeX 导出 PDF 时最经典的问题是中文变成方块字或者直接报错。推荐的做法分两步第一步在导出设置的 LaTeX 引擎里改成xelatex因为默认的 pdfLaTeX 对中文支持非常差第二步安装包含中文字体支持的宏包ctex这样 xelatex 才能正确处理中文字符。如果你完全不想折腾 LaTeX我的建议是直接放弃 Pandoc 导 PDF 这条路用 Typora 自带的导出 PDF 功能。这个功能虽然走的是内置引擎但对中文的支持很省心基本不需要额外配置。我在文档里用的导出方案是需要 Word 给同事协作时用 Pandoc 导 docx需要 PDF 做存档或打印时用 Typora 内置引擎直接导。5.3 自定义导出 HTML 模板还有一个容易被忽略的个性化设置导出的 HTML 文件模板是可以自定义的。在偏好设置里进入导出选择 HTML你会看到有自定义模板的入口。Typora 的 HTML 导出默认会带一部分样式但如果你有自己博客的样式体系可以在模板里把自己站点的 CSS 引用进去这样从 Typora 导出的 HTML 直接丢到博客后端就能保持统一排版。我记得社区里有人拿这个功能做文章发布流水线Typora 写 Markdown导出 HTML然后用脚本把 HTML 里的正文部分抽取出来填充到自己的博客模板里。整个过程不需要看到任何代码细节但对有独立博客或者企业知识库的朋友来说这条链路非常实用。我自己虽然没用这么重的流程但确实会导出一个干净 HTML 来做内容备份会避开默认样式被平台干扰的问题。6. 踩过的坑和最终的配置底稿6.1 三个印象最深的坑排一遍给你看先说主题不生效的坑。有次我改了一下午 CSS结果界面完全没变化当时一度以为是 Typora 对自定义主题的兼容性有问题。排查了半天才发现我的 CSS 文件放对了位置但文件名里带了个中文和空格Typora 虽然能列出这个主题加载却失败了。后来把所有主题文件名都改成纯英文小写加连字符问题再没出现过。所以新主题的命名规则请务必用my-theme.css这种格式不要夹中文和空格。第二个坑是图片路径迁移。有回我把一篇旧文章的图片目录从./images改成../assets但只改了设置没有点应用规则到已有图片结果文章里那些旧图片的引用路径全没变打开文档之后图片集体裂开。后来我每次调整路径配置第一件事就是确认对本地已有图片应用以上规则这个按钮有没有按。第三个坑是导出样式和预览不一致。Typora 的编辑区预览和导出走的是两套渲染流程预览看着很好的配色导出到 PDF 或 Word 之后可能边距、字体、换行都不太一样。这里我的经验是不要在主题 CSS 里做太夸张的版面设计比如靠 CSS 拉伸行距去凑页数、用 fix 定位做页眉这些导出时会非常难看。把版面的事交给导出模板去处理编辑区专注做内容和基础样式就够。6.2 我在用的这套配置你可以直接拿来当底稿下面是我目前主力使用的个性化配置基本都是高强度写作场景验证过几个月的贴出来供参考。配置项我的设置理由主要主题白天用自定义亮色晚上用 Night按场景切换护眼优先中文字体思源黑体 / 苹方屏幕显示清晰不累眼西文与代码字体JetBrains Mono等宽、对程序员排版友好界面宽度舒适宽度约 800px避免长行导致阅读疲劳图片插入方式复制到./imagesGit 和备份都方便自动保存开启防崩溃丢稿导出 PDFTypora 内置引擎中文省心无需 LaTeX导出 WordPandoc docx 参考文档排版统一可直接发协作写作区的截图、代码块语言标注、任务列表这些我基本都保持 Typora 默认因为用顺手了之后默认其实是最不干扰思路的状态。真正花力气调的是主题外观、图片路径和导出模板这三块调好之后整个 Markdown 写作流程会顺畅一大截。6.3 一套配置折腾到位能舒服很久这是我想在最后单独说的。个性化设置这件事特别容易陷入反复调反复改的循环隔三差五就想换个主题换个字体。我的做法是给自己定一个配置只许每周调一次的规矩平时如果冒出这里好像再改改会更好的念头先记在便签里攒到周末集中处理。这么做之后我反而很少再大动了——因为大多数所谓的不够好其实只是写作时的烦躁投射到界面上而已。不过有一类设置例外就是导出相关的模板和图片路径。这些属于和数据安全、协作体验直接相关的东西值得每次切换工作环境或者升级 Typora 版本后仔细检查一遍。我现在的习惯是每换一台电脑先把主题文件夹、偏好设置的导出配置、图像路径这三样东西过一遍确认无误后再正式开工。毕竟 Typora 能用得顺手靠的不是某一项惊艳的配置而是这些细节加在一起的整体体验。