HTML 輸出
最後更新
AST.html() 把 Parse() 的結果轉成 HTML 字串；本頁說明輸出的結構與 class，以及它與 JSON AST 的分工。用法
- const html = MDParser.Parse(markdown).html();
- container.innerHTML = html;
html() 不需要 DOM，可在 Node.js、Worker 產生 HTML；放進頁面後再呼叫 Refresh() 渲染圖表與數學式，見 依賴與 Refresh。輸出結構
| 節點 | HTML |
|---|---|
| 段落 | <span class="md-line"> |
| 標題 | <span class="md-h1">～<span class="md-h6"> |
| 空行 | <br> |
| 粗體 | <span class="md-bold">；其餘行內樣式使用 <em>、<del>、<mark>、<sub>、<sup> |
| 引言／提示框 | <blockquote class="md-quote">；提示框加上 md-alert md-alert-{tag} 與 md-alert-title |
| 清單 | <ul class="md-list">／<ol class="md-list">，任務項目為 <li class="md-task"> |
| 表格 | <div class="md-table-wrap"><table class="md-table"> |
| 程式碼區塊 | <pre class="prettyprint" name="{lang}">，每行一個 <li>，附 <button class="copy"> |
| mermaid／math／chartjs | md-mermaid／md-latex／md-chart 外殼，內含備用的程式碼區塊 |
| 連結 | <a class="md-link" target="_blank" rel="noopener">；圖片與影片為 md-img，YouTube／Vimeo 附 md-embed |
| 註腳 | md-footnote-ref 與 md-footnotes |
完整樣式見 樣式主題。
與 JSON AST 的分工
| 需求 | 使用 |
|---|---|
| 在網頁或 SSR 顯示 | html() |
| 交給 iOS、Flutter 等原生渲染器 | JSON.stringify(ast)，渲染器需自行開發 |
| 檢查或改寫內容後再輸出 | 直接操作 AST 陣列，再呼叫 html() |
- <div id="out" class="nanomd"></div>
- <script>
- const ast = MDParser.Parse("# Title\n\n> [!NOTE]\n> Edited before output.");
- ast[0].children.push({ type: "text", value: " (edited)" });
- document.getElementById("out").innerHTML = ast.html();
- console.log(ast.html());
- </script>