為了讓用戶一鍵遷移MD到Nocode/WEP知識庫, 我寫了一個MD引擎
嗨，大家好，我是徐小夕。
之前一直在社區分享零代碼&低代碼的技術實踐，也陸陸續續設計并開發了多款可視化搭建產品，比如：
- H5-Dooring（頁面可視化搭建平臺）
- V6.Dooring（可視化大屏搭建平臺）
- 橙子6試卷（表單搭建引擎）
- Nocode/WEP 文檔知識引擎
最近有小伙伴反饋在Nocode/WEP平臺上能不能支持md導入, 這樣就能輕松將自己的MD文件遷移到平臺了.
我想了一下非常合理, 所以花時間研究了一下.
圖片
因為我做的文檔編輯器是 blocks 設計思想(類似的實現比如飛書文檔, Notion等), 所以從 md 轉換成 blocks 模式還是有點小復雜的, 但是還是硬著頭皮, 寫了一個渲染引擎, 可以實現 blocks 和 md 的相互轉換.
圖片
簡單介紹一下我的文檔產品
圖片
Nocode/WEP 是我基于零代碼思想設計的一款 AI + 可視化文檔知識引擎. 它支持多模態內容編輯, 類似飛書和Notion, 同時可以利用AI進行輔助創作, 我們還能基于文檔一鍵生成CMS內容站點.
目前這款產品已經開放, 大家可以免費注冊使用.
體驗地址: https://doc.dooring.vip
由于本文重點介紹MD引擎, 所以給大家介紹個大概即可, 如果大家想全面了解這款產品, 可以參考我往期的內容:
- 支持可視化可配置，AI+文檔引擎推薦
實現將文檔導出為Markdown
由于 Nocode/WEP 的文檔每個塊的數據結構是如下結構:
{
"id": "2gTxw2-Zp5",
"type": "header",
"data": {
"text": "Demo站點優化",
"level": 2
}
}但是導出為 MD 的結構, 需要適配MD的語法, 比如:
## 標題
[H5-Dooring](https://dooring.vip)
> 引用內容所以我們就需要寫個MD轉換器, 來實現 blocks流 到 MD文本 的轉換.
比如我要實現 blocks 的圖片轉 md 的圖片格式, 我需要一個工具函數:
export function parseImageToMarkdown(blocks) {
return ``.concat('\n');
}我們需要對文檔引擎的每一個塊組件做一個映射函數, 最后封裝在MD解析引擎中, 來實現我們的blocks 到md的轉換, 這里給大家演示一下實現效果:
圖片
比如說上面我用 Nocode/WEP 做的一個圖文并茂的文檔, 我們點擊導出為MD按鈕, 來看看生成的md的效果:
## 最近上線了MD文件的導入和導出功能
這是一段文本,描述了一個<b>H5-Dooring</b>在<code class="inline-code">零代碼</code>中的應用, 幫助我們輕松搭建專業級頁面.
下面是一個鏈接:
[H5網站制作平臺](https://dooring.vip "H5-Dooring是一款功能強大，專業可靠的H5可視化頁面配置解決方案，致力于提供一套簡單方便、專業可靠、無限可能的H5網站制作最佳實踐。")
這里再展示一個項目列表:
- 任務一 H5-Dooring
- 任務二 V6.Dooring
- 結束
### 子標題展示(圖片案例)
我要展示一個音頻:
<audio src="https://cdn.dooring.cn/llYlOJNTYNX8Ahwt8AKU3VjilfV3"></audio>
我要展示一個視頻呢?
<video src="https://fast.dooring.vip/system/%E9%A3%9E%E4%B9%A620230419-174032.mp4"></video>
我要用分割線分割:
---導出的MD結構還是非常友好的, 我們可以將MD 導入到其他平臺, 來實現跨平臺共享.
實現Markdown導入文檔系統
這一款就涉及到反解析了, 我們需要把 MD的字符串語法, 解析,分割,清洗成文檔接受的blocks 對象格式.
實現這一過程我們可以自己基于字符串結構來寫一個解析器, 來將MD字符串轉譯為對象表示.
這里給大家展示一個我寫的將MD的表格語法轉化為可解析的對象表示, 如:
function getTableArr(markdownTable) {
// 去除開頭的 "|" 和每行開頭的空格
const rows = markdownTable.split('\n').map(row => row.replace(/^\s*\|/, '').trim());
// 提取標題行和數據行
const header = rows[0].split('|');
const data = rows.slice(1).map(row => row.split('|'));
// 去除標題和數據中的空字符串
const headerClean = header.filter(item => item!== '');
const dataClean = data.map(row => row.filter(item => item!== ''));
return [headerClean,...dataClean]
}這塊為了提高效率和穩定性, 我們可以使用 remark 來輔助我們生成.
圖片
remark 是一個用于處理 Markdown 文檔的強大工具庫。
它可以用于將 Markdown 文檔轉換為其他格式，如 HTML，也可以進行一些 Markdown 文檔的分析和處理。
一個簡單的案例:
const remark = require('remark');
const html = require('remark-html');
remark()
.use(html)
.process('這是一段 Markdown 文本\n\n# 標題', (err, result) => {
if (err) throw err;
console.log(result.toString());
});我在反解析引擎中使用了 remark 來實現將 md 字符串解析成有格式化的對象.
給大家看看我實現的效果:
圖片
由上圖可以發現我們導入的MD已經可以完美展示到我們文檔里了.
