如何自定义你的 typora 主题,以少数派为例 | 您所在的位置:网站首页 › typora软件苹果怎么不能用 › 如何自定义你的 typora 主题,以少数派为例 |
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)说明文字 😥 不支持脚注 虽然支持脚注这样的写法,但是少数派站点的脚注是需要根据标签内部包括的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 提供了一个骨架,而样式表就是给它一套外观。 他们之间存在的对应关系,就可以让我们对此进行修改。我用以下这个表格进行一个简单的映射,修改时可以用这个表格进行对照: 描述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 样式定制。 接下来,在第一步中扒下来的少数派主题样式做如下处理: (画*号为必要步骤,其余两步如果实在不会可以跳过,基本没什么影响) *全局替换.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; } 效果如图: 到这里,基本就结束啦。如果对编辑器自定义主题,还有什么别的问题,欢迎站内私信我,或者直接留言。 如果对sspai.css有什么建议的话,直接提 issues 是最好的。👩🏻💻
|
CopyRight 2018-2019 实验室设备网 版权所有 |