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.
- 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.
This source code project is licensed under the GPL-3.0 license.
-
<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDRenderKit@[VERSION]/dist/PDRenderKit.js" copyright="Pardn Ltd"></script>
-
npm i pdmarkdownkit
-
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);
H1
===
H2
---
-
- Bold 1 →
**Bold 1**
- Bold 2 →
<b>Bold 2</b>
- Bold 3 →
<strong>Bold 3</strong>
- Bold 1 →
-
- Italic 1 →
*Italic 1*
- Italic 2 →
_Italic 2_
- Italic 3 →
<i>Italic 3</i>
- Italic 4 →
<em>Italic 4</em>
- Italic 1 →
-
Strile Through 1→~~Strile Through 1~~
Strile Through 2→<s>Strile Through 2</s>
-
- [Not supported on GitHub, please preview Here] →
==Mark 1==
- Mark 2 →
<mark>Mark 2</mark>
- [Not supported on GitHub, please preview Here] →
---
↓
***
↓
Blockquote-1
Blockquote-2
Blockquote-3
Title | Title |
---|---|
Value | Value |
Value | Value |
Value | Value |
Value | Value |
-
- ol List 0
- ol List 0
- ol List 0
- ol List 1
- ol List 2
- ol List 3
- ol List 4
- ol List 3
- ol List 2
- ol List 1
-
- ul List 0
- ul List 0
- ul List 0
- ul List 1
- ul List 2
- ul List 3
- ul List 4
- ul List 3
- ul List 2
- ul List 1
-
- ul List 0
- ul List 0
- ul List 0
- ol List 1
- ol List 1
- ol List 1
- ul List 2
- ul List 2
- ul List 2
- ol List 3
- ul List 4
- ol List 3
-
#Code-1
-
#Code-2 #Code-2 #Code-2
- [Not supported on GitHub, please preview Here]
[Not supported on GitHub, please preview Here]
- 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
- Copy:
- Disabled
- Refresh:
cmd/ctrl
+r
orF5
- Refresh:
All translations powered by ChatGPT
©️ 2023 邱敬幃 Pardn Chiu