Recommend a powerful Markdown editor, Tencent's open source Cherry Markdown Editor

Cherry Markdown Editor is a Javascript Markdown editor that is out-of-the-box, lightweight and concise, and easy to extend. It can run on the browser or server (NodeJs).

Usually the Markdown editor or browser we use is mainly desktop, Cherry Markdown Editor is mainly in B/S mode, and we are also planning a desktop client to replace paid software such as typora. Cherry Markdown is very powerful, supporting the insertion of pictures, video, audio, flowcharts, timing diagrams, state diagrams, UML diagrams, pie charts, formulas, notes, footnotes, etc., as well as web pure browsing mode, mobile preview mode, and custom syntax. Support the use of js embedded anywhere on our web page, provide a variety of style themes and online demo examples, open source by Tencent, recommended use.

Easy to extend

When the syntax supported by the Cherry Markdown editor does not meet the needs of developers, secondary development or functional expansion can be carried out quickly. At the same time, the CherryMarkdown editor should be implemented by pure JavaScript, and should not rely on framework technologies such as angular, vue, react, etc., and the framework only provides a container environment.

Syntax attributes

1. Image scaling, alignment, reference
2. Generate charts based on table content
3. Font color, font size
4. Font background color, superscript, subscript
5. checklist
6. Audio and video

Multiple modes

1. Two-column editing preview mode (supports synchronous scrolling)
2. Pure preview mode
3. Toolbarless mode (minimalist editing mode)
4. Mobile preview mode

Features

1. Copy the HTML and paste it into MD syntax
2. Classic line breaks & regular line breaks
3. Multi-cursor editing
4. Image size
5. Export long images, pdfs
6. The float toolbar supports the Quick Toolbar at the beginning of a new line
7. The bubble toolbar is associated with the Quick Toolbar when the word Chinese is selected

Performance characteristics

1. Local rendering
2. Local updates

safe

Cherry Markdown has built-in security hooks that are whitelisted and scanned by DomPurify.

Style theme

Cherry Markdown has a variety of style theme options

Installation

Via yarn

yarn add cherry-markdown           

Via npm

npm install cherry-markdown --save           

If you need to enable Mermaid Paint and table auto-charting functions, you need to add Mermaid and eCharts packages at the same time.

At present, the plugin versions recommended by Cherry are [email protected] and [email protected]

# 安装mermaid依赖开启mermaid画图功能
yarn add [email protected]
# 安装echarts依赖开启表格自动转图表功能
yarn add [email protected]           

How to use the browser side

UMD

<link href="cherry-editor.min.css" />
<div id="markdown-container"></div>
<script src="cherry-editor.min.js"></script>
<script>
  new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
</script>           

ESM

import Cherry from 'cherry-markdown';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});           

How to use Node

const { default: CherryEngine } = require('cherry-markdown/dist/cherry-markdown.engine.core.common');
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');           

Use the lightweight version

Due to the very large size of the mermaid library, the Cherry build product contains a core build package without mermaid built-in, and the core build can be introduced as follows.

Full Mode (Graphical Interface)

import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});           

Edit mode

flow chart

Timing diagram

State diagram

UML diagram

Pie chart

Insert audio and video

Animated demonstration