時間線（時間軸）你們應該都不陌生。前端
不管是在產品文檔更新說明：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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。