typora 作为一款沉浸式的`markdown`写作工具，给习惯用标记性纯文本写作的用户带来了良好的体验，它支持实时渲染和源代码两种编辑模式。

在windows可以选择一体化的外观选项，使得它外表更接近mac上的体验。另外，typora 自带了 5 款主题皮肤（忽略掉我自制的 sspai 主题）。

但相信大家在使用的过程中依然有很多感觉到不完美的地方，鉴于这是一款基于 Electron 进行开发的软件，开发者很贴心地提供了调试功能，基于此功能我们可以更加快速地得到我们想要的定制样式。

这里有一篇介绍 typora 整体功能的文章「 Typora 完全使用详解」，我就不在编辑器本身的基础功能上面赘述了。本文主要讲解如何自定义你的 typora 主题，以及提供了一套少数派主题的主题皮肤可供下载。

注：用同样的方法，可以对任意的markdown编辑器进行排版样式表的修改。另外本文所提供的主题也是可以在其他编辑器中使用的，例如MWeb、VSCode等等。

下载少数派 typora 主题皮肤

这里有一份 typora 下的少数派排版风格主题，请注意查收。点我跳转到 github 下载。

相信很多少数派作者都跟我有同样的痛苦，富文本与纯文本字之间的切换，令排版非常困难。往往到了上传到站点的时候，甚至想清空格式，然后手动编辑一遍。

天下苦 sspai 编辑器久矣。

少数派风格主题的 typora 皮肤来啦，在少数派官方、typora，以及任何 markdown 编辑器之间进行无缝切换，更加顺滑的markdown编写体验，更好的排版样式。

注：源文件只是一个样式表，意味着理论上你可以用来替换任意markdown编辑器中的样式主题。已经有作者用到MWeb中啦。

😋 食用指南

下载或者是直接复制sspai.css文件，到你的 typora 主题文件夹下面即可。

重新打开你的 typora 软件，主题中就可以进行选择应用。使用的过程中，有什么意见或者建议，欢迎提 issues 或者直接站内私信我。

🤗 支持少数派编辑器发布

直接复制typora实时渲染下的内容，粘贴到少数派编辑器，点击保存，即可预览排版结果。

😀 支持 markdown 常规文本

🥰 支持图片处理：增加阴影、自动缩放

优化了图片标签：

zoom：自动缩放
shadow：给图片增加类似 mac 窗口的阴影
zoom-shadow / shadow-zoom

![zoom-shadow](image.png)说明文字

😥 不支持脚注

虽然支持<sup>脚注</sup>这样的写法，但是少数派站点的脚注是需要根据标签内部包括的div中sup-text标签来取用的，这样就不满足markdown写法啦，所以不支持。

tips：富文本与 markdown 之间的转换

直接把富文本复制到 typora 中，会处理为对应的 markdown 格式。

如何基于现有网站样式定制 typora 主题

先来谈谈如何基于现有网站样式定制，相信很多朋友其实是没有编程基础的。

那么在这里手把手教大家如何扒网站的编辑器皮肤，然后应用到你的软件中，此处以少数派为例。

痛点

相信使用少数派官方编辑器进行文章发布的作者们，都有共同的痛点：

富文本与markdown格式之间的切换；
图片处理：需要满足一定的比例、尺寸过大、需要 mac 窗口阴影。

之所以想自定义 typora 主题，就是因为每次markdown格式转成富文本，再复制到少数派的编辑器上面来，实在是太难受了，而且样式基本等于简化后的富文本——啥也不是。

解决方案也有很多：

使用vscode，站内已经有大神 @SpencerWoo 开发的一款插件（「免费好用的全平台 Markdown 编辑器，你可以自己「做」一个」），或者直接 copy 那段 css 文本到编辑器里就可以啦，不过左右无边距有点难受；
使用markdown here，你也需要把那段 css 文本复制过去，然而因为规则稍微有一点点不同，要改一下。

基于以上的解决方案，其实要想一个自己测试通过而且顺眼的排版结果，还是得自己动手。就算是使用方案二，也得对一下markdown的 css 样式，所以干脆动手改改，一劳永逸。

