pdmarkdownkit

v1.6.0

Published

10 days ago

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

1,018

0High
0Medium
0Low

pardnchiu

markdown-editor markdown-parser javascript-library

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 語法，包括字體、連結、圖片、列表、表格、代碼塊和引用等。此外，還包含擴展功能以增強功能性。

字體

| 語法 | 輸出 | | - | - | | # H1H1\n===<h1>H1</h1> | H1 | | ## H2H2\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
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
[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 or F5

開發者

授權條款

本專案依據 MIT 授權使用。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme