A theme that present same style in Typora and Docsify.
I usually write in Typora and then use Docsify display md as a web page, so I wanted the markdown will looks simillar in both platform, and I wrote this theme.
What U See in Typora is What U Get in Docsify.
这是一个主题,可以在 Typora 和 Docsify 呈现同样的样式。
我平时使用 Typora 写作,然后用 Docsify 作为网页发布,所以我希望 Typora 和 Docsify 对同一篇 md 有一致的呈现,于是写了这个主题。
First of All, download the release zip file on this page.
先下载从 这个页面下载压缩文件。
Open Preferences / Apperance / Open Theme Folder
Just unzip the typora-docsify.css
file and typora-docsify
folder into the Typora theme folder.
前往
偏好设置 / 外观 / 打开主题文件夹
,然后将上述文件夹内的文件解压缩到该目录内。
// Finally your file looks like this
// 解压后大致如下
{Your Typora Theme Path}
│
├──typora-docsify.css <- theme file
│
├── typora-docsify
│ ├──codeblock.css <- highlights in code block
│ └──theme-simple.css <- docsify basic style
│
└──{other theme files...}
If you use this theme in Docsify, you need import theme-simple.css
as default theme, my theme is base on it. Add this to your <head>
block.
在 Docsify 中使用本主题,需要先导入一个
theme-simple.css
,我是基于这个基础再修改的。在<head>
中加入以下代码即可。
<link
rel="stylesheet"
href="https://github.com/Erimus-Koo/theme_typora_docsify/blob/master/{your-docsify-path}/typora-docsify/theme-simple.css"
/>
<link rel="stylesheet" href="https://github.com/Erimus-Koo/theme_typora_docsify/blob/master/{your-docsify-path}/typora-docsify.css" />
I use and modify this theme in my Docsify CSS folder, so I make a soft link to the Typora theme folder (Use Mklink
in Windows or ln
in Mac), then you can modify one of them and update both.
如果你使用中文写作,非常推荐你安装 思源黑体。
I prefer to use an outline for my writing so that the structure is clear and helps clarify my thoughts, so I have added auto numbering for the headings.
Starts with H2
, because I use H1
as TITLE.
我偏好使用大纲来写作,这样结构清晰有助于厘清思路,所以我给各级标题添加了自动编号功能。我习惯用 H1 作为文章标题,所以是从 H2 层级开始自动计数。
Since I mostly write in Chinese, I wanted to find an English font that would fit Chinese and well matched, that means:
Finally I chose Poppins (Similar to Futura)
and import online from Google Fonts. There's a tricky use Poppins 600 instead of 700, which looks better.
The monospace I chose JetBrains Mono.
因为平时大多使用中文写作,所以希望找一个适配中文且美观的英文字体,所以我选择了 Poppins(类似 Futura),并且通过 Google Fonts 载入。如果你无法直接访问 Google,可先自行下载。等宽用的 JetBrains Mono。
中文字体使用了思源黑体的港版 Source Han Sans HC,因为字体太大所以并不附在主题中,如果你需要用到中文,可以自行到 这里 下载。当然即便没有思源,本主题还是会自动回退到苹方、微软雅黑之类系统自带的中文字体。
inline quote,
作为设计师,会比较关注一些跟阅读体验有关的细节:
- 每行宽度大约在 40 个字,避免单行过长而难以转到下一行的行首。
- 多种高光标注方式,便于找到重点。比如:加粗,下划线连续下划线加间隔便于标注连续术语,em 斜体加重加染色,==高光 mark==,等。
(You can use customized CSS to display long image)
- 图片、代码框、表格加圆角。
- 图片高度限制,避免手机截图之类的图过大,限制了图片最大高度 80% 视窗。(可以通过 CSS 解除该限制)
- 表格默认等宽字体,我用来写代码和数字比较多,等宽字体更好阅读。
- 引用都是淡化显示不喧宾夺主,但鼠标移入时加深更便于阅读。
- 鼠标移入变化都带了 transition。
This theme is wrote by LESS, the main file is typora-docsify.less
. And generate .css
file by less2css(a Sublime Text package).