嗨，大家好，我是徐小夕。

之前一直在社區(qū)分享零代碼&低代碼的技術(shù)實(shí)踐，也陸陸續(xù)續(xù)設(shè)計(jì)并開發(fā)了多款可視化搭建產(chǎn)品，比如：

• H5-Dooring（頁面可視化搭建平臺）
• V6.Dooring（可視化大屏搭建平臺）
• 橙子6試卷（表單搭建引擎）
• Nocode/WEP 文檔知識引擎

最近有小伙伴反饋在Nocode/WEP平臺上能不能支持md導(dǎo)入, 這樣就能輕松將自己的MD文件遷移到平臺了.

我想了一下非常合理, 所以花時間研究了一下.

圖片

因?yàn)槲易龅奈臋n編輯器是 blocks 設(shè)計(jì)思想(類似的實(shí)現(xiàn)比如飛書文檔, Notion等), 所以從 md 轉(zhuǎn)換成 blocks 模式還是有點(diǎn)小復(fù)雜的, 但是還是硬著頭皮, 寫了一個渲染引擎, 可以實(shí)現(xiàn) blocks 和 md 的相互轉(zhuǎn)換.

圖片

簡單介紹一下我的文檔產(chǎn)品

圖片

Nocode/WEP 是我基于零代碼思想設(shè)計(jì)的一款 AI +  可視化文檔知識引擎.  它支持多模態(tài)內(nèi)容編輯, 類似飛書和Notion, 同時可以利用AI進(jìn)行輔助創(chuàng)作, 我們還能基于文檔一鍵生成CMS內(nèi)容站點(diǎn).

目前這款產(chǎn)品已經(jīng)開放, 大家可以免費(fèi)注冊使用.

體驗(yàn)地址: https://doc.dooring.vip

由于本文重點(diǎn)介紹MD引擎, 所以給大家介紹個大概即可, 如果大家想全面了解這款產(chǎn)品, 可以參考我往期的內(nèi)容:

• 支持可視化可配置，AI+文檔引擎推薦

實(shí)現(xiàn)將文檔導(dǎo)出為Markdown

由于 Nocode/WEP 的文檔每個塊的數(shù)據(jù)結(jié)構(gòu)是如下結(jié)構(gòu):

{
    "id": "2gTxw2-Zp5",
    "type": "header",
    "data": {
        "text": "Demo站點(diǎn)優(yōu)化",
        "level": 2
    }
}

但是導(dǎo)出為 MD 的結(jié)構(gòu), 需要適配MD的語法, 比如:

##  標(biāo)題
[H5-Dooring](https://dooring.vip)
> 引用內(nèi)容

所以我們就需要寫個MD轉(zhuǎn)換器, 來實(shí)現(xiàn) blocks流 到 MD文本 的轉(zhuǎn)換.

比如我要實(shí)現(xiàn) blocks 的圖片轉(zhuǎn) md 的圖片格式, 我需要一個工具函數(shù):

export function parseImageToMarkdown(blocks) {
  return `![${blocks.caption}](${blocks.file.url} "${blocks.caption}")`.concat('\n');
}

我們需要對文檔引擎的每一個塊組件做一個映射函數(shù), 最后封裝在MD解析引擎中, 來實(shí)現(xiàn)我們的blocks 到md的轉(zhuǎn)換, 這里給大家演示一下實(shí)現(xiàn)效果:

圖片

比如說上面我用 Nocode/WEP 做的一個圖文并茂的文檔, 我們點(diǎn)擊導(dǎo)出為MD按鈕, 來看看生成的md的效果:

## 最近上線了MD文件的導(dǎo)入和導(dǎo)出功能

這是一段文本,描述了一個<b>H5-Dooring</b>在<code class="inline-code">零代碼</code>中的應(yīng)用, 幫助我們輕松搭建專業(yè)級頁面.

下面是一個鏈接:

[H5網(wǎng)站制作平臺](https://dooring.vip "H5-Dooring是一款功能強(qiáng)大，專業(yè)可靠的H5可視化頁面配置解決方案，致力于提供一套簡單方便、專業(yè)可靠、無限可能的H5網(wǎng)站制作最佳實(shí)踐。")

這里再展示一個項(xiàng)目列表:

- 任務(wù)一 H5-Dooring
- 任務(wù)二 V6.Dooring
- 結(jié)束

### 子標(biāo)題展示(圖片案例)

![](https://cdn.dooring.cn/Fn-C3g5-j2_cmJXPqahXKkHF50ps "")

我要展示一個音頻:

<audio src="https://cdn.dooring.cn/llYlOJNTYNX8Ahwt8AKU3VjilfV3"></audio>

我要展示一個視頻呢?

<video src="https://fast.dooring.vip/system/%E9%A3%9E%E4%B9%A620230419-174032.mp4"></video>

我要用分割線分割:

---

導(dǎo)出的MD結(jié)構(gòu)還是非常友好的, 我們可以將MD 導(dǎo)入到其他平臺, 來實(shí)現(xiàn)跨平臺共享.

實(shí)現(xiàn)Markdown導(dǎo)入文檔系統(tǒng)

這一款就涉及到反解析了, 我們需要把 MD的字符串語法, 解析,分割,清洗成文檔接受的blocks 對象格式.

實(shí)現(xiàn)這一過程我們可以自己基于字符串結(jié)構(gòu)來寫一個解析器, 來將MD字符串轉(zhuǎn)譯為對象表示.

這里給大家展示一個我寫的將MD的表格語法轉(zhuǎn)化為可解析的對象表示, 如:

function getTableArr(markdownTable) {
  // 去除開頭的 "|" 和每行開頭的空格
  const rows = markdownTable.split('\n').map(row => row.replace(/^\s*\|/, '').trim());

  // 提取標(biāo)題行和數(shù)據(jù)行
  const header = rows[0].split('|');
  const data = rows.slice(1).map(row => row.split('|'));

  // 去除標(biāo)題和數(shù)據(jù)中的空字符串
  const headerClean = header.filter(item => item!== '');
  const dataClean = data.map(row => row.filter(item => item!== ''));

  return [headerClean,...dataClean]
}

這塊為了提高效率和穩(wěn)定性, 我們可以使用 remark 來輔助我們生成.

圖片

remark 是一個用于處理 Markdown 文檔的強(qiáng)大工具庫。

它可以用于將 Markdown 文檔轉(zhuǎn)換為其他格式，如 HTML，也可以進(jìn)行一些 Markdown 文檔的分析和處理。

一個簡單的案例:

const remark = require('remark');
const html = require('remark-html');

remark()
.use(html)
.process('這是一段 Markdown 文本\n\n# 標(biāo)題', (err, result) => {
  if (err) throw err;
  console.log(result.toString());
});

我在反解析引擎中使用了 remark 來實(shí)現(xiàn)將 md 字符串解析成有格式化的對象.

給大家看看我實(shí)現(xiàn)的效果:

圖片

由上圖可以發(fā)現(xiàn)我們導(dǎo)入的MD已經(jīng)可以完美展示到我們文檔里了.