New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@pardnchiu/nanomd

Package Overview
Dependencies
Maintainers
0
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pardnchiu/nanomd - npm Package Compare versions

Comparing version 1.8.5 to 1.8.6

12

package.json
{
"name": "@pardnchiu/nanomd",
"version": "1.8.5",
"description": "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.",
"version": "1.8.6",
"description": "NanoMD is a lightweight Markdown editor based on pure JavaScript and native APIs, supporting real-time rendering, split-screen preview, code highlighting and export functions, making it an ideal Markdown tool.",
"main": "dist/NanoMD.js",
"module": "dist/NanoMD.esm.js",
"types": "src/interface.ts",
"scripts": {

@@ -30,4 +32,4 @@ "minify": "npx terser src/*.js src/function/*.js src/model/*.js -c -m -o dist/NanoMD.js --config-file terser.config.json --name-cache terser.cache.json && npx terser src/*.js src/function/*.js src/model/*.js -c -m -o dist/NanoMD.esm.js --config-file terser.config.json --name-cache terser.cache.json && echo 'export const editor = window.MDEditor; export const MDEditor = window.MDEditor; export const viewer = window.MDViewer; export const MDViewer = window.MDViewer;' >> dist/NanoMD.esm.js",

"javascript-library",
"real-time",
"lightweight"
"邱敬幃",
"pardnchiu"
],

@@ -39,3 +41,3 @@ "author": {

},
"license": "MIT",
"license": "Proprietary",
"bugs": {

@@ -42,0 +44,0 @@ "url": "https://github.com/pardnchiu/NanoMD/issues",

572

README.md

@@ -1,16 +0,15 @@

<img src="./static/image/logo.png" width=80>
<img src="https://nanomd.pardn.io/static/image/logo.png" width=80>
# NanoMD
# NanoMD: Lightweight Markdown Editor
*(Formerly known as PDMarkdownKit, renamed to NanoMD starting from version `1.8.0`)*
> [!NOTE]
> (Formerly known as PDMarkdownKit, renamed to NanoMD starting from version `1.8.0`)
> A pure JavaScript-based Markdown editor, built with native APIs, supports standard Markdown syntax with various extended features, including real-time preview, scroll synchronization, automatic detection of YouTube videos, and more.<br>
> Additionally, with its built-in virtual DOM technology, it updates only the modified parts, ensuring efficient rendering and smooth editing experiences, making it ideal for online editing scenarios.
> A modern Markdown editor built with pure JavaScript, focusing on performance and user experience. Leveraging virtual DOM technology to provide smooth real-time preview and editing experience.
![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444)
![](https://img.shields.io/github/size/pardnchiu/NanoMD/dist%2FNanoMD.js)
![](https://img.shields.io/github/license/pardnchiu/NanoMD)<br>
[![](https://img.shields.io/github/v/release/pardnchiu/NanoMD)](https://github.com/pardnchiu/NanoMD)
[![](https://img.shields.io/npm/v/@pardnchiu/nanomd)](https://www.npmjs.com/package/@pardnchiu/nanomd)
[![](https://img.shields.io/jsdelivr/npm/hw/@pardnchiu/nanomd)](https://www.jsdelivr.com/package/npm/@pardnchiu/nanomd)<br>
![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444)
![size](https://img.shields.io/github/size/pardnchiu/NanoMD/dist%2FNanoMD.js)<br>
[![npm](https://img.shields.io/npm/v/@pardnchiu/nanomd)](https://www.npmjs.com/package/@pardnchiu/nanomd)
[![download](https://img.shields.io/npm/dm/@pardnchiu/nanomd)](https://www.npmjs.com/package/@pardnchiu/nanomd)
[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/nanomd)](https://www.jsdelivr.com/package/npm/@pardnchiu/nanomd)<br>
[![](https://img.shields.io/badge/查閱-中文版本-ffffff)](https://github.com/pardnchiu/NanoMD/blob/main/README.zh.md)

@@ -20,476 +19,151 @@

- Separate editor and viewer modules with real-time preview and scroll synchronization support.
- Supports standard Markdown syntax, including headings, bold, italic, links, images, code blocks, etc.
- Extended features such as subscript/superscript syntax, image resizing, alignment, and automatic YouTube / Vimeo link detection with video embedding.
- Includes undo/redo functions, multiple hotkeys, and supports importing/exporting files in Markdown and HTML formats.
- Implements virtual DOM concepts for efficient rendering by updating the page on-demand.
- Integrated [Google Icon](https://fonts.google.com/icons) and [code-prettify](https://github.com/googlearchive/code-prettify) for syntax highlighting.
- Click here for a [preview](https://pardnchiu.github.io/NanoMD)。
### High-Performance Editing
- Smart virtual DOM updates for optimal performance
- Real-time split-screen preview with WYSIWYG experience
- Intelligent scroll synchronization
- Optimized for large documents with zero lag
## Installation
### Advanced Markdown Support
- Complete standard syntax support
- Extended features:
- Code formatting and syntax highlighting
- Real-time math formula rendering
- Automatic table formatting
- Checkable task lists
- Quick block quotes
- **Install via npm**
```bash
npm i @pardnchiu/nanomd
```
### Media Integration
- Automatic YouTube and Vimeo video embedding with previews
- Smart image handling:
- Automatic thumbnail generation
- Flexible size control
- Multiple alignment options
- Responsive media support
- **Include via CDN**
- **Include the `NanoMD` library**
```html
<!-- Version 1.8.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.js"></script>
### Technical Advantages
- Pure JavaScript implementation, no external dependencies
- Efficient virtual DOM implementation
- Modular architecture design
- Complete ES Module support
<!-- Version 1.6.0-1.7.1 -->
<script src="https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js"></script>
```
- **Module version**
```javascript
// Version 1.8.0 and above
import { MDEditor, MDViewer } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.esm.js";
## Documentation
// 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";
```
- Website: [nanomd.pardn.io](https://nanomd.pardn.io)
- Documentation: [nanomd.pardn.io/doc.html](https://nanomd.pardn.io/doc.html)
- Demo: [nanomd.pardn.io/live.html](https://nanomd.pardn.io/live.html)
## Usage
## Installation
- **Initialize `editor` and `viewer`**
```Javascript
// 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: "", // Default: PDMDEditor
defaultContent: "", // Default content to display initially
hotKey: 1, // Enable hotkeys, default: 1
preventRefresh: 0, // Prevent page refresh, default: 0
tabPin: 0, // 1 | 0 | true | false
wrap: 1, // 1 | 0 | true | false
style: {
mode: "", // auto | light | dark, default: auto
fill: 1, // Adjust size to parent element, default: 1
fontFamily: "", // Default: 'Noto Sans TC', sans-serif
showRow: 0, // Show line numbers, default: 1
placeholder: {
text: "Content", // Default: Type here ...
color: "#ff000080" // Default: #0000ff1a
},
focus: {
backgroundColor: "#ff00001a", // Default: #0000ffff
color: "#ff0000" // Default: #bfbfbf
}
}
});
const domViewer = new MDViewer({
id: "", // Default: PDMDViewer
emptyContent: "", // Default content when editor is empty
style: {
mode: "", // auto | light | dark, default: auto
fill: "", // Adjust size to parent element, default: 1 | true
fontFamily: "", // Default: 'Noto Sans TC', sans-serif
},
sync: {
editor: domEditor, // Associated editor
delay: 50, // Update delay in ms, default: 300
scrollSync: 1, // Synchronize scrolling with editor, default: 0 | false
},
hashtag: {
path: "?keyword=", // Path for hashtags, converting # to links
target: "_blank" // Target for hashtag links, default: _blank
}
});
// If no element is specified, the player must be manually added to the DOM
(...).appendChild(domEditor.body);
(...).appendChild(domViewer.body);
```
## Markdown Syntax Support
Supports standard Markdown syntax, including text styling, links, images, lists, tables, code blocks, and blockquotes. Additionally, extended features enhance functionality.
### Text Styling
<details>
<summary><strong>Standard Syntax</strong></summary>
| Syntax | Output |
| - | - |
| `# H1`<br>`H1\n===`<br>`<h1>H1</h1>` | <h1>H1</h1> |
| `## H2`<br>`H2\n---`<br>`<h2>H2</h2>` | <h2>H2</h2> |
| `### H3`<br>`<h3>H3</h3>` | <h3>H3</h3> |
| `#### H4`<br>`<h4>H4</h4>` | <h4>H4</h4> |
| `##### H5`<br>`<h5>H5</h5>` | <h5>H5</h5> |
| `###### H6`<br>`<h6>H6</h6>` | <h6>H6</h6> |
| `**Bold**`<br>`__Bold__`<br>`<b>Bold</b>`<br>`<strong>Bold</strong>` | <b>Bold</b> |
| `*Italic*`<br>`_Italic_`<br>`<i>Italic</i>`<br>`<em>Italic</em>` | <i>Italic</i> |
| `~~Strikethrough~~`<br>`<s>Strikethrough</s>` | <s>Strikethrough</s> |
| `<u>Underline</u>` | <u>Underline</u> |
| `<mark>Highlight</mark>` | <mark>Highlight</mark> |
| `x<sup>2</sup>` | x<sup>2</sup> |
| `H<sub>2</sub>O` | H<sub>2</sub>O |
</details>
<details>
<summary><strong>Extensions</strong></summary>
| Syntax | Output |
| - | - |
| `==Highlight==` | ==Highlight== |
| `x^2^` | x^2^ |
| `H~2~O` | H~2~O |
</details>
### Links
<details>
<summary><strong>Standard Syntax</strong></summary>
- Plain link: https://github.com/pardnchiu/NanoMD/
```
https://github.com/pardnchiu/NanoMD/
```
- Link with custom text: [Display text](https://github.com/pardnchiu/NanoMD/)
```
[Display text](https://github.com/pardnchiu/NanoMD/)
```
- Link with custom title: [Display text](https://github.com/pardnchiu/NanoMD/ "Link title")
```
[Display text](https://github.com/pardnchiu/NanoMD/ "Link title")
```
</details>
<details>
<summary><strong>Extensions</strong></summary>
- Auto-detect Email: dev@pardn.io
- Auto-detect YouTube videos: https://www.youtube.com/watch?v=O5O3yK8DJCc
- Auto-detect Vimeo videos: https://vimeo.com/458695734
</details>
### Images
<details>
<summary><strong>Standard Syntax</strong></summary>
- Image: [Image Source](https://pixabay.com/photos/corn-harvest-fall-thanksgiving-9135131/)
```
![](./static/image/corn-9135131_640.jpg)
```
![](./static/image/corn-9135131_640.jpg)
- Image with description: [Image Source](https://pixabay.com/photos/dog-irish-setter-mischievous-7128749/)
```
![Example image from Pixabay](./static/image/dog-7128749_640.jpg)
```
![Example image from Pixabay](./static/image/dog-7128749_640.jpg)
- Image with title: [Image Source](https://pixabay.com/photos/stilt-bird-animal-feathers-plumage-8593487/)
```
![](./static/image/stilt-8593487_640.jpg "Example image from Pixabay")
```
![](./static/image/stilt-8593487_640.jpg "Example image from Pixabay")
- Linked image: [Image Source](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)
```
[![](./static/image/hippopotamus-9147023_640.jpg)](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)
```
[![](./static/image/hippopotamus-9147023_640.jpg)](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)
</details>
<details>
<summary><strong>Extensions</strong></summary>
- Video: [Video Source](https://pixabay.com/videos/ocean-sea-wave-water-sunset-233867/)
```
![](./static/image/233867_tiny.mp4)
```
![](./static/image/233867_tiny.mp4)
- Image with size (width: 50%): [Image Source](https://pixabay.com/photos/flamingo-nature-bird-wildlife-9190160/)
```
![](./static/image/flamingo-9190160_640.jpg)(50%*)
```
![](./static/image/flamingo-9190160_640.jpg)(50%*)
</details>
### Lists
<details>
<summary><strong>Ordered List</strong></summary>
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
### Install via npm
```bash
npm i @pardnchiu/nanomd
```
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
```
</details>
### Include via CDN
<details>
<summary><strong>Unordered List</strong></summary>
#### Include the `NanoMD` library
```html
<!-- Version 1.8.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.js"></script>
- ul List 0
- ul List 0
- ul List 0
- ul List 1
- ul List 2
- ul List 3
- ul List 4
<!-- Version 1.6.0-1.7.1 -->
<script src="https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js"></script>
```
- ul List 0
- ul List 0
- ul List 0
- ul List 1
- ul List 2
- ul List 3
- ul List 4
```
</details>
#### Module version
```javascript
// Version 1.8.0 and above
import { MDEditor, MDViewer } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.esm.js";
<details>
<summary><strong>Mixed List</strong></summary>
// Version 1.6.0-1.7.1
import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.module.js";
- 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
// Version 1.5.2 and below
import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js";
```
- 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
```
</details>
## How to use
<details>
<summary><strong>Todo List</strong></summary>
### Initialize `editor` and `viewer`
```Javascript
// Version 1.8.0 and above
// Unified: MDEditor, MDViewer
- [ ] Item 1
- [x] Item 2
- [ ] Item 2-1
- [x] Item 2-2
// Version 1.7.1 and below
// IIFE: PDMarkdownEditor, PDMarkdownViewer
// ESM: editor, viewer
```
- [ ] Item 1
- [x] Item 2
- [ ] Item 2-1
- [x] Item 2-2
```
const domEditor = new MDEditor({
id: "", // Element to replace
defaultContent: "", // Default content to display initially
hotKey: 1, // Enable hotkeys, default: 1
preventRefresh: 0, // Prevent page refresh, default: 0
tabPin: 0, // 1 | 0 | true | false
wrap: 1, // 1 | 0 | true | false
style: {
mode: "", // auto | light | dark, default: auto
fill: 1, // Adjust size to parent element, default: 1
fontFamily: "", // Default: 'Noto Sans TC', sans-serif
showRow: 0, // Show line numbers, default: 1
placeholder: {
text: "Content", // Default: Type here ...
color: "#ff000080" // Default: #0000ff1a
},
focus: {
backgroundColor: "#ff00001a", // Default: #0000ffff
color: "#ff0000" // Default: #bfbfbf
}
}
});
</details>
const domViewer = new MDViewer({
id: "", // Element to replace
emptyContent: "", // Default content when editor is empty
style: {
mode: "", // auto | light | dark, default: auto
fill: "", // Adjust size to parent element, default: 1 | true
fontFamily: "", // Default: 'Noto Sans TC', sans-serif
},
sync: {
editor: domEditor, // Associated editor
delay: 50, // Update delay in ms, default: 300
scrollSync: 1, // Synchronize scrolling with editor, default: 0 | false
},
hashtag: {
path: "?keyword=", // Path for hashtags, converting # to links
target: "_blank" // Target for hashtag links, default: _blank
}
});
### Code Blocks
// If no element is specified, the player must be manually added to the DOM
(...).appendChild(domEditor.body);
(...).appendChild(domViewer.body);
<details>
<summary><strong>Standard Syntax</strong></summary>
```
- Single line: `#Code-1`
- Multi-line
```Language
#Code-2
#Code-2
#Code-2
```
## License
</details>
Similar to MIT License but provides obfuscated code only:
- Same as MIT: Free to use, modify and redistribute, including commercial use
- Main difference: Provides obfuscated code by default, source code available for purchase
- License terms: Must retain original copyright notice (same as MIT)
<details>
<summary><strong>Extensions</strong></summary>
For detailed terms and conditions, please see the [Software Usage Agreement](https://github.com/pardnchiu/NanoMD/blob/main/LICENSE).
- Four spaces indentation
#Code-3
#Code-3
#Code-3
</details>
### Blockquotes
<details>
<summary><strong>Standard Syntax</strong></summary>
> Quote level 1<br>
> <br>
>> Quote level 2
>>> Quote level 3
```
> Quote level 1<br>
> <br>
>> Quote level 2
>>> Quote level 3
```
</details>
<details>
<summary><strong>Extensions</strong></summary>
> [!NOTE]
> This is a NOTE
```
> [!NOTE]
> This is a NOTE
```
> [!TIP]
> This is a TIP
```
> [!TIP]
> This is a TIP
```
> [!IMPORTANT]
> This is IMPORTANT
```
> [!IMPORTANT]
> This is IMPORTANT
```
> [!WARNING]
> This is a WARNING
```
> [!WARNING]
> This is a WARNING
```
> [!CAUTION]
> This is a CAUTION
```
> [!CAUTION]
> This is a CAUTION
```
</details>
### Tables
<details>
<summary><strong>Standard Syntax</strong></summary>
- Table 1
| Left Align | Center Align | Right Align |
| :- | :-: | -: |
| Value | Value | Value |
| Value | Value | Value |
| Value | Value | Value |
| Value | Value | Value |
- Table 2
Left Align | Center Align | Right Align
:- | :-: | -:
Value | Value | Value
Value | Value | Value
Value | Value | Value
Value | Value | Value
</details>
### Horizontal Rules
`---` or `***`
<hr>
### Hashtag
```
#test1 #test2 #test3
```
#test1 #test2 #test3
## Shortcut
- Supported
- Copy: `cmd/ctrl` + `c`
- Cut: `cmd/ctrl` + `x`
- Paste: `cmd/ctrl` + `v`
- Undo: `cmd/ctrl` + `z`
- Redo: `cmd/ctrl` + `shift` + `z`
- Bold: `cmd/ctrl` + `b`
- Italic: `cmd/ctrl` + `i`
- Strikethrough: `cmd/ctrl` + `s`
- Underline: `cmd/ctrl` + `u`
- Highlight: `cmd/ctrl` + `m`
- Superscript: `cmd/ctrl` + `ArrowUp`
- Subscript: `cmd/ctrl` + `ArrowDown`
- Code block: `cmd/ctrl` + `k`
- Disabled
- Refresh: `cmd/ctrl` + `r` or `F5`
## Creator
<img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;" />
<img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;">
<h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>
[![](https://pardn.io/image/mail.svg)](mailto:dev@pardn.io) [![](https://skillicons.dev/icons?i=linkedin)](https://linkedin.com/in/pardnchiu)
<a href="mailto:dev@pardn.io" target="_blank">
<img src="https://pardn.io/image/email.svg" width="48" height="48">
</a> <a href="https://linkedin.com/in/pardnchiu" target="_blank">
<img src="https://pardn.io/image/linkedin.svg" width="48" height="48">
</a>
## License
This project is licensed under [MIT](https://github.com/pardnchiu/NanoMD/blob/main/LICENSE).
## Obtain Complete Source Code
[Contact me](mailto:dev@pardn.io) for the complete unobfuscated source code.<br>
Feel free to modify and use for commercial purposes with the following licensing options:
- Must retain `Powered by NanoMD` copyright notice: $7,500.
- Fully autonomous, no copyright notice required: $10,000.
***
©️ 2023 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)
©️ 2023 [邱敬幃 Pardn Chiu](https://pardn.io)
***

573

README.zh.md

@@ -1,491 +0,166 @@

# NanoMD
<img src="https://nanomd.pardn.io/static/image/logo.png" width=80>
*(原名：PDMarkdownKit，自 `1.8.0` 版本起更名為 NanoMD)*
# NanoMD: 輕量化 Markdown 編輯器
> 一個純 JavaScript 實現的 Markdown 編輯器，使用原生 API，支援標準 Markdown 語法並擴展多種功能，包括即時預覽、滾動同步、自動檢測 YouTube 視頻等功能。<br>
> 同時，內建虛擬 DOM 技術，僅更新變動部分，確保即時編輯中的高效渲染與流暢體驗，適合在線編輯場景。
> [!NOTE]
> (原名：PDMarkdownKit，自 `1.8.0` 版本起更名為 NanoMD)
![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444)
![](https://img.shields.io/github/size/pardnchiu/NanoMD/dist%2FNanoMD.js)
![](https://img.shields.io/github/license/pardnchiu/NanoMD)<br>
[![](https://img.shields.io/github/v/release/pardnchiu/NanoMD)](https://github.com/pardnchiu/NanoMD)
[![](https://img.shields.io/npm/v/@pardnchiu/nanomd)](https://www.npmjs.com/package/@pardnchiu/nanomd)
[![](https://img.shields.io/jsdelivr/npm/hw/@pardnchiu/nanomd)](https://www.jsdelivr.com/package/npm/@pardnchiu/nanomd)<br>
> 純 JavaScript 打造的現代化 Markdown 編輯器，專注效能與使用體驗。採用虛擬 DOM 技術，提供流暢的即時預覽與編輯體驗。
![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444)
![size](https://img.shields.io/github/size/pardnchiu/NanoMD/dist%2FNanoMD.js)<br>
[![npm](https://img.shields.io/npm/v/@pardnchiu/nanomd)](https://www.npmjs.com/package/@pardnchiu/nanomd)
[![download](https://img.shields.io/npm/dm/@pardnchiu/nanomd)](https://www.npmjs.com/package/@pardnchiu/nanomd)
[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/nanomd)](https://www.jsdelivr.com/package/npm/@pardnchiu/nanomd)<br>
[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/NanoMD/blob/main/README.md)
## 特點
## 核心特色
- 提供獨立的編輯與顯示模組，支持即時預覽和滾動同步。
- 支持標準的 Markdown 語法，包括標題、粗體、斜體、連結、圖片、代碼區塊等。
- 擴展功能如增加上下標語法，調整圖片大小、對齊，與偵測 Youtube / Vimeo 連結與影片插入。
- 提供撤銷與重做功能，以及多項快捷鍵，並支持 Markdown 和 HTML 格式的檔案匯入與匯出。
- 引入虛擬 DOM 概念，按需更新頁面，減少渲染所需資源。
- 集成 [Google Icon](https://fonts.google.com/icons) 圖示與 [code-prettify](https://github.com/googlearchive/code-prettify) 語法高亮。
- 點擊這裡 [預覽](https://pardnchiu.github.io/NanoMD)。
### 極速編輯體驗
- 虛擬 DOM 智能更新，確保卓越效能
- 即時分屏預覽，所見即所得
- 智能滾動同步，無縫對應定位
- 針對大型文件優化，順暢零延遲
## 安裝方式
### Markdown 進階支援
- 完整標準語法支援
- 擴展功能支援：
- 程式碼格式化與高亮
- 數學公式即時渲染
- 自動表格格式化
- 可勾選任務清單
- 快速引用區塊
- **從 npm 安裝**
```bash
npm i @pardnchiu/nanomd
```
### 多媒體整合能力
- YouTube、Vimeo 影片自動嵌入與預覽
- 智能圖片處理：
- 自動縮圖預覽
- 靈活的尺寸控制
- 多樣的對齊選項
- 響應式媒體支援
- **從 CDN 引入**
- **引入 `NanoMD` 套件**
```html
<!-- Version 1.8.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.js"></script>
### 技術優勢
- 純 JavaScript 實現，無外部依賴
- 高效虛擬 DOM 實作
- 模組化架構設計
- 完整 ES Module 支援
<!-- Version 1.6.0-1.7.1 -->
<script src="https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js"></script>
```
- **Module 版本**
```javascript
// 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";
```
- 網站: [nanomd.pardn.io](https://nanomd.pardn.io)
- 說明文件: [nanomd.pardn.io/doc.html](https://nanomd.pardn.io/doc.html)
- 線上編輯器: [nanomd.pardn.io/live.html](https://nanomd.pardn.io/live.html)
## 使用方法
## 安裝方式
- **初始化 `MDEditor` 和 `MDViewer`**
```Javascript
// 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 語法，包括字體、連結、圖片、列表、表格、代碼塊和引用等。此外，還包含擴展功能以增強功能性。
### 字體
<details>
<summary><strong>標準語法</strong></summary>
| 語法 | 輸出 |
| - | - |
| `# H1`<br>`H1\n===`<br>`<h1>H1</h1>` | <h1>H1</h1> |
| `## H2`<br>`H2\n---`<br>`<h2>H2</h2>` | <h2>H2</h2> |
| `### H3`<br>`<h3>H3</h3>` | <h3>H3</h3> |
| `#### H4`<br>`<h4>H4</h4>` | <h4>H4</h4> |
| `##### H5`<br>`<h5>H5</h5>` | <h5>H5</h5> |
| `###### H6`<br>`<h6>H6</h6>` | <h6>H6</h6> |
| `**粗體**`<br>`__粗體__`<br>`<b>粗體</b>`<br>`<strong>粗體</strong>` | <b>粗體</b> |
| `*斜體*`<br>`_斜體_`<br>`<i>斜體</i>`<br>`<em>斜體</em>` | <i>斜體</i> |
| `~~刪除線~~`<br>`<s>刪除線</s>` | <s>刪除線</s> |
| `<u>下劃線</u>` | <u>下劃線</u> |
| `<mark>標記</mark>` | <mark>標記</mark> |
| `x<sup>2</sup>` | x<sup>2</sup> |
| `H<sub>2</sub>O` | H<sub>2</sub>O |
</details>
<details>
<summary><strong>擴展</strong></summary>
| 語法 | 輸出 |
| - | - |
| `==標記==` | ==標記== |
| `x^2^` | x^2^ |
| `H~2~O` | H~2~O |
</details>
### 連結
<details>
<summary><strong>標準語法</strong></summary>
- 純連結: https://github.com/pardnchiu/NanoMD/
```
https://github.com/pardnchiu/NanoMD/
```
- 連結搭配自訂文字: [顯示文字](https://github.com/pardnchiu/NanoMD/)
```
[顯示文字](https://github.com/pardnchiu/NanoMD/)
```
- 連結搭配自訂標題: [顯示文字](https://github.com/pardnchiu/NanoMD/ "連結標題")
```
[顯示文字](https://github.com/pardnchiu/NanoMD/ "連結標題")
```
</details>
<details>
<summary><strong>擴展</strong></summary>
- 自動偵測 Email: dev@pardn.io
- 自動偵測 Youtube 影片: https://www.youtube.com/watch?v=O5O3yK8DJCc
- 自動偵測 Vimeo 影片: https://vimeo.com/458695734
</details>
### 圖片
<details>
<summary><strong>標準語法</strong></summary>
- 圖片: [Image Source](https://pixabay.com/photos/corn-harvest-fall-thanksgiving-9135131/)
```
![](./static/image/corn-9135131_640.jpg)
```
![](./static/image/corn-9135131_640.jpg)
- 圖片搭配描述: [Image Source](https://pixabay.com/photos/dog-irish-setter-mischievous-7128749/)
```
![Example image from Pixabay](./static/image/dog-7128749_640.jpg)
```
![Example image from Pixabay](./static/image/dog-7128749_640.jpg)
- 圖片搭配標題: [Image Source](https://pixabay.com/photos/stilt-bird-animal-feathers-plumage-8593487/)
```
![](./static/image/stilt-8593487_640.jpg "Example image from Pixabay")
```
![](./static/image/stilt-8593487_640.jpg "Example image from Pixabay")
- 圖片搭配連結: [Image Source](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)
```
[![](./static/image/hippopotamus-9147023_640.jpg)](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)
```
[![](./static/image/hippopotamus-9147023_640.jpg)](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)
</details>
<details>
<summary><strong>擴展</strong></summary>
- 影片: [Video Source](https://pixabay.com/videos/ocean-sea-wave-water-sunset-233867/)
```
![](./static/image/233867_tiny.mp4)
```
![](./static/image/233867_tiny.mp4)
- 圖片搭配尺寸: [Image Source](https://pixabay.com/photos/flamingo-nature-bird-wildlife-9190160/)
```
![](./static/image/flamingo-9190160_640.jpg)(50%*)
```
![](./static/image/flamingo-9190160_640.jpg)(50%*)
</details>
### 列表
<details>
<summary><strong>有序列表</strong></summary>
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
### 從 npm 安裝
```bash
npm i @pardnchiu/nanomd
```
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
```
</details>
### 從 CDN 引入
<details>
<summary><strong>無序列表</strong></summary>
#### 引入 `NanoMD` 套件
```html
<!-- 1.8.0 版本以上 -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.js"></script>
- ul List 0
- ul List 0
- ul List 0
- ul List 1
- ul List 2
- ul List 3
- ul List 4
<!-- 1.6.0-1.7.1 版本 -->
<script src="https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js"></script>
```
- ul List 0
- ul List 0
- ul List 0
- ul List 1
- ul List 2
- ul List 3
- ul List 4
```
</details>
#### Module 版本
```javascript
// 1.8.0 版本以上
import { MDEditor, MDViewer } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.esm.js";
<details>
<summary><strong>混合列表</strong></summary>
// 1.6.0-1.7.1 版本
import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.module.js";
- 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.5.2 版本以下
import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js";
```
- 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
```
</details>
## 使用方法
<details>
<summary><strong>待辦事項</strong></summary>
### 初始化 `MDEditor` 和 `MDViewer`
```Javascript
// 1.8.0 版本以上
// 統一使用: MDEditor, MDViewer
- [ ] 項目1
- [x] 項目2
- [ ] 項目1
- [x] 項目2
// 1.7.1 版本以下
// IIFE: PDMarkdownEditor, PDMarkdownViewer
// ESM: editor, viewer
```
- [ ] 項目1
- [x] 項目2
- [ ] 項目1
- [x] 項目2
```
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
}
}
});
</details>
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
}
});
### 代碼塊
<details>
<summary><strong>標準語法</strong></summary>
- 單行: `#Code-1`
- 多行
```
#Code-2
#Code-2
#Code-2
```
</details>
<details>
<summary><strong>擴展</strong></summary>
- 空白鍵*4
#Code-3
#Code-3
#Code-3
</details>
### 引用
<details>
<summary><strong>標準語法</strong></summary>
> 引用層 1<br>
> <br>
>> 引用層 2
>>> 引用層 3
// 若無指定元件，需手動將播放器加入至 DOM 中
(...).appendChild(domEditor.body);
(...).appendChild(domViewer.body);
```
> 引用層 1<br>
> <br>
>> 引用層 2
>>> 引用層 3
```
</details>
## 授權條款
<details>
<summary><strong>擴展</strong></summary>
本專案採用類 MIT 授權，但僅提供混淆後的程式碼：
- 與 MIT 相同：可自由使用、修改、再散布，包含商業用途
- 主要差異：預設僅提供混淆版程式碼，原始碼需另外購買
- 授權內容：必須保留原始版權聲明 (與 MIT 相同)
> [!NOTE]
> 這是NOTE
詳細條款與條件請參閱[軟體使用協議](https://github.com/pardnchiu/NanoMD/blob/main/LICENSE)。
```
> [!NOTE]
> 這是NOTE
```
> [!TIP]
> 這是TIP
```
> [!TIP]
> 這是TIP
```
> [!IMPORTANT]
> 這是IMPORTANT
```
> [!IMPORTANT]
> 這是IMPORTANT
```
> [!WARNING]
> 這是WARNING
```
> [!WARNING]
> 這是WARNING
```
> [!CAUTION]
> 這是CAUTION
```
> [!CAUTION]
> 這是CAUTION
```
</details>
### 表格
<details>
<summary><strong>標準語法</strong></summary>
- 表格1
| 向左對齊 | 置中對齊 | 向右對齊 |
| :- | :-: | -: |
| 值 | 值 | 值 |
| 值 | 值 | 值 |
| 值 | 值 | 值 |
| 值 | 值 | 值 |
- 表格2 (不包含兩側 `|`)
向左對齊 | 置中對齊 | 向右對齊
:- | :-: | -:
值 | 值 | 值
值 | 值 | 值
值 | 值 | 值
值 | 值 | 值
</details>
### 水平線
`---` 或 `***`
<hr>
### 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`
## 開發者
<img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;" />
<img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;">
<h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>
[![](https://pardn.io/image/mail.svg)](mailto:dev@pardn.io) [![](https://skillicons.dev/icons?i=linkedin)](https://linkedin.com/in/pardnchiu)
<a href="mailto:dev@pardn.io" target="_blank">
<img src="https://pardn.io/image/email.svg" width="48" height="48">
</a> <a href="https://linkedin.com/in/pardnchiu" target="_blank">
<img src="https://pardn.io/image/linkedin.svg" width="48" height="48">
</a>
## 授權條款
本專案依據 [MIT](https://github.com/pardnchiu/NanoMD/blob/main/LICENSE) 授權使用。
## 獲取完整原始碼
[聯絡我](mailto:dev@pardn.io) 獲取完整未混淆源碼<br>
可隨意修改、商業使用，根據需求選擇授權版本：
- 需保留 `Powered by NanoMD` 的版權聲明：$7,500
- 完全自主，無需添加版權聲明：$10,000
***
©️ 2023 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)
©️ 2023 [邱敬幃 Pardn Chiu](https://pardn.io)
***
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc