pdmarkdownkit
v1.6.0
Published
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.
Downloads
727
Maintainers
Readme
PDMarkdownKit (JavaScript)
一款輕量化的 Markdown 編輯器,提供方便導導入網站的編輯與顯示模組,支持編輯和即時預覽內容。
特點
- 提供獨立的編輯與顯示模組,支持即時預覽和滾動同步。
- 支持標準的 Markdown 語法,包括標題、粗體、斜體、連結、圖片、代碼區塊等。
- 擴展功能如增加上下標語法,調整圖片大小、對齊,以偵測 Youtube 連結與影片插入。
- 提供撤銷與重做功能,以及多項快捷鍵,並支持 Markdown 和 HTML 格式的檔案匯入與匯出。
- 集成 Font Awesome 6 圖示。
- 依賴 code-prettify 進行代碼語法高亮。
- 點擊這裡 預覽。
安裝方式
從 npm 安裝
npm i pdmarkdownkit
從 CDN 引入
- 引入
PDMarkdownKit
套件<!-- 版本 1.6.0 以上 --> <script src="https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js"></script>
- Module 版本
// 版本 1.6.0 以上 import { editor as PDMarkdownEditor, viewer as PDMarkdownViewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.module.js"; // 版本 1.5.2 以下 import { editor as PDMarkdownEditor, viewer as PDMarkdownViewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js";
- 引入
使用方法
一般
初始化
editor
和viewer
const elm_editor = new PDMarkdownEditor({ id: "", // 預設:PDMDEditor defaultContent: "", // 預設內容,初始顯示 hotKey: 1, // 啟用快捷鍵,預設為 1 preventRefresh: 0, // 防止頁面重整,預設值:0 style: { mode: "", // auto | light | dark, 預設: auto fill: 1, // 隨父元素大小調整,預設值:1 fontFamily: "", // 預設:'Noto Sans TC', sans-serif showRow: 0, // 顯示行數,預設:1 placeholder: { text: "Content", // 預設:Type here ... color: "#ff000080" // 預設:#0000ff1a }, focus: { backgroundColor: "ff00001a",// 預設:#0000ffff color: "#ff0000" // 預設:#bfbfbf } } }); const elm_viewer = new PDMarkdownViewer({ id: "", // 預設:PDMDViewer emptyContent: "", // 預設內容,當編輯器為空時顯示 style: { mode: "", // auto | light | dark, 預設: auto fill: "", // 隨父元素大小調整,預設值:1 | true fontFamily: "", // 預設:'Noto Sans TC', sans-serif }, sync: { editor: elm_editor, // 關聯的編輯器 delay: 50, // 更新延遲,單位ms,預設 300 scrollSync: 1, // 與編輯器同步滾動,預設值:0 | false }, hashtag: { path: "?keyword=", // 標籤路徑,用於檢測 # 並轉換為Link target: "_blank" // 標籤打開方式,預設 _blank } }); // 將元素添加到 DOM 中 {DOM}.appendChild(elm_editor.body); {DOM}.appendChild(elm_viewer.body); // 初始化編輯器和預覽器 elm_editor.init(pre: string); elm_viewer.init(pre: string);
Markdown 語法支持
支持標準 Markdown 語法,包括字體、連結、圖片、列表、表格、代碼塊和引用等。此外,還包含擴展功能以增強功能性。
字體
| 語法 | 輸出 |
| - | - |
| # 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 |
| **粗體**
__粗體__
<b>粗體</b>
<strong>粗體</strong>
| 粗體 |
| *斜體*
_斜體_
<i>斜體</i>
<em>斜體</em>
| 斜體 |
| ~~刪除線~~
<s>刪除線</s>
| 刪除線 |
| <u>下劃線</u>
| 下劃線 |
| <mark>標記</mark>
| 標記 |
| x<sup>2</sup>
| x2 |
| H<sub>2</sub>O
| H2O |
| 語法 | 輸出 |
| - | - |
| ==標記==
| ==標記== |
| x^2^
| x^2^ |
| H~2~O
| H~2~O |
連結
- 純連結
https://github.com/pardnchiu/PDMarkdownKit/
https://github.com/pardnchiu/PDMarkdownKit/ - 連結搭配自訂文字
[顯示文字](https://github.com/pardnchiu/PDMarkdownKit/)
顯示文字 - 連結搭配自訂標題
[顯示文字](https://github.com/pardnchiu/PDMarkdownKit/ "連結標題")
顯示文字
- 自動偵測 Email [email protected]
- 自動偵測 Youtube 影片
https://www.youtube.com/watch?v=zJ_w7Dix_f0
https://www.youtube.com/watch?v=zJ_w7Dix_f0[Display text](https://www.youtube.com/watch?v=zJ_w7Dix_f0)
Display text
圖片
- 圖片
![](https://opengraph.githubassets.com/1/pardnchiu/PDMarkdownKit)
- 圖片搭配描述
![圖片描述](https://opengraph.githubassets.com/1/pardnchiu/PDMarkdownKit)
- 圖片搭配標題
![](https://opengraph.githubassets.com/1/pardnchiu/PDMarkdownKit "圖片標題")
- 圖片搭配連結
[![](https://opengraph.githubassets.com/1/pardnchiu/PDMarkdownKit)](https://github.com/pardnchiu/PDMarkdownKit)
- 影片
![](static/image/youtube.mov)
- 圖片搭配尺寸
![](https://opengraph.githubassets.com/1/pardnchiu/PDMarkdownKit)(50%*360)
(50%*360) - 圖片搭配
![](https://opengraph.githubassets.com/1/pardnchiu/PDMarkdownKit)(50%*240 left)
![](https://opengraph.githubassets.com/1/pardnchiu/PDMarkdownKit)(50%*240 right)
(50%*240 left) (50%*240 right)
列表
- 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
- [ ] 項目1
- [x] 項目2
- [ ] 項目1
- [x] 項目2
代碼塊
- 單行
#Code-1
- 多行
#Code-2 #Code-2 #Code-2
空白鍵*4
#Code-3 #Code-3 #Code-3
引用
引用層 1
引用層 2
引用層 3
[!NOTE] 這是NOTE
[!TIP] 這是TIP
[!IMPORTANT] 這是IMPORTANT
[!WARNING] 這是WARNING
[!CAUTION] 這是CAUTION
表格
- 表格1 | 向左對齊 | 置中對齊 | 向右對齊 | | :- | :-: | -: | | 值 | 值 | 值 | | 值 | 值 | 值 | | 值 | 值 | 值 | | 值 | 值 | 值 |
- 表格2 (不包含兩側
|
) 向左對齊 | 置中對齊 | 向右對齊 :- | :-: | -: 值 | 值 | 值 值 | 值 | 值 值 | 值 | 值 值 | 值 | 值
水平線
---
或 ***
Hashtag
#test1 #test2 #test3
快捷鍵
- 支持
- 複製:
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
- 代碼塊k:
cmd/ctrl
+k
- 複製:
- 禁用
- 重新整理:
cmd/ctrl
+r
orF5
- 重新整理:
開發者
授權條款
本專案依據 MIT 授權使用。
©️ 2023 邱敬幃 Pardn Chiu