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="{your-docsify-path}/typora-docsify/theme-simple.css"
/>
<link rel="stylesheet" href="{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:
- Simillar font weight (stroke width)
- Big x-height and width to fit the Chinese character
- Looks beautiful
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，因为字体太大所以并不附在主题中，如果你需要用到中文，可以自行到 这里 下载。当然即便没有思源，本主题还是会自动回退到苹方、微软雅黑之类系统自带的中文字体。
- Less words per line, for better reading experience.
- Easy to annotation, use BOLD, underline, emphasis/italic, ==mark/highlight==, ==mark underline==,
inline quote
,delete, 🔗link, etc.
作为设计师，会比较关注一些跟阅读体验有关的细节：
- 每行宽度大约在 40 个字，避免单行过长而难以转到下一行的行首。
- 多种高光标注方式，便于找到重点。比如：加粗，下划线连续下划线加间隔便于标注连续术语，em 斜体加重加染色，==高光 mark==，等。
- Add round corner to image / code block / table.
- Image height limit to 80% of viewport, prevent mobile screenshot looks too big.
(You can use customized CSS to display long image)
- Use monospace in table, the number will looks better.
- Transitions and hover effect.
- 图片、代码框、表格加圆角。
- 图片高度限制，避免手机截图之类的图过大，限制了图片最大高度 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).