TiDB Markdown Plugin - 在你的Markdown文檔中運行一個真實的數據庫示例

TiDB Markdown Plugin

Repo: https://github.com/imiskolee/tidb-wasm-markdown
一款可讓TiDB運行在Markdown中的插件。

背景

週三看到朋友圈在瘋狂的刷 TiDB - Wasm 這個有意思的東西（讓數據庫運行在瀏覽器裏？TiDB + WebAssembly 告訴你答案）。
這的確是一件讓人興奮的工做成果，爲WASM的應用提供了不錯的思路。就這個項目自己而言也是有很大的價值。

咱們在編程語言學習的時候，有諸如JSFiddle、Go Playground等不少不一樣的交互性環境可使用，而且能夠將這些環境內嵌到教學文章之中，造成了交互性的教學資料。可是在
數據庫的文章之中，只能是純粹的紙上談兵，讀者很難進行直觀的感覺與實操。

相比較而言，純粹的編程語言的交互環境對於服務端資源消耗是可控的，成本也是能夠承擔得起的。數據庫不同，一個簡單的索引優化的示例數據可能就須要GB級別的內存佔用以及更大的CPU消耗，成本上難以承受。而TiDB WASM版本的出現，解決了這一個問題 --
由於是在客戶端構建環境，環境成本由對應的讀者承擔。基於這個前提，我想到的就是能夠把TiDB WASM版本做爲數據庫的Play Ground環境嵌入到Markdown中進行交互。

實施過程

• 直接從 http://play.pingcap.com 中把相關資源下載，分析了程序的處理流程（稍後將介紹插件的工做原理）。這個過程有個有意思的發現，在部署的時候，WASM程序被假裝成了main.css這個名字，這個讓我花費了幾分鐘。我以爲這個假裝的目的僅僅是爲了複用Nginx的壓縮緩存策略。

• 尋找一款Markdown解析器能夠方便的內嵌自定義標籤。 最終經過半小時的搜索與學習，定位到了markdown-it以及markdown-it-container這兩項工做。

  • 這款解析器必須是前端能夠工做的。
  • 這款解析器必須支持插件系統。
• 花費了1個小時學習了markdown-it的API與markdown-it-container的源碼與工做原理。
• 開始進行Demo驗證階段。
• 進行了簡單的代碼重構，進行了簡陋的封裝。
• 開發了Example程序
• 感謝來自社區的朋友JinSong對Example進行了基本重構，稍微好看了一點。

工做原理

使用方法

::: tisql        SELECT * FROM USERS;
| 固定tag內容     | sql 內容 |

詳情見demo程序。

問題

1. 目前已知在Chrome環境容易崩潰。
2. WASM程序體積較大，須要進行tiny處理。
3. 目前僅支持一個文檔單個數據庫實例（基於性能考量）
4. 還須要定義好的Markdown定義方法來描述數據庫的交互行爲。