{"id":22108428,"url":"https://github.com/pardnchiu/nanomd","last_synced_at":"2025-07-24T23:35:21.782Z","repository":{"id":133389451,"uuid":"540977416","full_name":"pardnchiu/NanoMD","owner":"pardnchiu","description":"A pure JavaScript-based Markdown editor, built with native APIs, supports standard Markdown syntax with various extended features, including real-time preview, automatic detection of YouTube videos.","archived":false,"fork":false,"pushed_at":"2024-11-29T16:41:31.000Z","size":6692,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-29T16:49:54.052Z","etag":null,"topics":["javascript-library","markdown-editor","markdown-parser"],"latest_commit_sha":null,"homepage":"https://pardnchiu.github.io/NanoMD/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pardnchiu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-24T21:54:03.000Z","updated_at":"2024-11-29T16:41:49.000Z","dependencies_parsed_at":"2024-07-27T01:24:30.391Z","dependency_job_id":"6fe86fbc-7a09-4a93-850b-5e69f9d0c143","html_url":"https://github.com/pardnchiu/NanoMD","commit_stats":null,"previous_names":["pardnchiu/markdown-editor","pardnchiu/pdmarkdownkit","pardnchiu/nanomd"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FNanoMD","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FNanoMD/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FNanoMD/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FNanoMD/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pardnchiu","download_url":"https://codeload.github.com/pardnchiu/NanoMD/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227525170,"owners_count":17783459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript-library","markdown-editor","markdown-parser"],"created_at":"2024-12-01T09:14:56.087Z","updated_at":"2025-07-24T23:35:21.758Z","avatar_url":"https://github.com/pardnchiu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://nanomd.pardn.io/static/image/logo.png\" width=80\u003e\n\n# NanoMD: Lightweight Markdown Editor\n\n\u003e [!NOTE]\n\u003e (Formerly known as PDMarkdownKit, renamed to NanoMD starting from version `1.8.0`)\n\n\u003e 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.\n\n![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) \n![size](https://img.shields.io/github/size/pardnchiu/NanoMD/dist%2FNanoMD.js)\u003cbr\u003e\n[![npm](https://img.shields.io/npm/v/@pardnchiu/nanomd)](https://www.npmjs.com/package/@pardnchiu/nanomd)\n[![download](https://img.shields.io/npm/dm/@pardnchiu/nanomd)](https://www.npmjs.com/package/@pardnchiu/nanomd)\n[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/nanomd)](https://www.jsdelivr.com/package/npm/@pardnchiu/nanomd)\u003cbr\u003e\n[![](https://img.shields.io/badge/查閱-中文版本-ffffff)](https://github.com/pardnchiu/NanoMD/blob/main/README.zh.md)\n\n## Features\n\n### High-Performance Editing\n- Smart virtual DOM updates for optimal performance\n- Real-time split-screen preview with WYSIWYG experience\n- Intelligent scroll synchronization\n- Optimized for large documents with zero lag\n\n### Advanced Markdown Support\n- Complete standard syntax support\n- Extended features:\n    - Code formatting and syntax highlighting\n    - Real-time math formula rendering\n    - Automatic table formatting\n    - Checkable task lists\n    - Quick block quotes\n\n### Media Integration\n- Automatic YouTube and Vimeo video embedding with previews\n- Smart image handling:\n    - Automatic thumbnail generation\n    - Flexible size control\n    - Multiple alignment options\n- Responsive media support\n\n### Technical Advantages\n- Pure JavaScript implementation, no external dependencies\n- Efficient virtual DOM implementation\n- Modular architecture design\n- Complete ES Module support\n\n## Documentation\n\n- Website: [nanomd.pardn.io](https://nanomd.pardn.io)\n- Documentation: [nanomd.pardn.io/page/doc](https://nanomd.pardn.io/page/doc.html)\n- Demo: [nanomd.pardn.io/page/live](https://nanomd.pardn.io/page/live.html)\n\n## Installation\n\n### Install via npm\n```bash\nnpm i @pardnchiu/nanomd\n```\n\n### Include via CDN\n\n#### UMD version\n```html\n\u003c!-- Version 1.8.0 and above --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Version 1.6.0-1.7.1 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js\"\u003e\u003c/script\u003e\n```\n\n#### ES Module version\n```javascript\n// Version 1.8.0 and above\nimport { MDEditor, MDViewer, MDParser } from \"https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@[VERSION]/dist/NanoMD.esm.js\";\n\n// Version 1.6.0-1.7.1\nimport { editor, viewer } from \"https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.module.js\";\n\n// Version 1.5.2 and below\nimport { editor, viewer } from \"https://cdn.jsdelivr.net/npm/pdmarkdownkit@[VERSION]/dist/PDMarkdownKit.js\";\n```\n\n## How to use\n\n### Initialize `editor` and `viewer`\n```Javascript\n// Version 1.8.0 and above\n// Unified: MDEditor, MDViewer\n\n// Version 1.7.1 and below\n// IIFE: PDMarkdownEditor, PDMarkdownViewer\n// ESM: editor, viewer\n\nconst domEditor = new MDEditor({\n    id: \"\",                                 // Specify the target element to replace\n    defaultContent: \"\",                     // Initial content to display\n    hotKey: 1,                              // Enable keyboard shortcuts, default: 1 (enabled)\n    preventRefresh: 0,                      // Prevent page refresh, default: 0 (disabled)\n    tabPin: 0,                              // Pin Tab, default: 0 (disabled)\n    wrap: 1,                                // Enable word wrapping, default: 1 (enabled)\n    autosave: 1,                            // Auto-save feature, default: 1 (enabled)\n    event: {\n        save: result =\u003e {                   // Custom save event\n            console.log(result);            // Output current Markdown content\n        },\n        upload: async result =\u003e {\n            /**\n             * Custom Image Upload Function\n             *\n             * Purpose:\n             * - This function allows developers to define custom image upload logic.\n             * - After the upload is completed, it returns an object containing the image URL and alt text, \n             *   which is then used to insert the image into the editor.\n             *\n             * Usage:\n             * - This function is invoked by the editor when an image needs to be uploaded.\n             * - Developers can implement custom upload logic (e.g., using an API to upload the image to a server).\n             *\n             * Return Value:\n             * - The function must return an object with the following fields:\n             *   - `href`: The URL of the image to be inserted into the editor.\n             *   - `alt`: The alternative text for the image (used when the image cannot be loaded).\n             *\n             * Example:\n             * - The current implementation simulates a 1-second delay and returns an empty `href` and `alt`.\n             * - You can replace this logic with actual upload functionality (e.g., using fetch or axios to send an HTTP request).\n             */\n            const link = await new Promise(resolve =\u003e {\n                setTimeout(() =\u003e resolve({\n                    href: \"\",  // The image URL (replace with the actual upload response link)\n                    alt: \"\"    // The alternative text for the image (replace with a description provided during upload)\n                }), 1000);  // Simulating a 1-second delay\n            });\n            return link;\n        }\n    },\n    style: {\n        mode: \"\",                           // Theme mode: auto | light | dark, default: auto\n        fill: 1,                            // Adjust size based on parent element, default: 1 (enabled)\n        fontFamily: \"\",                     // Font settings, default: 'Noto Sans TC', sans-serif\n        showRow: 0,                         // Show line numbers, default: 0 (disabled)\n        placeholder: {\n            text: \"Content\",                // Placeholder text, default: \"Type here...\"\n            color: \"#ff000080\"              // Placeholder color, default: #0000ff1a\n        },\n        focus: {\n            backgroundColor: \"#ff00001a\",   // Focus background color, default: #0000ffff\n            color: \"#ff0000\"                // Focus text color, default: #bfbfbf\n        }\n    }\n});\n\n\nconst domViewer = new MDViewer({\n    id: \"\",                 // Element to replace\n    emptyContent: \"\",       // Default content when editor is empty\n    style: {\n        mode: \"\",           // auto | light | dark, default: auto\n        fill: \"\",           // Adjust size to parent element, default: 1 | true\n        fontFamily: \"\",     // Default: 'Noto Sans TC', sans-serif\n    },\n    sync: {\n        editor: domEditor,  // Associated editor\n        delay: 50,          // Update delay in ms, default: 300\n        scrollSync: 1,      // Synchronize scrolling with editor, default: 0 | false\n    },\n    hashtag: {\n        path: \"?keyword=\",  // Path for hashtags, converting # to links\n        target: \"_blank\"    // Target for hashtag links, default: _blank\n    }\n});\n\n// If no element is specified, the player must be manually added to the DOM\n(...).appendChild(domEditor.body);\n(...).appendChild(domViewer.body);\n\n// Version 1.10.0 and above\nconst domParser = new MDParser({\n    standard: 1             // Support only standard syntax, default: 1 | true\n});\n\nconsole.log(domParser.parse(\"**Text to parse**\"));\n``` \n\n## License\n\nSimilar to MIT License but provides obfuscated code only:\n- Same as MIT: Free to use, modify and redistribute, including commercial use \n- Main difference: Provides obfuscated code by default, source code available for purchase\n- License terms: Must retain original copyright notice (same as MIT)\n\nFor detailed terms and conditions, please see the [Software Usage Agreement](https://github.com/pardnchiu/NanoMD/blob/main/LICENSE).\n\n\n## Creator\n\n\u003cimg src=\"https://avatars.githubusercontent.com/u/25631760\" align=\"left\" width=\"96\" height=\"96\" style=\"margin-right: 0.5rem;\"\u003e\n\n\u003ch4 style=\"padding-top: 0\"\u003e邱敬幃 Pardn Chiu\u003c/h4\u003e\n\n\u003ca href=\"mailto:dev@pardn.io\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://pardn.io/image/email.svg\" width=\"48\" height=\"48\"\u003e\n\u003c/a\u003e \u003ca href=\"https://linkedin.com/in/pardnchiu\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://pardn.io/image/linkedin.svg\" width=\"48\" height=\"48\"\u003e\n\u003c/a\u003e\n\n***\n\n©️ 2023 [邱敬幃 Pardn Chiu](https://pardn.io)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpardnchiu%2Fnanomd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpardnchiu%2Fnanomd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpardnchiu%2Fnanomd/lists"}