Skip to content
/ PDMarkdownKit Public

網頁 Markdown 編輯器／檢視器，易於導入使用的模組化設計，支持標準語法、鍵盤快捷鍵、即時預覽和豐富的擴展功能。

pardnchiu.github.io/pdmarkdownkit/

License

MIT license
2 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

pardnchiu/PDMarkdownKit

BranchesTags

Repository files navigation

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 H2O

連結

標準語法
擴展

圖片

標準語法
  • 圖片
    ![](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)

列表

有序列表
  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
無序列表
  • ul List 0
  • ul List 0
  • ul List 0
    • ul List 1
      • ul List 2
        • ul List 3
          • ul List 4
混合列表
  • 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
待辦事項
  • 項目1
  • 項目2
    • 項目1
    • 項目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 or F5

開發者

邱敬幃 Pardn Chiu

授權條款

本專案依據 MIT 授權使用。

©️ 2023 邱敬幃 Pardn Chiu

About

網頁 Markdown 編輯器／檢視器，易於導入使用的模組化設計，支持標準語法、鍵盤快捷鍵、即時預覽和豐富的擴展功能。

pardnchiu.github.io/PDMarkdownKit/

Topics

markdown-editor markdown-parser javascript-library

Resources

Readme

License

MIT license
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases 19

1.6.0 Latest
Oct 28, 2024
+ 18 releases

Packages

No packages published

Languages