(JavaScript Library) A pure JavaScript Markdown toolkit featuring an editor and viewer with real-time preview support. Designed for easy embedding in websites. Developed by 邱敬幃 Pardn Chiu.
GPL-3.0 License
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.
This source code project is licensed under the GPL-3.0 license.
PDRenderKit
<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDRenderKit@[VERSION]/dist/PDRenderKit.js" copyright="Pardn Ltd"></script>
npm i pdmarkdownkit
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);
H1
===
H2
---
# H1
## H2
### H3
#### H4
##### H5
##### H6
**Bold 1**
<b>Bold 2</b>
<strong>Bold 3</strong>
*Italic 1*
_Italic 2_
<i>Italic 3</i>
<em>Italic 4</em>
~~Strile Through 1~~
<s>Strile Through 2</s>
==Mark 1==
<mark>Mark 2</mark>
---
↓***
↓Blockquote-1
Blockquote-2
Blockquote-3
Title | Title |
---|---|
Value | Value |
Value | Value |
Value | Value |
Value | Value |
#Code-1
#Code-2
#Code-2
#Code-2
[Not supported on GitHub, please preview Here]
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
cmd/ctrl
+ k
cmd/ctrl
+ r
or F5
All translations powered by ChatGPT
©️ 2023 邱敬幃 Pardn Chiu