1.8.2 • Published 7 months ago

pdmarkdownkit v1.8.2

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

NanoMD

(原名:PDMarkdownKit,自 1.8.0 版本起更名為 NanoMD)

一個純 JavaScript 實現的 Markdown 編輯器,使用原生 API,支援標準 Markdown 語法並擴展多種功能,包括即時預覽、滾動同步、自動檢測 YouTube 視頻等功能。 同時,內建虛擬 DOM 技術,僅更新變動部分,確保即時編輯中的高效渲染與流暢體驗,適合在線編輯場景。

npm.io npm.io npm.io npm.io npm.io npm.io npm.io

特點

  • 提供獨立的編輯與顯示模組,支持即時預覽和滾動同步。
  • 支持標準的 Markdown 語法,包括標題、粗體、斜體、連結、圖片、代碼區塊等。
  • 擴展功能如增加上下標語法,調整圖片大小、對齊,與偵測 Youtube / Vimeo 連結與影片插入。
  • 提供撤銷與重做功能,以及多項快捷鍵,並支持 Markdown 和 HTML 格式的檔案匯入與匯出。
  • 引入虛擬 DOM 概念,按需更新頁面,減少渲染所需資源。
  • 集成 Google Icon 圖示與 code-prettify 語法高亮。
  • 點擊這裡 預覽

安裝方式

  • 從 npm 安裝

    npm i @pardnchiu/nanomd
  • 從 CDN 引入

    • 引入 NanoMD 套件

      <!-- Version 1.8.0 and above -->
      <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.js"></script>
      
      <!-- Version 1.6.0-1.7.1 -->
      <script src="https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js"></script>
    • Module 版本

      // Version 1.8.0 and above
      import { MDEditor, MDViewer } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.esm.js";
      
      // Version 1.6.0-1.7.1
      import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.module.js";
      
      // Version 1.5.2 and below
      import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js";

使用方法

  • 初始化 MDEditorMDViewer

    // Version 1.8.0 and above
    // Unified: MDEditor, MDViewer
    
    // Version 1.7.1 and below
    // 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: elm_editor, // 關聯的編輯器
            delay: 50,          // 更新延遲,單位ms,預設 300
            scrollSync: 1,      // 與編輯器同步滾動,預設值:0 | false
        },
        hashtag: {
            path: "?keyword=",  // 標籤路徑,用於檢測 # 並轉換為Link
            target: "_blank"    // 標籤打開方式,預設 _blank
        }
    });
    
    // 若無指定元件,需手動將播放器加入至 DOM 中
    (...).appendChild(domEditor.body);
    (...).appendChild(domViewer.body);

Markdown 語法支持

支持標準 Markdown 語法,包括字體、連結、圖片、列表、表格、代碼塊和引用等。此外,還包含擴展功能以增強功能性。

字體

語法輸出
# H1H1\n===<h1>H1</h1>H1
## H2H2\n---<h2>H2</h2>H2
### H3<h3>H3</h3>H3
#### H4<h4>H4</h4>H4
##### H5<h5>H5</h5>H5
###### H6<h6>H6</h6>H6
**粗體**__粗體__<b>粗體</b><strong>粗體</strong>粗體
*斜體*_斜體_<i>斜體</i><em>斜體</em>斜體
~~刪除線~~<s>刪除線</s>刪除線
<u>下劃線</u>下劃線
<mark>標記</mark>標記
x<sup>2</sup>x2
H<sub>2</sub>OH2O
語法輸出
==標記====標記==
x^2^x^2^
H~2~OH~2~O

連結

圖片

  • 圖片: Image Source
    ![](./static/image/corn-9135131_640.jpg)
    npm.io
  • 圖片搭配描述: Image Source
    ![Example image from Pixabay](./static/image/dog-7128749_640.jpg)
    Example image from Pixabay
  • 圖片搭配標題: Image Source
    ![](./static/image/stilt-8593487_640.jpg "Example image from Pixabay")
    npm.io
  • 圖片搭配連結: Image Source
    [![](./static/image/hippopotamus-9147023_640.jpg)](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)
    npm.io
  • 影片: Video Source
    ![](./static/image/233867_tiny.mp4)
    npm.io
  • 圖片搭配尺寸: Image Source
    ![](./static/image/flamingo-9190160_640.jpg)(50%*)
    npm.io(50%*)

