原名：PDMarkdownKit，自
1.8.0版本起更名為 NanoMD
純 JavaScript 打造的現代化 Markdown 編輯器，專注效能與使用體驗。採用虛擬 DOM 技術，提供流暢的即時預覽與編輯體驗。
核心特色
極速編輯體驗
- 虛擬 DOM 智能更新，確保卓越效能
- 即時分屏預覽，所見即所得
- 智能滾動同步，無縫對應定位
- 針對大型文件優化，順暢零延遲
Markdown 進階支援
- 完整標準語法支援
- 擴展功能支援：
- 程式碼格式化與高亮
- 數學公式即時渲染
- 自動表格格式化
- 可勾選任務清單
- 快速引用區塊
多媒體整合能力
- YouTube、Vimeo 影片自動嵌入與預覽
- 智能圖片處理：
- 自動縮圖預覽
- 靈活的尺寸控制
- 多樣的對齊選項
- 響應式媒體支援
技術優勢
- 純 JavaScript 實現，無外部依賴
- 高效虛擬 DOM 實作
- 模組化架構設計
- 完整 ES Module 支援
文件
- 網站: nanomd.pardn.io
- 說明文件: nanomd.pardn.io/doc.html
- 線上編輯器: nanomd.pardn.io/live.html
安裝方式
從 npm 安裝
npm i @pardnchiu/nanomd
從 CDN 引入
引入 NanoMD 套件
<!-- 1.8.0 版本以上 -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.js"></script>
<!-- 1.6.0-1.7.1 版本 -->
<script src="https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js"></script>
Module 版本
// 1.8.0 版本以上
import { MDEditor, MDViewer } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.esm.js";
// 1.6.0-1.7.1 版本
import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.module.js";
// 1.5.2 版本以下
import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js";
使用方法
初始化 MDEditor 和 MDViewer
// 1.8.0 版本以上
// 統一使用: MDEditor, MDViewer
// 1.7.1 版本以下
// IIFE: PDMarkdownEditor, PDMarkdownViewer
// ESM: editor, viewer
const domEditor = new MDEditor({
id: "", // 指定元素取代元件
defaultContent: "", // 預設內容，初始顯示
hotKey: 1, // 啟用快捷鍵，預設為 1
preventRefresh: 0, // 防止頁面重整，預設值：0
tabPin: 0, // 1 | 0 | true | false
wrap: 1, // 1 | 0 | true | false
style: {
mode: "", // auto | light | dark, 預設： auto
fill: 1, // 隨父元素大小調整，預設值：1
fontFamily: "", // 預設：'Noto Sans TC', sans-serif
showRow: 0, // 顯示行數，預設：1
placeholder: {
text: "Content", // 預設：Type here ...
color: "#ff000080" // 預設：#0000ff1a
},
focus: {
backgroundColor: "#ff00001a", // 預設：#0000ffff
color: "#ff0000" // 預設：#bfbfbf
}
}
});
const domViewer = new MDViewer({
id: "", // 指定元素取代元件
emptyContent: "", // 預設內容，當編輯器為空時顯示
style: {
mode: "", // auto | light | dark, 預設： auto
fill: "", // 隨父元素大小調整，預設值：1 | true
fontFamily: "", // 預設：'Noto Sans TC', sans-serif
},
sync: {
editor: domEditor, // 關聯的編輯器
delay: 50, // 更新延遲，單位ms，預設 300
scrollSync: 1, // 與編輯器同步滾動，預設值：0 | false
},
hashtag: {
path: "?keyword=", // 標籤路徑，用於檢測 # 並轉換為Link
target: "_blank" // 標籤打開方式，預設 _blank
}
});
// 若無指定元件，需手動將播放器加入至 DOM 中
(...).appendChild(domEditor.body);
(...).appendChild(domViewer.body);
授權條款
本專案採用類 MIT 授權，但僅提供混淆後的程式碼：
- 與 MIT 相同：可自由使用、修改、再散布，包含商業用途
- 主要差異：預設僅提供混淆版程式碼，原始碼需另外購買
- 授權內容：必須保留原始版權聲明 (與 MIT 相同)
詳細條款與條件請參閱軟體使用協議。
開發者
邱敬幃 Pardn Chiu
- Email: dev@pardn.io
- Linkedin: linkedin.com/in/pardnchiu
©️ 2023 邱敬幃 Pardn Chiu
Top comments (0)