在Markdown中扩展语法实现时间线解析

时间线(时间轴)大家应该都不陌生。

无论是在产品文档更新说明:

组织历程:

还是新闻大事件中:

都会有时间线的身影。

时间线可以线性地梳理纷繁事务的前后逻辑关系,捋清事物发展的脉络。

时间线虽然很好,但是如果需要在自己的日志、文档和笔记中加入时间线则没有很好的方案。

无论是桌面端还是 Web 端,时间线都需要大量的代码进行渲染,最后生成一个时间线的图形样式。

最近,在觅道文档的QQ群(735507293)里,有小伙伴提出在觅道文档的 Markdown 编辑器中实现时间线功能的需求,并且得到了其他小伙伴的呼应。

便分析了一下使用 Markdown 语法实现和处理时间线的可能性。

在 GitHub 上搜索,发现了一些 Markdown语法解析时间线的开源组件,比如 mdline,其使用如下图所示的语法进行 Markdown 时间线的解析:

最后渲染出来的时间线如下图所示:

在州的先生看来,其语法的变量稍微有点多,而且左右排列的时间线布局在文档结构中稍显突兀,占据了大量的宽度。

时间线的核心块也就两点:

  • 标题行
  • 内容行

至于标题行是输入时间、日期还是其他文字,应该由使用者自由控制。

所以,初步确定好时间线的语法为:

# 标题
内容
====

如何将时间线与正常的 Markdown 代码块区分开来呢,采用集成思维导图的方式,通过代码块的三引号+timeline进行标识,也就是如下所示:

```timeline
# 标题
内容
====
```

同时,由于觅道文档使用了 LayUI 作为前端样式组件,其本身也提供了时间线的样式,所以就直接采用它的时间线样式来作为最终渲染出来的样式。

基于上述设定,我们在 Markdown 的解析脚本里面,进行如下的改动:

最后,我们得到如下图所示的 Markdown 时间线解析:

这样,就完成了在 Markdown 中实现时间线解析的功能。

此功能将在本月底发布的觅道文档 0.6.0 版本中体现,敬请期待。

猜你也喜欢

发表评论

邮箱地址不会被公开。