A theme that present SAME STYLE in Typora and Docsify.

  • By null
  • Last update: Dec 26, 2022
  • Comments: 1

Typora + Docsify

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 有一致的呈现,于是写了这个主题。

preview

Installation 安装

in Typora

Just unzip the typora-docsify.css file and typora-docsify folder into the Typora theme folder.

in Docsify

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.

Chinese Font

如果你使用中文写作,非常推荐你安装 思源黑体

Features 功能特色

Numbering for Header 标题编号

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 层级开始自动计数。

header-numbering

Fonts 字体

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,因为字体太大所以并不附在主题中,如果你需要用到中文,可以自行到 这里 下载。当然即便没有思源,本主题还是会自动回退到苹方、微软雅黑之类系统自带的中文字体。

font

Reading Experience 阅读优化

  • 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==,等。

Others 其它

  • 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。

table

About

This theme is wrote by LESS, the main file is typora-docsify.less. And generate .css file by less2css(a Sublime Text package).

Github

https://github.com/Erimus-Koo/theme_typora_docsify

Comments(1)

  • 1

    Typing Cursor invisible when editing math

    Hello,

    It seems there is a bug in the setup of typing cursor.

    For example, the cursor does not show up in the following section between the $$'s.

    $$ a = b $$

    Thanks,

    Wei