@pardnchiu/nanomd

NanoMD

(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.

Features

• 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 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 and code-prettify for syntax highlighting.
• Click here for a preview。

Installation

• Install via npm

  npm i @pardnchiu/ndnomd
  

• Include via CDN

  • Include the 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>
    

  • Module version

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

Usage

• Initialize 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);
  
  

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

Standard Syntax

Syntax	Output
# H1 H1\n=== <h1>H1</h1>	H1
## H2 H2\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>	Strikethrough
<u>Underline</u>	Underline
<mark>Highlight</mark>	Highlight
x<sup>2</sup>	x2
H<sub>2</sub>O	H2O

Extensions

Syntax	Output
==Highlight==	==Highlight==
x^2^	x^2^
H~2~O	H2O

Links

Standard Syntax

• Plain link: https://github.com/pardnchiu/NanoMD/

  https://github.com/pardnchiu/NanoMD/
  

• Link with custom text: Display text

  [Display text](https://github.com/pardnchiu/NanoMD/)
  

• Link with custom title: Display text

  [Display text](https://github.com/pardnchiu/NanoMD/ "Link title")
  

Extensions

• Auto-detect Email: [e-mail]
• Auto-detect YouTube videos: https://www.youtube.com/watch?v=O5O3yK8DJCc
• Auto-detect Vimeo videos: https://vimeo.com/458695734

Images

Standard Syntax

• Image: Image Source

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

  
• Image with description: Image Source

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

  
• Image with title: Image Source

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

  
• Linked image: Image Source

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

  

Extensions

• Video: Video Source

  ![](./static/image/233867_tiny.mp4)
  

  
• Image with size (width: 50%): Image Source

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

  (50%*)

Lists

Ordered List

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

Unordered List

• 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

Mixed List

• 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

Todo List

• Item 1
• Item 2
  • Item 2-1
  • Item 2-2

- [ ] Item 1
- [x] Item 2
    - [ ] Item 2-1
    - [x] Item 2-2

Code Blocks

Standard Syntax

• Single line: #Code-1
• Multi-line

  #Code-2
  #Code-2
  #Code-2
  

Extensions

• Four spaces indentation

  #Code-3 #Code-3 #Code-3

Blockquotes

Standard Syntax

Quote level 1

Quote level 2

Quote level 3

> Quote level 1<br>
> <br>
>> Quote level 2
>>> Quote level 3

Extensions

[!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

Tables

Standard Syntax

• 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

Horizontal Rules

--- or ***

---

Hashtag

#test1 #test2 #test3

#test1 #test2 #test3

Hashtag

• 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

邱敬幃 Pardn Chiu

License

This project is licensed under MIT.

Obtain Complete Source Code

Contact me for the complete unobfuscated source code.
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

---