Master Cherry Markdown: Powerful Open-Source Editor with Features, Installation & Demos
Cherry Markdown, Tencent’s open-source JavaScript Markdown editor, offers lightweight, extensible editing with features like image scaling, chart generation, multi-cursor support, and multiple preview modes, and the article provides a detailed overview, performance highlights, installation steps, code examples, and demo screenshots.
Cherry Markdown is an open-source JavaScript-based Markdown editor released by Tencent, usable in browsers or Node.js.
Project Overview
It offers out-of-the-box lightweight editing with extensibility, supporting image scaling, table-to-chart generation, font styling, background colors, superscript/subscript, lists, audio/video insertion, and more.
Syntax Features
Image scaling, alignment and citation
Generate charts from tables
Adjust font color and size
Font background, superscript and subscript
Insert lists
Insert audio or video
Multiple Modes
Scroll-sync real-time preview
Pure preview mode
Toolbar-less minimal mode
Mobile preview mode
Functional Characteristics
Copy-paste from rich text to Markdown
Classic and normal line breaks
Multi-cursor editing
Image size editing
Export to image or PDF
Floating toolbar appears at new line
Bubble toolbar appears on text selection
Performance Highlights
Partial rendering for only updated sections
Partial updates to avoid full re-draw
Supports multiple preview modes
Rich feature set including multi-cursor and export options
Built-in security hooks using whitelist and DomPurify
Quick Installation
Install via npm or yarn:
<code>npm install cherry-markdown --save
# or using yarn
yarn add cherry-markdown</code>To enable mermaid diagrams and chart conversion, also install:
<code># install mermaid
yarn add [email protected]
# install echarts
yarn add [email protected]</code>Then include the CSS/JS files and initialize the editor:
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cherry Markdown</title>
<link rel="stylesheet" href="path/to/cherry-markdown.css">
</head>
<body>
<div id="editor"></div>
<script src="path/to/cherry-markdown.js"></script>
<script>
const editor = new Cherry({
id: 'editor',
value: '# Hello Cherry Markdown!'
});
</script>
</body>
</html>
</code>Demo Showcase
Various screenshots illustrate full mode, basic mode, mobile preview, and toolbar-less mode.
Project Repository
Source code and documentation are available at https://github.com/Tencent/cherry-markdown
macrozheng
Dedicated to Java tech sharing and dissecting top open-source projects. Topics include Spring Boot, Spring Cloud, Docker, Kubernetes and more. Author’s GitHub project “mall” has 50K+ stars.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.