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

11 months ago

1.1.0

11 months ago

1.3.3

10 months ago

1.3.2

10 months ago

1.3.1

10 months ago

1.3.0

10 months ago

1.2.1

10 months ago

1.0.3

11 months ago

1.0.2

12 months ago

1.0.1

12 months ago

1.0.0

1 year ago