@pardnchiu/nanomd
Advanced tools
NanoMD is a lightweight Markdown editor and viewer library based on JavaScript. It offers rich features to edit and preview Markdown content in real-time.
(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.
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.
Install via npm
npm i @pardnchiu/nanomd
Include via CDN
NanoMD library
<!-- 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>
// 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";
editor and viewer
// Version 1.8.0 and above
// Unified: MDEditor, MDViewer
// Version 1.7.1 and below
// IIFE: PDMarkdownEditor, PDMarkdownViewer
// ESM: editor, viewer
const domEditor = new PDMarkdownEditor({
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 PDMarkdownViewer({
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);
Supports standard Markdown syntax, including text styling, links, images, lists, tables, code blocks, and blockquotes. Additionally, extended features enhance functionality.
| Syntax | Output |
|---|---|
# 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 |
**Bold**__Bold__<b>Bold</b><strong>Bold</strong> | Bold |
*Italic*_Italic_<i>Italic</i><em>Italic</em> | Italic |
~~Strikethrough~~<s>Strikethrough</s> | |
<u>Underline</u> | Underline |
<mark>Highlight</mark> | Highlight |
x<sup>2</sup> | x2 |
H<sub>2</sub>O | H2O |
| Syntax | Output |
|---|---|
==Highlight== | ==Highlight== |
x^2^ | x^2^ |
H~2~O | H |
https://github.com/pardnchiu/NanoMD/
[Display text](https://github.com/pardnchiu/NanoMD/)
[Display text](https://github.com/pardnchiu/NanoMD/ "Link title")
[](https://pixabay.com/photos/hippopotamus-hippo-baby-hippo-9147023/)
(50%*)
(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
- 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
1. ol List 1
1. ol List 1
- ul List 2
- ul List 2
- ul List 2
1. ol List 3
- ul List 4
- [ ] Item 1
- [x] Item 2
- [ ] Item 2-1
- [x] Item 2-2
#Code-1#Code-2
#Code-2
#Code-2
Four spaces indentation
#Code-3 #Code-3 #Code-3
Quote level 1
Quote level 2
Quote level 3
> Quote level 1<br>
> <br>
>> Quote level 2
>>> Quote level 3
[!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
| Left Align | Center Align | Right Align |
|---|---|---|
| Value | Value | Value |
| Value | Value | Value |
| Value | Value | Value |
| Value | Value | Value |
| Left Align | Center Align | Right Align |
|---|---|---|
| Value | Value | Value |
| Value | Value | Value |
| Value | Value | Value |
| Value | Value | Value |
--- or ***
#test1 #test2 #test3
#test1 #test2 #test3
cmd/ctrl + ccmd/ctrl + xcmd/ctrl + vcmd/ctrl + zcmd/ctrl + shift + zcmd/ctrl + bcmd/ctrl + icmd/ctrl + scmd/ctrl + ucmd/ctrl + mcmd/ctrl + ArrowUpcmd/ctrl + ArrowDowncmd/ctrl + kcmd/ctrl + r or F5
This project is licensed under MIT.
Contact me for the complete unobfuscated source code.
Feel free to modify and use for commercial purposes with the following licensing options:
Powered by NanoMD copyright notice: $7,500.©️ 2023 邱敬幃 Pardn Chiu
FAQs
NanoMD is a lightweight Markdown editing and viewing library built on pure JavaScript and native APIs. Can be easily embedded into websites, offers rich features, and supports real-time previewing.
The npm package @pardnchiu/nanomd receives a total of 64 weekly downloads. As such, @pardnchiu/nanomd popularity was classified as not popular.
We found that @pardnchiu/nanomd demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.