DEV Community

Cover image for NanoMD: 輕量化 Markdown 編輯器
邱敬幃 Pardn Chiu
邱敬幃 Pardn Chiu

Posted on

1

NanoMD: 輕量化 Markdown 編輯器

原名:PDMarkdownKit,自 1.8.0 版本起更名為 NanoMD
純 JavaScript 打造的現代化 Markdown 編輯器,專注效能與使用體驗。採用虛擬 DOM 技術,提供流暢的即時預覽與編輯體驗。

核心特色

極速編輯體驗

  • 虛擬 DOM 智能更新,確保卓越效能
  • 即時分屏預覽,所見即所得
  • 智能滾動同步,無縫對應定位
  • 針對大型文件優化,順暢零延遲

Markdown 進階支援

  • 完整標準語法支援
  • 擴展功能支援:
    • 程式碼格式化與高亮
    • 數學公式即時渲染
    • 自動表格格式化
    • 可勾選任務清單
    • 快速引用區塊

多媒體整合能力

  • YouTube、Vimeo 影片自動嵌入與預覽
  • 智能圖片處理:
    • 自動縮圖預覽
    • 靈活的尺寸控制
    • 多樣的對齊選項
  • 響應式媒體支援

技術優勢

  • 純 JavaScript 實現,無外部依賴
  • 高效虛擬 DOM 實作
  • 模組化架構設計
  • 完整 ES Module 支援

文件

安裝方式

從 npm 安裝

npm i @pardnchiu/nanomd
Enter fullscreen mode Exit fullscreen mode

從 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>
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

使用方法

初始化 MDEditorMDViewer

// 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);
Enter fullscreen mode Exit fullscreen mode

授權條款

本專案採用類 MIT 授權,但僅提供混淆後的程式碼:

  • 與 MIT 相同:可自由使用、修改、再散布,包含商業用途
  • 主要差異:預設僅提供混淆版程式碼,原始碼需另外購買
  • 授權內容:必須保留原始版權聲明 (與 MIT 相同)

詳細條款與條件請參閱軟體使用協議

開發者

邱敬幃 Pardn Chiu


©️ 2023 邱敬幃 Pardn Chiu

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay