时间线（时间轴）你们应该都不陌生。前端
不管是在产品文档更新说明：web
组织历程：编程
仍是新闻大事件中：微信
都会有时间线的身影。编辑器
时间线能够线性地梳理纷繁事务的先后逻辑关系，捋清事物发展的脉络。布局
时间线虽然很好，可是若是须要在本身的日志、文档和笔记中加入时间线则没有很好的方案。flex
不管是桌面端仍是 Web 端，时间线都须要大量的代码进行渲染，最后生成一个时间线的图形样式。spa
最近，在觅道文档的QQ群（735507293）里，有小伙伴提出在觅道文档的 Markdown 编辑器中实现时间线功能的需求，而且获得了其余小伙伴的呼应。.net
便分析了一下使用 Markdown 语法实现和处理时间线的可能性。3d
在 GitHub 上搜索，发现了一些 Markdown语法解析时间线的开源组件，好比 mdline，其使用以下图所示的语法进行 Markdown 时间线的解析：
最后渲染出来的时间线以下图所示：
在州的先生看来，其语法的变量稍微有点多，并且左右排列的时间线布局在文档结构中稍显突兀，占据了大量的宽度。
时间线的核心块也就两点：
标题行
内容行
至于标题行是输入时间、日期仍是其余文字，应该由使用者自由控制。
因此，初步肯定好时间线的语法为：
# 标题内容====
如何将时间线与正常的 Markdown 代码块区分开来呢，采用集成思惟导图的方式，经过代码块的三引号+timeline进行标识，也就是以下所示：
```timeline# 标题内容====```
同时，因为觅道文档使用了 LayUI 做为前端样式组件，其自己也提供了时间线的样式，因此就直接采用它的时间线样式来做为最终渲染出来的样式。
基于上述设定，咱们在 Markdown 的解析脚本里面，进行以下的改动：
最后，咱们获得以下图所示的 Markdown 时间线解析：
这样，就完成了在 Markdown 中实现时间线解析的功能。
此功能将在本月底发布的觅道文档 0.6.0 版本中体现，敬请期待。
往期精选
本文分享自微信公众号 - 州的先生（zmister2016）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。