扩展markdown语法,实现读书笔记效果

  • [x] 理论分析
  • [ ] 开发
  • [ ] 开源

需求分析

我在一边看书一遍写读书笔记,这个大家都知道的。
md语法是垂直结构,所以我只能把原文放在上面,笔记放在下面。写作和阅读的时候就需要不断上下看,非常影响效率和阅读体验。直观上,我期待的效果是左边原文、右边笔记的双栏结构。
snip20180712_1

HTML实现

对应于HTML语法,有2种实现方式:

  • 臃肿的table标签,实现1行2列效果
  • div标签,直接浮动
    考虑到我对table的厌恶,以及今后可能扩展为3栏等需求,浮动div是目前首选

Markdown语法扩展

md作为一种标记语言,它本身是不管你怎么渲染的。它只是说“喏,这是个列表,第1点、第2点、第3点。”、“喏,这是个代码块”。至于说具体的字体、字号、颜色、对齐、颜色,事不关己,高高挂起。
因此,md语法方面,我只需要设计一个合理的语法即可。

::::50%    <div style={浮动50%}>
原文图片  =>  原文图片
::::       </div>

::::50%    <div style={浮动50%}>
读书笔记  =>  读书笔记
::::       </div>

具体实现可能还要让不同div之间有相同的高度,保持对齐等等。
繁琐细节之后再说。

Markdown插件开发

设计好了语法和目标html以后,思路就更加清晰。我们需要给Ghost使用markdown-it这个parser,开发一个对应的插件,把我们自定义的md扩展语法变为真正的HTML内容。
在Google之后,我找到了一大堆别人写好的各种用途的markdown-it插件
更进一步,我随手看到了一个叫markdown-it-container的插件

With this plugin you can create block containers like:

::: warning
*here be dragons*
:::

.... and specify how they should be rendered. If no renderer defined,

with container name class will be created:

<div class="warning">
<em>here be dragons</em>
</div>

如果我再花点时间找找,也许已经有人实现了我想要的功能。即便是基于这个插件改一点东西,也很容易。
MIT协议,开心

开源

弄好以后肯定会开源的啦