Skip to content

特性展示 features

sunsonliu edited this page Sep 11, 2023 · 4 revisions

语法特性

支持了所有常用的、通用的语法,除此之外我们还支持了一些有意思的语法

特性 1:图片尺寸、阴影、边框、圆角

语法

![img #宽度#高度#对齐方式][图片URL或引用]

其中,宽度高度支持:绝对像素值(比如200px)、相对外层容器百分比(比如50%), 对齐方式候选值有:左对齐(缺省)、右对齐(right)、居中(center)、悬浮左、右对齐(float-left/right)

图片编辑


特性 2:信息面板、手风琴

信息面板 手风琴


特性 3:字体颜色、字体大小、对齐方式

字体样式


功能特性

特性 1:复制Html粘贴成MD语法

html转md

使用场景

  • Markdown初学者快速熟悉MD语法的一个途径
  • 为调用方提供一个历史富文本数据迁成Markdown数据的方法

特性 2:经典换行&常规换行

br

使用场景

团队对markdown源码有最大宽度限制?一键切回经典换行(两个及以上连续换行才算一个换行)


特性 3: 多光标编辑

br

使用场景

想要批量修改?可以试试多光标编辑(快捷键、搜索多光标选中等功能正在开发中)

特性 4:draw.io画图

drawio编辑

Feature 5:表格编辑

表格编辑

特性 6:导出

wysiwyg


性能特性

局部渲染

CherryMarkdown会判断用户到底变更了哪个段落,做到只渲染变更的段落,从而提升修改时的渲染性能

wysiwyg

局部更新

CherryMarkdown利用virtual dom机制实现对预览区域需要变更的内容进行局部更新的功能,从而减少了浏览器Dom操作,提高了修改时预览内容更新的性能

wysiwyg


Syntax Feature

It supports all common syntax. In addition, we also support some interesting syntaxes

Feature 1:Image zoom, alignment, reference

![img #Width # height # alignment] [picture URL or reference]

Among them, width and height support: absolute pixel value (such as 200px), relative outer container percentage (such as 50%), alignment candidate values ​​are: left-aligned (default), right-aligned (right), centered (center), Floating left and right alignment (float-left/right

Show case

图片尺寸

Feature 2:Generate chart based on table content

表格图表


Feature 3:Font color, Font size

字体样式


Functional Features

Feature 1:Copy HTML paste into MD syntax

html转md

Scenario

  • Provide Markdown beginners a way to quickly become familiar with MD syntax
  • Provide the caller a method to migrate historical rich text data into markdown data

Feature 2:Classic break& regular break

br

Scenario

Does the team have a maximum width limit on the markdown source code? One-click switch back to classic line break (only two or more consecutive line break can be regarded as one line feed)


Feature 3: Multi-cursor editing

br

Scenario

Want to batch modify? You can try multi-cursor editing (shortcut keys, search for multi cursor selection and other functions are under development)

Feature 4:Image size

wysiwyg

Feature 5:Table edit

wysiwyg

Feature 6:export

wysiwyg


Performance Features

Local render

Cherrymarkdown will judge which paragraph the user has changed and only render the changed paragraph, so as to improve the rendering performance during modification

wysiwyg

Local update

Cherrymarkdown uses the virtual DOM mechanism to locally update the content that needs to be changed in the preview area, which reduces the browser DOM operation and improves the performance of preview content update during modification

wysiwyg