DEV Community

Cover image for NanoMD: Lightweight Markdown Editor
邱敬幃 Pardn Chiu
邱敬幃 Pardn Chiu

Posted on • Edited on

NanoMD: Lightweight Markdown Editor

#javascript #markdown

Formerly known as PDMarkdownKit, renamed to NanoMD starting from version 1.8.0
A modern Markdown editor built with pure JavaScript, focusing on performance and user experience. Leveraging virtual DOM technology to provide smooth real-time preview and editing experience.

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
Enter fullscreen mode Exit fullscreen mode

Include via CDN

Include the NanoMD library 

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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: "",                                 // Element to replace
    defaultContent: "",                     // Default content to display initially
    hotKey: 1,                              // Enable hotkeys, default: 1
    preventRefresh: 0,                      // Prevent page refresh, default: 0
    tabPin: 0,                              // 1 | 0 | true | false
    wrap: 1,                                // 1 | 0 | true | false
    style: {
        mode: "",                           // auto | light | dark, default: auto
        fill: 1,                            // Adjust size to parent element, default: 1
        fontFamily: "",                     // Default: 'Noto Sans TC', sans-serif
        showRow: 0,                         // Show line numbers, default: 1
        placeholder: {
            text: "Content",                // Default: Type here ...
            color: "#ff000080"              // Default: #0000ff1a
        },
        focus: {
            backgroundColor: "#ff00001a",   // Default: #0000ffff
            color: "#ff0000"                // 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);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)