如何自定义你的 typora 主题,以少数派为例

by Typora.net

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](image.png)说明文字

😥 不支持脚注

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

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

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

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

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

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

痛点

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

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

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

解决方案也有很多:

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

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

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

markdown 与 HTML 之间的渲染,存在一个对应的关系。markdown 虽然只要求你用最简明的标记语言,来进行编写,但它实际会成为一个结构明晰的 html 网页。可以说 markdown 提供了一个骨架,而样式表就是给它一套外观。

他们之间存在的对应关系,就可以让我们对此进行修改。我用以下这个表格进行一个简单的映射,修改时可以用这个表格进行对照:

描述markdownHTML TAG
标题# 一级标题 ## 二级标题h1,h2…h6
粗体**粗体**b , strong
斜体*斜体*em, i
分割线---hr
无序列表* 1 - 1 + 1ul
有序列表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 样式定制。

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

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

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

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

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

总结一下以上两个步骤:

  1. 浏览器下开启F12得到站点样式表
  2. 简化样式表(使得标签可以对应上),放在文本末尾,替换默认样式

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

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

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进行文本编辑,我对于图片的痛点如下:

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

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

![shadow](image.png)
![zoom](image.png)
![shadow-zoom](image.png)

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

修复图片的说明文字

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

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

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

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

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

如何自定义你的 typora 主题

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

typora 样式表详解

  1. 字体样式;
  1. #write包裹的 markdown 文本编辑区域;
  1. 编辑器侧边栏、菜单栏以及专注模式。

除了样式表自带内容以外,只要你能通过 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;
}

效果如图:

到这里,基本就结束啦。如果对编辑器自定义主题,还有什么别的问题,欢迎站内私信我,或者直接留言。


Tags: , ,