markdown写作工具，给习惯用标记性纯文本写作的用户带来了良好的体验，它支持实时渲染和源代码两种编辑模式。在windows可以选择一体化的外观选项，使得它外表更接近mac上的体验。另外，typora 自带了 5 款主题皮肤（忽略掉我自制的 sspai 主题）。
但相信大家在使用的过程中依然有很多感觉到不完美的地方，鉴于这是一款基于 Electron 进行开发的软件，开发者很贴心地提供了调试功能，基于此功能我们可以更加快速地得到我们想要的定制样式。
这里有一篇介绍 typora 整体功能的文章「 Typora 完全使用详解」，我就不在编辑器本身的基础功能上面赘述了。本文主要讲解如何自定义你的 typora 主题，以及提供了一套少数派主题的主题皮肤可供下载。
注：用同样的方法，可以对任意的markdown编辑器进行排版样式表的修改。另外本文所提供的主题也是可以在其他编辑器中使用的，例如MWeb、VSCode等等。
这里有一份 typora 下的少数派排版风格主题，请注意查收。点我跳转到 github 下载。
相信很多少数派作者都跟我有同样的痛苦，富文本与纯文本字之间的切换，令排版非常困难。往往到了上传到站点的时候，甚至想清空格式，然后手动编辑一遍。
天下苦 sspai 编辑器久矣。
少数派风格主题的 typora 皮肤来啦，在少数派官方、typora，以及任何 markdown 编辑器之间进行无缝切换，更加顺滑的markdown编写体验，更好的排版样式。
注：源文件只是一个样式表，意味着理论上你可以用来替换任意markdown编辑器中的样式主题。已经有作者用到MWeb中啦。
下载或者是直接复制sspai.css文件，到你的 typora 主题文件夹下面即可。
重新打开你的 typora 软件，主题中就可以进行选择应用。使用的过程中，有什么意见或者建议，欢迎提 issues 或者直接站内私信我。
直接复制typora实时渲染下的内容，粘贴到少数派编辑器，点击保存，即可预览排版结果。
优化了图片标签：
说明文字
😥 不支持脚注
虽然支持<sup>脚注</sup>这样的写法，但是少数派站点的脚注是需要根据标签内部包括的div中sup-text标签来取用的，这样就不满足markdown写法啦，所以不支持。
直接把富文本复制到 typora 中，会处理为对应的 markdown 格式。
先来谈谈如何基于现有网站样式定制，相信很多朋友其实是没有编程基础的。
那么在这里手把手教大家如何扒网站的编辑器皮肤，然后应用到你的软件中，此处以少数派为例。
相信使用少数派官方编辑器进行文章发布的作者们，都有共同的痛点：
之所以想自定义 typora 主题，就是因为每次markdown格式转成富文本，再复制到少数派的编辑器上面来，实在是太难受了，而且样式基本等于简化后的富文本——啥也不是。
解决方案也有很多：
基于以上的解决方案，其实要想一个自己测试通过而且顺眼的排版结果，还是得自己动手。就算是使用方案二，也得对一下markdown的 css 样式，所以干脆动手改改，一劳永逸。
markdown 与 HTML 之间的渲染，存在一个对应的关系。markdown 虽然只要求你用最简明的标记语言，来进行编写，但它实际会成为一个结构明晰的 html 网页。可以说 markdown 提供了一个骨架，而样式表就是给它一套外观。
他们之间存在的对应关系，就可以让我们对此进行修改。我用以下这个表格进行一个简单的映射，修改时可以用这个表格进行对照：
| 描述 | markdown | HTML TAG |
|---|---|---|
| 标题 | # 一级标题 ## 二级标题… | h1,h2…h6 |
| 粗体 | **粗体** | b , strong |
| 斜体 | *斜体* | em, i |
| 分割线 | --- | hr |
| 无序列表 | * 1 - 1 + 1 | ul |
| 有序列表 | 1. | ol |
| 引用 | > | blockquote |
| 超链接 | [url](url) | a |
| 图片 |  | img |
| 表格 | 见下 | table |
| 代码段 | 见下 | code |
| 段落 | 无特殊表示 | p |
代码段：
```language 代码 ```
表格：
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
巧妇难为无米之炊，首先需要物料准备。打开文章，按下F12得到一个浏览器控制台，控制台的左上角有一个小箭头，点它，然后再点击文本内容中的标签。
style标签里就是样式名称，可以看到这个wangEditor-txt就是少数派官方编辑器的样式名称啦。
点它，得到一个 css 文件。
复制这份 css 文件就好，保存到本地，至此你已经把少数派站点的样式表扒下来啦。
在这一步骤中，我们直接基于默认主题github进行改造。
在偏好设置中选择外观，打开主题文件夹，复制一份github.css，名称改为sspai.css（示例，自定义英文名称就可以，中文展示主题界面会乱码）。
在我们得到的这份副本中，typora 除了在文本的markdown部分，还包含了自身界面的 css 样式定制。
接下来，在第一步中扒下来的少数派主题样式做如下处理：
（画*号为必要步骤，其余两步如果实在不会可以跳过，基本没什么影响）
重启你的编辑器，可以在主题选项中看到 sspai，勾选应用主题。
到了这一步，已经得到一个基本的编辑器文本内容部分的皮肤啦。
总结一下以上两个步骤：
这是最简单粗暴的方案了，但可能还是会存在不尽如人意的地方。
比如在以少数派为例的过程中，发现编辑器皮肤有点难看，这里还需要调整下细节。
typora 是基于electron开发的一款软件，而且官方也提供了调试功能。
简单地说来，可以理解为 typora 其实是一个 web 应用，electron给它包了一个无边浏览器的壳子。
mac 在选项中的帮助一栏勾选enable debug，windows 在偏好设置中勾选开启调试即可，然后你就可以在应用中任何一处点击右键，会出来一个「检查元素」选项。
浏览器调试台其实也是一个所见即所得的地方，你可以直接在右边最顶层的样式中随心修改颜色和字体大小等等。
还记得我第一张动图中点击那个箭头吗，没错还按它，然后任意选择你想要修改的地方，此处以 h4 标题为例。
然后左边的 html 代码里会高亮你选择的部分，点击右键 => Copy => Copy selector，得到当前样式的选择器。
然后我们得到如下代码——
#write > h4:nth-child(46) > span
#write 就是编辑器文本区域，h4 是 4 级标题，后面跟的 46 是第几个节点，要使用的时候简化如下：
#write > h4
简单地说，请反复理解前置步骤章节，只需要里面的几个标签就可以了，不认识的你可以直接删除。
示例，如下代码可以得到背景为粉红色的 16 号红色的 4 级标题：
#write > h4 {
color: 'red',
font-size: 16,
background-color: 'pink'
}
*除了在软件内直接点击修改整个软件的样式外，也可以把文本内容导出为HTML格式，然后在网页中调试查看，针对markdown内容部分的调整更为方便快捷。
按照上述方法得到的markdown结果是很粗犷的，实际上少数派的样式也有一些细节，接下来就是针对细节进行调整优化。
除了按照第三步的 debug 方法，把细节对比了一遍后，还新增了一些优化。
对于使用markdown进行文本编辑，我对于图片的痛点如下：
我自己是 mac 和 windows 双平台使用的，mac 上面截图倒是优雅美观，windows 还得找模拟阴影的截图软件。
为了图片更加美观，最好还得符合一定的宽高比例。因此，假设图片的alt标签大家都不怎么需要用，做了 3 个img自定义：
用这样的思路，你可以自己定义图片的样式啦。其实直接引用img标签也不是不行，但我要坚持使用md进行文档编写。
如上所述，因为我把 alt 标签用来做图片处理了，而且 typora 本身也没有把图片说明文案显示在下方。这里单独对图片说明文字做了一次修复。
也就是说，图片说明文字跟 alt 标签优化功能不冲突。
我是一个紧跟的说明文字
说明文字紧跟在图片那一段落就可以，但是编辑器不支持直接输出，实际上输出为 HTML 显示正确的，复制到少数派也可用。
其他样式修复就不写啦，都是同样的道理。
想要自定义样式，那么首先我们先拆解一下，typora 主题本身自带的样式内容。
除了样式表自带内容以外，只要你能通过 debug 方法找的界面元素，都是可以修改的。
使用如下几个设置可以进行基本的排版修改：
示例，直接写在 css 末尾覆盖掉默认样式，得到颜色为紫色，字间距 10px 的标题及段落：
h1,
h2,
h3,
h4,
h5,
h6,
p{
color: darkmagenta;
letter-spacing: 10px;
}
反复咀嚼前文如何自定义少数派主题的前置步骤，以及第三步调试大法，可以针对你想修改的地方进行排版调整，此处不再赘述。
windows 上跟 mac 区别最大的，莫过于字体。
主题文件夹下面，除了单独的github.css，还有对应的 github 目录，可以看到其实都是不同字型的字体文件。
再来看它对应的代码，@import-when-export一开始就声明了导出时需要通过一个地址下载字体，打包到导出文件中。
下面 4 个定义的@font-face则是跟文件夹中对应的 4 种字型，分别在常规、斜体、加粗、斜体且加粗4 种情况下引用不同的字型。
那么接下来开始自定义字体。
有两种方案，使用你本机安装的字体，或者下载好一些字体放在对应的目录下面。
打开你本机的字体库，以windows为例，菜单栏搜索「字体」就会出来。
此处仅示例如何替换常规字型，其他字型同理。
首先要确保你本机安装了该字体，然后通过互联网搜索到字体对应英文表示法：
Windows 预装：
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋GB2312：FangSongGB2312
楷体GB2312：KaiTiGB2312
微软雅黑：Microsoft YaHei （Windows 7开始提供）
OS X 预装：
冬青黑体: Hiragino Sans GB （SNOW LEOPARD开始提供）
华文细黑：STHeiti Light （又名STXihei）
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
对照上表，黑体的英文表达为「SimHei」，替换字体为黑体：
body {
font-family: SimHei;
}
效果如图：
如何查看当前字体是否应用正确呢？依然是打开控制台，在盒型下面搜索font-family，下方会显示当前渲染字体Rendered Fonts。
分析一下github.css自己定义的字体，4 个@font-face都定义了同一个名字叫做「Open Sans」，分别定义了这个字体的 4 种字型。
然后在font-family中定义了取用的字体。如果英文表达中有空格则需要引号包裹，否则不需要，会按照定义的顺序去查找字体，直到找到为止，否则取用默认字体。
这里建议先定义英文字体，再定义中文。因为中文字体中一般是含有字母的，那么会直接取用到中文的字体，英文效果比较差。
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: bold;
src: local('Open Sans Bold Italic'),url('./github/700i.woff') format('woff');
}
body {
font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color: rgb(51, 51, 51);
line-height: 1.6;
}
所以，如果没有对字型有特殊要求，那么只需要下载一个字体就好了。加粗、斜体依然会有效果的。
依样画葫芦，下载了一个字体到本地，先定义字体名称，再使用：
@font-face {
font-family: 'webfont';
src: url('./webfont.woff') format('woff')
}
body {
font-family: 'webfont', serif;
color: rgb(51, 51, 51);
line-height: 1.6;
}
效果如图：
到这里，基本就结束啦。如果对编辑器自定义主题，还有什么别的问题，欢迎站内私信我，或者直接留言。
如果对sspai.css有什么建议的话，直接提 issues 是最好的。👩🏻💻
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。