PDMarkdownKit (JavaScript Library)

PDMarkdownKit is a lightweight Markdown editor and viewer library based on JavaScript. It offers rich features to edit and preview Markdown content in real-time.

Feature

• Provide standalone editor and viewer modules, supporting real-time preview and scroll synchronization.
• Support various Markdown syntax, including headings, bold, italic, links, images, code blocks, etc.
• Offer undo and redo functionality, and support file import and export (.md and .html formats).
• Rendered using PDRenderKit.
• Use Font Awesome 6 icons.
• Use code-prettify for code highlighting.
• Preview available Here.

Creator

邱敬幃 Pardn Chiu

License

This source code project is licensed under the GPL-3.0 license.

How to use

• Add dependency PDRenderKit

  <script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDRenderKit@[VERSION]/dist/PDRenderKit.js" copyright="Pardn Ltd"></script>

• Directly download the package

  npm i pdmarkdownkit

• Or include via cdn.jsdelivr.net

  import { editor,  iewer } from "https://cdn.jsdelivr.net/gh/pardnchiu/PDMarkdownKit@[VERSION]/dist/PDMarkdownKit.js";
  
  const elm_editor = new editor({
      id: "",                             // Default PDMDEditor
      placeholder: "Content",             // Default Type here ..
      placeholderColor: "#ff000080",      // Default #0000ff1a
      focusBackgroundColor: "#ff00001a",  // Default #0000ffff
      focusTextColor: "#ff0000",          // Default bfbfbf
      showRow: 1,                         // Show number of rows, default 1
      fillMode: 1,                        // Fill mode, resizes with parent element, default 1
      preventRefresh: 0                   // Prevent refresh, default 0
  });
  
  const elm_viewer = new viewer({
      id: "",                 // Default PDMDViewer
      pre: "",                // Default content. Displayed when PDEditor is empty
      delay: 50,              // Update delay, default 300ms, minimum 1
      editor: elm_editor,     // Link to editor
      scrollSync: 1,          // Synchronize scrolling with editor
      tagPath: "?keyword=",   // Hashtag path, required to detect hashtags
      tagTarget: "_blank",    // Open hashtags in, default _blank
      fillMode: 1             // Fill mode, resizes with parent element, default 1
  });
  
  // Add elements to the view
  {DOM}.appendChild(elm_editor.body);
  {DOM}.appendChild(elm_viewer.body);
  
  // Initialize editor and viewer.
  elm_editor.init(pre: string);
  elm_viewer.init(pre: string);

Heading

H1

H1
===

H2

H2
---

• H1 → # H1

• H2 → ## H2

• H3 → ### H3

• H4 → #### H4

• H5 → ##### H5

• H6 → ##### H6

Font Style

• Bold

  1. Bold 1 → **Bold 1**
  2. Bold 2 → <b>Bold 2</b>
  3. Bold 3 → <strong>Bold 3</strong>

• Italic

  1. Italic 1 → *Italic 1*
  2. Italic 2 → _Italic 2_
  3. Italic 3 → <i>Italic 3</i>
  4. Italic 4 → <em>Italic 4</em>

• Strile Through

  1. ~~Strile Through 1~~ → ~~Strile Through 1~~
  2. Strile Through 2 → <s>Strile Through 2</s>

• Under Line

  1. [Not supported on GitHub, please preview Here] → __Under Line 1__
  2. [Not supported on GitHub, please preview Here] → <u>Under Line 2</u>

• Mark

  1. [Not supported on GitHub, please preview Here] → ==Mark 1==
  2. Mark 2 → <mark>Mark 2</mark>

• Superscripts / Subscripts

  1. [Not supported on GitHub, please preview Here] → x^2^
  2. [Not supported on GitHub, please preview Here] → H~2~O

Horizontal Rule

• --- ↓

• *** ↓

Blockquote

Blockquote-1

Blockquote-2

Blockquote-3

Table

| Title | Title | | - | - | | Value | Value | | Value | Value | | Value | Value | | Value | Value |

List

• 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

• Unordered List

  • 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

Code Block

• inline:

  #Code-1

• Block:

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

• Block by Space*4:

  [Not supported on GitHub, please preview Here]

Link

• Link-1 https://github.com/pardnchiu/PDMarkdownKit/

• Link-2

• Link-3

Image

• Image-1

  

• Image-2

  

• Image-3

  

• Image-4 (width: 50%, height: 360)

  [Not supported on GitHub, please preview Here]

• Image + Link

  

• Video

  [Not supported on GitHub, please preview Here]

Hashtag

[Not supported on GitHub, please preview Here]

Shortcut Keys

• 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
  • Mark: cmd/ctrl + m
  • Superscript: cmd/ctrl + ArrowUp
  • Subscript: cmd/ctrl + ArrowDown
  • Code block: cmd/ctrl + k
• Disabled
  • Refresh: cmd/ctrl + r or F5

All translations powered by ChatGPT

©️ 2023 邱敬幃 Pardn Chiu