Cherry Markdown Editor

• cherry markdown
• hello world
• &
• &
• API

• H5
• toolbar
• AI chart
• VIM

Cherry Markdown Editor Javascript Markdown . (NodeJs).

****

Cherry Markdown markdown

****

Cherry Markdown CherryMarkdown JavaScript angularvuereact

5. checklist

1. Html MD
2. &
5. pdf
6. float toolbar
7. bubble toolbar

Cherry Markdown Hook DomPurify .

Cherry Markdown

screenshot

yarn

yarn add cherry-markdown

npm

npm install cherry-markdown --save

mermaid mermaid echarts

Cherry[email protected]``[email protected]

# mermaidmermaid
yarn add [email protected]
# echarts
yarn add [email protected]

Quick start

Browser

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-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

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!');

mermaid Cherry mermaid

()

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

()

// Cherry
// CherryCherry
import CherryEngine from 'cherry-markdown/dist/cherry-markdown.engine.core';
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');

// --> <h1>welcome to cherry editor!</h1>

mermaid

mermaid

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
import mermaid from 'mermaid';

// Cherry
Cherry.usePlugin(CherryMermaidPlugin, {
  mermaid, // mermaid
  // mermaidAPI: mermaid.mermaidAPI, // mermaid API
  // mermaidmermaid
  // theme: 'neutral',
  // sequence: { useMaxWidth: false, showSequenceNumbers: true }
});

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

recommend webpack

import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';

const registerPlugin = async () => {
  const [{ default: CherryMermaidPlugin }, mermaid] = await Promise.all([
    import('cherry-markdown/src/addons/cherry-code-block-mermaid-plugin'),
    import('mermaid'),
  ]);
  Cherry.usePlugin(CherryMermaidPlugin, {
    mermaid, // mermaid
  });
};

registerPlugin().then(() => {
  // Cherry
  const cherryInstance = new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
});

/src/Cherry.config.js

... /client

cherry****

Jest CommonMark

CommonMark

yarn run test:commonmark CommonMark

test/suites/commonmark.spec.json

{
  "markdown": "  \tfoo\tbaz\t\tbim\n",
  "html": "<pre><code>foo\tbaz\t\tbim\n</code></pre>\n",
  "example": 2,
  "start_line": 363,
  "end_line": 368,
  "section": "Tabs"
},

Jest Cherry.makeHtml(" \tfoo\tbaz\t\tbim\n") html "<pre><code>foo\tbaz\t\tbim\n</code></pre>\n"Cherry Markdown data-line

CommonMark https://spec.commonmark.org/

yarn run test:snapshot test/core/hooks/List.spec.ts test/core/hooks/__snapshots__

Cherry Hook

Contributing

Markdown issue

License

Apache-2.0