npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

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";

使用方法

  • 一般

  • 初始化 editorviewer

    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)

列表

  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
  • [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 授權使用。


©️ 2023 邱敬幃 Pardn Chiu