Cherry Markdown Writer
Introduction
Cherry Markdown Editor is a versatile JavaScript-based Markdown editor designed to make writing and editing content both easy and efficient. It boasts of several key features—being out-of-the-box, lightweight, and customizable—allowing it to function seamlessly in various environments, whether it be in a browser or on a server (using NodeJs).
Key Features
Out-of-the-box
The Cherry Markdown Editor allows developers to quickly set up and use the application. Once initialized, it supports a broad range of markdown syntaxes, including titles, tables of contents (TOCs), flowcharts, formulas, and more, all ready for use without additional configurations.
Easy to Extend
If the built-in functionalities of Cherry Markdown do not meet specific user requirements, it can be easily extended. It is developed using pure JavaScript, ensuring that it does not depend on technologies like Angular, Vue, and React, thus simplifying integration and custom modulations for various project needs.
Noteworthy Capabilities
-
Syntax Features
- Supports image zooming, alignment, and referencing.
- Chart generation based on table content.
- Font customization, enabling adjustments to color and size.
- Includes features for font background colors, superscripts, and subscripts.
- Support for checklists, as well as audio and video insertion.
-
Modes of Operation
- Live preview with auto-scroll synchronization.
- Preview-only mode.
- Simplified, no-toolbar minimalist editing mode.
- Mobile preview mode for on-the-go access and editing.
-
Functional Capabilities
- Allows copying from rich text with markdown paste formatting.
- Various line feed options for text formatting.
- Multi-cursor editing support and image size adjustments.
- Options to export documents as image files or PDFs.
- Features float and bubble toolbars for intuitive editing experiences.
-
Performance and Security
- Efficient with partial rendering and updates.
- Built-in security features like a security hook and utilization of DomPurify for safe filtering.
-
Styling and Themes
- Offers a variety of themes for different presentation styles.
Installation and Setup
To install Cherry Markdown, users can opt for either Yarn or npm. For enhanced functionalities like drawing with mermaid and table-to-chart conversions, users are advised to install additional packages such as mermaid and echarts.
-
Installing via yarn
yarn add cherry-markdown -
Installing via npm
npm install cherry-markdown --save
Additional installs for extended features:
yarn add [email protected]
yarn add [email protected]
Usage Examples
Cherry Markdown can be utilized in multiple environments, with straightforward examples provided for different implementations: in browsers via UMD or ESM, and on servers using Node. Users can also explore its lite version for less storage-intensive requirements.
Customization and Extensions
Cherry Markdown allows users to customize the syntax and adjust toolbars to fit unique needs, further encouraging personalized user experiences.
Unit Testing
For ensuring reliability, Cherry Markdown employs Jest for unit testing, focusing on both CommonMark testing and snapshot tests. These tests help maintain accuracy and performance consistency across updates.
Community and Contributions
Contributions to Cherry Markdown are warmly welcomed, with the possibility of suggesting and developing new features. New contributors are advised to get familiarized with existing documentation to seamlessly integrate their efforts into the project.
Licenses and Acknowledgments
Cherry Markdown operates under an Apache-2.0 license, promoting open-source collaboration and development within the tech community.