1.8.2 • Published 8 months ago

pdmarkdownkit v1.8.2

Weekly downloads
-
License
MIT
Repository
github
Last release
8 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";

使用方法

  • 初始化 MDEditor 和 MDViewer

    // 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

markdownmarkdown-editormarkdown-viewermarkdown-parserjavascript-libraryreal-timelightweight
1.8.2

8 months ago

1.8.1

8 months ago

1.8.0

8 months ago

1.7.1

8 months ago

1.7.0

8 months ago

1.5.2

9 months ago

1.6.0

9 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