Cherry Markdown 编辑器使用教程

最新推荐文章于 2025-03-15 08:04:08 发布

陆或愉

最新推荐文章于 2025-03-15 08:04:08 发布

阅读量1.2k

点赞数 25

本文链接：https://blog.csdn.net/gitblog_00808/article/details/142837820

版权

Cherry Markdown 编辑器使用教程

cherry-markdown ✨ A Markdown Editor 项目地址: https://gitcode.com/gh_mirrors/ch/cherry-markdown

1、项目介绍

Cherry Markdown 编辑器是一个基于 JavaScript 的 Markdown 编辑器，具有开箱即用、轻量级和易于扩展的特点。它可以在浏览器或服务器（通过 Node.js）中运行。Cherry Markdown 编辑器支持大多数常用的 Markdown 语法，如标题、TOC、流程图、公式等。此外，它还支持自定义语法扩展，满足不同用户的需求。

2、项目快速启动

浏览器环境

首先，引入 Cherry Markdown 的 CSS 和 JS 文件：

<link href="cherry-editor.min.css" />
<div id="markdown-container"></div>
<script src="cherry-editor.min.js"></script>

然后，初始化 Cherry Markdown 编辑器：

<script>
  new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor'
  });
</script>

Node.js 环境

在 Node.js 环境中，可以使用 Cherry Markdown 的引擎核心包：

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

3、应用案例和最佳实践

应用案例

Cherry Markdown 编辑器广泛应用于各种需要 Markdown 编辑功能的场景，如博客平台、文档管理系统、论坛等。以下是一个简单的应用案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Cherry Markdown 示例</title>
  <link href="cherry-editor.min.css" />
</head>
<body>
  <div id="markdown-container"></div>
  <script src="cherry-editor.min.js"></script>
  <script>
    new Cherry({
      id: 'markdown-container',
      value: '# 欢迎使用 Cherry Markdown 编辑器'
    });
  </script>
</body>
</html>