* 前置步骤，恶补 HTML 与 Markdown 之间的关系

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](imgUrl)`	img
表格	见下	table
代码段	见下	code
段落	无特殊表示	p

代码段：

```language
代码
```

表格：

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

第一步，首先得到少数派站点 css

巧妇难为无米之炊，首先需要物料准备。打开文章，按下F12得到一个浏览器控制台，控制台的左上角有一个小箭头，点它，然后再点击文本内容中的标签。

style标签里就是样式名称，可以看到这个wangEditor-txt就是少数派官方编辑器的样式名称啦。

点它，得到一个 css 文件。

复制这份 css 文件就好，保存到本地，至此你已经把少数派站点的样式表扒下来啦。

第二步，简化少数派样式表，覆盖默认主题样式

在这一步骤中，我们直接基于默认主题github进行改造。

在偏好设置中选择外观，打开主题文件夹，复制一份github.css，名称改为sspai.css（示例，自定义英文名称就可以，中文展示主题界面会乱码）。

在我们得到的这份副本中，typora 除了在文本的markdown部分，还包含了自身界面的 css 样式定制。

接下来，在第一步中扒下来的少数派主题样式做如下处理：

（画*号为必要步骤，其余两步如果实在不会可以跳过，基本没什么影响）

*全局替换.wangEditor为空字符串；
删除掉media query部分，不需要自适应相关部分的代码；
删除掉在对比的样式中不存在的标签tagName；
*得到简化后的少数派 css 样式，放在对比文本最后部覆盖掉默认的 css。

重启你的编辑器，可以在主题选项中看到 sspai，勾选应用主题。

到了这一步，已经得到一个基本的编辑器文本内容部分的皮肤啦。

第三步，细节 debug，编辑器皮肤调整

总结一下以上两个步骤：

浏览器下开启F12得到站点样式表
简化样式表（使得标签可以对应上），放在文本末尾，替换默认样式

这是最简单粗暴的方案了，但可能还是会存在不尽如人意的地方。

比如在以少数派为例的过程中，发现编辑器皮肤有点难看，这里还需要调整下细节。

debug 大法

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 文本

按照上述方法得到的markdown结果是很粗犷的，实际上少数派的样式也有一些细节，接下来就是针对细节进行调整优化。

除了按照第三步的 debug 方法，把细节对比了一遍后，还新增了一些优化。

图片 alt 标签优化

对于使用markdown进行文本编辑，我对于图片的痛点如下：

windows 截图无阴影，不够美观

我自己是 mac 和 windows 双平台使用的，mac 上面截图倒是优雅美观，windows 还得找模拟阴影的截图软件。

图片尺寸裁切
宽高比，缩放

为了图片更加美观，最好还得符合一定的宽高比例。因此，假设图片的alt标签大家都不怎么需要用，做了 3 个img自定义：

shadow：图片加阴影和圆角

![shadow](image.png)

zoom：图片自适应缩放

![zoom](image.png)

zoom-shadow：综合以上两种，也可以写作 shadow-zoom

![shadow-zoom](image.png)

用这样的思路，你可以自己定义图片的样式啦。其实直接引用img标签也不是不行，但我要坚持使用md进行文档编写。

修复图片的说明文字

如上所述，因为我把 alt 标签用来做图片处理了，而且 typora 本身也没有把图片说明文案显示在下方。这里单独对图片说明文字做了一次修复。

也就是说，图片说明文字跟 alt 标签优化功能不冲突。

![shadow-zoom](image.png)我是一个紧跟的说明文字

说明文字紧跟在图片那一段落就可以，但是编辑器不支持直接输出，实际上输出为 HTML 显示正确的，复制到少数派也可用。

其他样式修复就不写啦，都是同样的道理。

如何自定义你的 typora 主题

想要自定义样式，那么首先我们先拆解一下，typora 主题本身自带的样式内容。

typora 样式表详解

字体样式；

#write包裹的 markdown 文本编辑区域；

编辑器侧边栏、菜单栏以及专注模式。

除了样式表自带内容以外，只要你能通过 debug 方法找的界面元素，都是可以修改的。

如何自定义排版样式

使用如下几个设置可以进行基本的排版修改：

背景颜色：background-color
字体颜色：color
字体大小：font-size
行高：line-height
行间距：letter-spacing
内边距：padding
外边距：margin

示例，直接写在 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;
}