/NanoMD

NanoMD is a lightweight Markdown editing and viewing library built on pure JavaScript and native APIs. Can be easily embedded into websites, offers rich features, and supports real-time previewing.

Primary LanguageJavaScriptOtherNOASSERTION

NanoMD: Lightweight Markdown Editor

Note

(Formerly known as PDMarkdownKit, renamed to NanoMD starting from version 1.8.0)

NanoMD is a lightweight Markdown editing and viewing library built on pure JavaScript and native APIs. Can be easily embedded into websites, offers rich features, and supports real-time previewing.

tag size
npm download jsdeliver

Features

High-Performance Editing

  • Smart virtual DOM updates for optimal performance
  • Real-time split-screen preview with WYSIWYG experience
  • Intelligent scroll synchronization
  • Optimized for large documents with zero lag

Advanced Markdown Support

  • Complete standard syntax support
  • Extended features:
    • Code formatting and syntax highlighting
    • Real-time math formula rendering
    • Automatic table formatting
    • Checkable task lists
    • Quick block quotes

Media Integration

  • Automatic YouTube and Vimeo video embedding with previews
  • Smart image handling:
    • Automatic thumbnail generation
    • Flexible size control
    • Multiple alignment options
  • Responsive media support

Technical Advantages

  • Pure JavaScript implementation, no external dependencies
  • Efficient virtual DOM implementation
  • Modular architecture design
  • Complete ES Module support

Documentation

Installation

Install via npm

npm i @pardnchiu/nanomd

Include via CDN

UMD version

<!-- Version 1.8.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.js"></script>

<!-- Version 1.6.0-1.7.1 -->
<script src="https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js"></script>

ES Module version

// Version 1.8.0 and above
import { MDEditor, MDViewer } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.esm.js";

// Version 1.6.0-1.7.1
import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.module.js";

// Version 1.5.2 and below
import { editor, viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js";

How to use

Initialize editor and viewer

// Version 1.8.0 and above
// Unified: MDEditor, MDViewer

// Version 1.7.1 and below
// IIFE: PDMarkdownEditor, PDMarkdownViewer
// ESM: editor, viewer

const domEditor = new MDEditor({
    id: "",                                 // Specify the target element to replace
    defaultContent: "",                     // Initial content to display
    hotKey: 1,                              // Enable keyboard shortcuts, default: 1 (enabled)
    preventRefresh: 0,                      // Prevent page refresh, default: 0 (disabled)
    tabPin: 0,                              // Enable Tab indentation, default: 0 (disabled)
    wrap: 1,                                // Enable word wrapping, default: 1 (enabled)
    autoSave: 1,                            // Auto-save feature, default: 1 (enabled)
    event: {
        save: result => {                   // Custom save event
            console.log(result);            // Output current Markdown content
        }
    },
    style: {
        mode: "",                           // Theme mode: auto | light | dark, default: auto
        fill: 1,                            // Adjust size based on parent element, default: 1 (enabled)
        fontFamily: "",                     // Font settings, default: 'Noto Sans TC', sans-serif
        showRow: 0,                         // Show line numbers, default: 0 (disabled)
        placeholder: {
            text: "Content",                // Placeholder text, default: "Type here..."
            color: "#ff000080"              // Placeholder color, default: #0000ff1a
        },
        focus: {
            backgroundColor: "#ff00001a",   // Focus background color, default: #0000ffff
            color: "#ff0000"                // Focus text color, default: #bfbfbf
        }
    }
});


const domViewer = new MDViewer({
    id: "",                 // Element to replace
    emptyContent: "",       // Default content when editor is empty
    style: {
        mode: "",           // auto | light | dark, default: auto
        fill: "",           // Adjust size to parent element, default: 1 | true
        fontFamily: "",     // Default: 'Noto Sans TC', sans-serif
    },
    sync: {
        editor: domEditor,  // Associated editor
        delay: 50,          // Update delay in ms, default: 300
        scrollSync: 1,      // Synchronize scrolling with editor, default: 0 | false
    },
    hashtag: {
        path: "?keyword=",  // Path for hashtags, converting # to links
        target: "_blank"    // Target for hashtag links, default: _blank
    }
});

// If no element is specified, the player must be manually added to the DOM
(...).appendChild(domEditor.body);
(...).appendChild(domViewer.body);

License

Similar to MIT License but provides obfuscated code only:

  • Same as MIT: Free to use, modify and redistribute, including commercial use
  • Main difference: Provides obfuscated code by default, source code available for purchase
  • License terms: Must retain original copyright notice (same as MIT)

For detailed terms and conditions, please see the Software Usage Agreement.

Creator

邱敬幃 Pardn Chiu

©️ 2023 邱敬幃 Pardn Chiu