列表

  1. ol List 0
  2. ol List 0
  3. ol List 0
    1. ol List 1
      1. ol List 2
        1. ol List 3
          1. ol List 4
1. ol List 0
2. ol List 0
3. ol List 0
    1. ol List 1
        1. ol List 2
            1. ol List 3
                1. ol List 4
  • ul List 0
  • ul List 0
  • ul List 0
    • ul List 1
      • ul List 2
        • ul List 3
          • ul List 4
- ul List 0
- ul List 0
- ul List 0
    - ul List 1
        - ul List 2
            - ul List 3
                - ul List 4
  • ul List 0
  • ul List 0
  • ul List 0
    1. ol List 1
    2. ol List 1
    3. ol List 1
      • ul List 2
      • ul List 2
      • ul List 2
        1. ol List 3
          • ul List 4
- ul List 0
- ul List 0
- ul List 0
    1. ol List 1
    1. ol List 1
    1. ol List 1
        - ul List 2
        - ul List 2
        - ul List 2
            1. ol List 3
                - ul List 4
  • 項目1
  • 項目2
    • 項目1
    • 項目2
- [ ] 項目1
- [x] 項目2
    - [ ] 項目1
    - [x] 項目2

代碼塊

  • 單行: #Code-1
  • 多行
    #Code-2
    #Code-2
    #Code-2
  • 空白鍵*4

    #Code-3 #Code-3 #Code-3

引用

引用層 1

引用層 2

引用層 3

> 引用層 1<br>
> <br>
>> 引用層 2
>>> 引用層 3

!NOTE 這是NOTE

> [!NOTE]
> 這是NOTE

!TIP 這是TIP

> [!TIP]
> 這是TIP

!IMPORTANT 這是IMPORTANT

> [!IMPORTANT]
> 這是IMPORTANT

!WARNING 這是WARNING

> [!WARNING]
> 這是WARNING

!CAUTION 這是CAUTION

> [!CAUTION]
> 這是CAUTION

表格

  • 表格1 | 向左對齊 | 置中對齊 | 向右對齊 | | :- | :-: | -: | | 值 | 值 | 值 | | 值 | 值 | 值 | | 值 | 值 | 值 | | 值 | 值 | 值 |
  • 表格2 (不包含兩側 |) 向左對齊 | 置中對齊 | 向右對齊 :- | :-: | -: 值 | 值 | 值 值 | 值 | 值 值 | 值 | 值 值 | 值 | 值

水平線

---***

Hashtag

#test1 #test2 #test3

#test1 #test2 #test3

快捷鍵

  • 支持
    • 複製: cmd/ctrl + c
    • 剪下: cmd/ctrl + x
    • 貼上: cmd/ctrl + v
    • 撤銷: cmd/ctrl + z
    • 重做: cmd/ctrl + shift + z
    • 粗體: cmd/ctrl + b
    • 斜體: cmd/ctrl + i
    • 刪除線: cmd/ctrl + s
    • 下劃線: cmd/ctrl + u
    • 標記: cmd/ctrl + m
    • 上標: cmd/ctrl + ArrowUp
    • 下標: cmd/ctrl + ArrowDown
    • 代碼塊k: cmd/ctrl + k
  • 禁用
    • 重新整理: cmd/ctrl + r or F5

開發者

npm.io npm.io

授權條款

本專案依據 MIT 授權使用。

獲取完整原始碼

聯絡我 獲取完整未混淆源碼 可隨意修改、商業使用,根據需求選擇授權版本:

  • 需保留 Powered by NanoMD 的版權聲明:$7,500
  • 完全自主,無需添加版權聲明:$10,000

©️ 2023 邱敬幃 Pardn Chiu


1.8.2

7 months ago

1.8.1

7 months ago

1.8.0

7 months ago

1.7.1

8 months ago

1.7.0

8 months ago

1.5.2

9 months ago

1.6.0

8 months ago

1.5.1

9 months ago

1.5.0

9 months ago

1.4.3

9 months ago

1.3.4

9 months ago

1.4.2

9 months ago

1.4.1

9 months ago

1.4.0

9 months ago

1.1.1

10 months ago

1.1.0

10 months ago

1.3.3

9 months ago

1.3.2

9 months ago

1.3.1

9 months ago

1.3.0

9 months ago

1.2.1

9 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

12 months ago