@pardnchiu/nanomd

v1.8.5

Published

a month ago

NanoMD is a free, open-source, lightweight Markdown editor based on JavaScript. It supports real-time rendering, split-screen preview, code highlighting, and export features, making it an ideal Markdown tool.

Downloads

453

0High
0Medium
0Low

pardnchiu

markdown markdown-editor markdown-viewer markdown-parser javascript-library real-time lightweight

NanoMD

(原名：PDMarkdownKit，自 1.8.0 版本起更名為 NanoMD)

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

特點

提供獨立的編輯與顯示模組，支持即時預覽和滾動同步。
支持標準的 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: domEditor, // 關聯的編輯器
        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>O | H2O |

| 語法 | 輸出 | | - | - | | ==標記== | ==標記== | | x^2^ | x^2^ | | H~2~O | H~2~O |

連結

純連結: https://github.com/pardnchiu/NanoMD/
```
https://github.com/pardnchiu/NanoMD/
```

連結搭配自訂文字: 顯示文字

[顯示文字](https://github.com/pardnchiu/NanoMD/)

連結搭配自訂標題: 顯示文字

[顯示文字](https://github.com/pardnchiu/NanoMD/ "連結標題")

自動偵測 Email: [email protected]
自動偵測 Youtube 影片: https://www.youtube.com/watch?v=O5O3yK8DJCc
自動偵測 Vimeo 影片: https://vimeo.com/458695734

圖片

圖片: Image Source

![](./static/image/corn-9135131_640.jpg)

圖片搭配描述: Image Source

![Example image from Pixabay](./static/image/dog-7128749_640.jpg)

圖片搭配標題: Image Source

![](./static/image/stilt-8593487_640.jpg "Example image from Pixabay")

圖片搭配連結: Image Source

[![](./static/image/hippopotamus-9147023_640.jpg)](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)

影片: Video Source
```
![](./static/image/233867_tiny.mp4)
```

圖片搭配尺寸: Image Source

![](./static/image/flamingo-9190160_640.jpg)(50%*)

(50%*)

列表

ol List 0
ol List 0
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
[x] 項目2
- [ ] 項目1
- [x] 項目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

開發者

授權條款

本專案依據 MIT 授權使用。

獲取完整原始碼

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme