Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pardnchiu/pdmarkdownkit
(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.
https://github.com/pardnchiu/pdmarkdownkit
chiuchingwei javascript-library markdown-editor markdown-parser pardnchiu pardnltd
Last synced: about 1 month ago
JSON representation
(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.
- Host: GitHub
- URL: https://github.com/pardnchiu/pdmarkdownkit
- Owner: pardnchiu
- License: gpl-3.0
- Created: 2022-09-24T21:54:03.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-27T00:29:56.000Z (4 months ago)
- Last Synced: 2024-07-27T01:24:24.935Z (4 months ago)
- Topics: chiuchingwei, javascript-library, markdown-editor, markdown-parser, pardnchiu, pardnltd
- Language: JavaScript
- Homepage: https://pardnchiu.github.io/PDMarkdownKit/
- Size: 803 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/pardnchiu/PDRenderKit).
- Use [Font Awesome 6](https://fontawesome.com/v6/search) icons.
- Use [code-prettify](https://github.com/googlearchive/code-prettify) for code highlighting.
- Preview available [Here](https://pardnchiu.github.io/PDMarkdownKit).
## Creator
### 邱敬幃 Pardn Chiu
[](mailto:[email protected]) [](https://linkedin.com/in/pardnchiu)
## License
This source code project is licensed under the [GPL-3.0](https://github.com/pardnchiu/PDMarkdownKit/blob/main/LICENSE) license.
## How to use
- ### Add dependency `PDRenderKit`
```Html
```
- ### Directly download the package
```Shell
npm i pdmarkdownkit
```
- ### Or include via `cdn.jsdelivr.net`
```Javascript
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 → `Bold 2`
3. Bold 3 → `Bold 3`
- ### Italic
1. *Italic 1* → `*Italic 1*`
2. _Italic 2_ → `_Italic 2_`
3. Italic 3 → `Italic 3`
4. Italic 4 → `Italic 4`
- ### Strile Through
1. ~~Strile Through 1~~ → `~~Strile Through 1~~`
2. Strile Through 2 → `Strile Through 2`
- ### Under Line
1. [Not supported on GitHub, please preview [Here](https://pardnchiu.github.io/PDMarkdownKit)] → `__Under Line 1__`
2. [Not supported on GitHub, please preview [Here](https://pardnchiu.github.io/PDMarkdownKit)] → `Under Line 2`
- ### Mark
1. [Not supported on GitHub, please preview [Here](https://pardnchiu.github.io/PDMarkdownKit)] → `==Mark 1==`
2. Mark 2 → `Mark 2`
- ### Superscripts / Subscripts
1. [Not supported on GitHub, please preview [Here](https://pardnchiu.github.io/PDMarkdownKit)] → `x^2^`
2. [Not supported on GitHub, please preview [Here](https://pardnchiu.github.io/PDMarkdownKit)] → `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
1. ol List 1
1. 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](https://pardnchiu.github.io/PDMarkdownKit)]
## Link
- ### Link-1 https://github.com/pardnchiu/PDMarkdownKit/
- ### [Link-2](https://github.com/pardnchiu/PDMarkdownKit/)
- ### [Link-3](https://github.com/pardnchiu/PDMarkdownKit/ "Github")
## Image
- ### Image-1
- ### Image-2
- ### Image-3
- ### Image-4 (width: 50%, height: 360)
[Not supported on GitHub, please preview [Here](https://pardnchiu.github.io/PDMarkdownKit)]
- ### Image + Link
[](https://github.com/pardnchiu/PDMarkdownKit)
- ### Video
[Not supported on GitHub, please preview [Here](https://pardnchiu.github.io/PDMarkdownKit)]
## Hashtag
[Not supported on GitHub, please preview [Here](https://pardnchiu.github.io/PDMarkdownKit)]
## 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](https://www.linkedin.com/in/pardnchiu)