发生噶发噶
例子
Github 地址
Cherry Markdown 简明手册
目录
基本语法
字体样式
说明
使用
*(或_)
和**(或__)
表示斜体和 粗体使用
/
表示 下划线 ,使用~~
表示删除线使用
^(或^^)
表示上标或下标使用 ! 号+数字 表示字体 大 小 [1]
使用两个(三个)!号+RGB 颜色 表示字体颜色(背景颜色)[1]
示例
效果
红色超链接
黑底白字超链接
新窗口打开
鞋子 特大号
大头 儿子
和小头 爸爸
爱在西元前当下
标题设置
说明
在文字下方加 === 可使上一行文字变成一级标题
在文字下方加 --- 可使上一行文字变成二级标题
在行首加井号(#)表示不同级别的标题,例如:# H1, ##H2, ###H3
超链接
说明
使用
[描述](URL)
为文字增加外链接使用
<URL>
插入一个链接URL 会自动转成链接
示例
效果
这是 腾讯网 的链接。
这是 一个引用的 的链接。
这是一个包含中文的链接https://www.qq.com?param=中文,中文
直接识别成链接:https://www.qq.com?param=中文,中文 用空格结束
引用一个链接
无序列表
说明
在行首使用 *,+,- 表示无序列表
示例
效果
无序列表项 一
默认
无序列表项 二
无序列表2.1
无序列表2.2
无序列表项 三
无序列表3.1
空心圆
无序列表3.1
无序列表四
无序列表4.1
实心方块
无序列表4.2
有序列表
说明
在行首使用数字、字母、汉字和点表示有序列表
示例
效果
有序列表项 一
阿拉伯数字
有序列表项 二
有序列表项 2.1
罗马数字
有序列表项 2.2
有序列表项 2.3
有序列表 三
有序列表3.1
希腊字母
有序列表3.2
有序列表3.3
有序列表 四
有序列表4.1
中文数字
有序列表4.2
有序列表4.3
引用
说明
在行首使用 > 表示文字引用
示例
效果
野火烧不尽,春风吹又生
行内代码
说明
使用 `代码` 表示行内代码
示例
效果
让我们聊聊 html
代码块
说明
使用 三个` 表示代码块
效果
插入图像
说明
使用

插入图像截图,在编辑器中粘贴(ctrl+V)也可以插入图像
使用

可以调整图片大小[1]
示例
效果
标准图片
设置图片大小(相对大小&绝对大小)
设置图片对齐方式:
左对齐+边框
居中+边框+阴影
右对齐+边框+阴影+圆角
浮动左对齐+边框+阴影+圆角
开心也是一天,不开心也是一天
这样就过了两天,汪
属性释义:
宽度:第一个
#100px
或#10%
或#auto
高度:第二个
#100px
或#10%
或#auto
左对齐:
#left
右对齐:
#right
居中对齐:
#center
悬浮左对齐:
#float-left
悬浮右对齐:
#float-right
边框:
#border
或#B
阴影:
#shadow
或#S
圆角:
#radius
或#R
高阶语法手册
目录
说明
使用
[[toc]]
,会自动生成一个页面目录,目录内容由一级、二级、三级标题组成
信息面板
说明
使用连续三个冒号:::
和关键字([primary | info | warning | danger | success]
)来声明
效果
内容
内容
手风琴
说明
使用连续三个加号+++
和关键字([ + | - ]
)来声明,关键字+
表示默认收起,关键字-
表示默认展开
效果
点击展开更多
内容
默认展开
内容
默认收起
内容
语法高亮
说明
在```后面指明语法名
加强的代码块,支持四十一种编程语言的语法高亮的显示
效果
非代码示例:
Python 示例:
JavaScript 示例:
checklist[2]
说明
输入
[ ]
或[x]
,就会生成一个 checklist
示例
效果
AAA
BBB
CCC
公式[2]
说明
输入
$$
或$
,就会生成一个公式访问 MathJax 参考更多使用方法
示例
效果
块级公式:
行内公式: $e=mc^2$
插入音视频
说明
使用
!v[描述](视频链接地址)
插入视频使用
!v[描述](视频链接地址){poster=封面地址}
插入视频并配上封面
使用
!audio[描述](视频链接地址)
插入音频
示例
效果
这是个演示视频
这是个假音频
带对齐功能的表格
说明
一种比较通用的markdown表格语法
示例
效果
项目(居中对齐) | 价格(右对齐) | 数量(左对齐) |
---|---|---|
计算机 | ¥1600 | 5 |
手机机 | ¥12 | 50 |
表格配图
说明
在通用表格语法的基础上,通过在首行首列单元格里写入关键字来同时生成表格和图表
示例(折线图)
效果
:line:{x,y} | Header1 | Header2 | Header3 | Header4 |
---|---|---|---|---|
Sample1 | 11 | 11 | 4 | 33 |
Sample2 | 112 | 111 | 22 | 222 |
Sample3 | 333 | 142 | 311 | 11 |
示例(柱状图)
效果
:bar:{y,x} | Header1 | Header2 | Header3 | Header4 |
---|---|---|---|---|
Sample1 | 11 | 11 | 4 | 33 |
Sample2 | 112 | 111 | 22 | 222 |
Sample3 | 333 | 142 | 311 | 11 |
流程图[2]
说明
访问Mermaid 流程图参考具体使用方法。
效果
小明老婆让小明下班时买一斤包子,如果遇到卖西瓜的,买一个。
左右结构
上下结构
时序图[2]
说明
访问Mermaid 时序图参考具体使用方法
效果
状态图[2]
说明
访问Mermaid 状态图参考具体使用方法
效果
UML图[2]
说明
访问Mermaid UML图参考具体使用方法
效果
饼图[2]
说明
访问Mermaid 饼图参考具体使用方法
效果
注释[2]
说明
使用中括号+冒号([]:)生成单行注释
使用中括号+尖号+冒号([^]:)生成多行注释
多行注释以连续两次回车结束
示例
效果
下面是一行单行注释
上面面是一行单行注释
下面是多行注释
上面是多行注释
脚注[2]
说明
在段落中引用多行注释即会生成脚注
脚注中括号中的数字以引用脚注的顺序自动生成
点击脚注的数字可以跳转到脚注详情或回到引用脚注位置
示例
编辑器操作能力
通过快捷按钮修改字体样式
复制html内容,粘贴成markdown
说明
粘贴html内容时会自动转成markdown,也可以选择粘贴为纯文本格式
可以拖拽调整预览区域的宽度
快捷键
功能 | 按键(Windows) | 按键(macOS) |
---|---|---|
1级标题 | Ctrl + 1 | ⌘ + 1 |
2级标题 | Ctrl + 2 | ⌘ + 2 |
3级标题 | Ctrl + 3 | ⌘ + 3 |
4级标题 | Ctrl + 4 | ⌘ + 4 |
5级标题 | Ctrl + 5 | ⌘ + 5 |
6级标题 | Ctrl + 6 | ⌘ + 6 |
加粗 | Ctrl + b | ⌘ + b |
斜体 | Ctrl + i | ⌘ + i |
插入链接 | Ctrl + l | ⌘ + l |
插入代码块 | Ctrl + k | ⌘ + k |
插入图片 | Ctrl + g | ⌘ + g |
插入公式 | Ctrl + m | ⌘ + m |
协议
特性展示
语法特性
支持了所有常用的、通用的语法,除此之外我们还支持了一些有意思的语法
特性 1:图片缩放、对齐、引用
语法
![img #宽度#高度#对齐方式][图片URL或引用]
其中,宽度
、高度
支持:绝对像素值(比如200px)、相对外层容器百分比(比如50%),对齐方式
候选值有:左对齐(缺省)、右对齐(right)、居中(center)、悬浮左、右对齐(float-left/right)
特性 2:根据表格内容生成图表
特性 3:字体颜色、字体大小
功能特性
特性 1:复制Html粘贴成MD语法
使用场景
Markdown初学者快速熟悉MD语法的一个途径
为调用方提供一个历史富文本数据迁成Markdown数据的方法
特性 2:经典换行&常规换行
使用场景
团队对markdown源码有最大宽度限制?一键切回经典换行(两个及以上连续换行才算一个换行)
特性 3: 多光标编辑
使用场景
想要批量修改?可以试试多光标编辑(快捷键、搜索多光标选中等功能正在开发中)
特性 4:图片尺寸
特性 5:导出
性能特性
局部渲染
CherryMarkdown会判断用户到底变更了哪个段落,做到只渲染变更的段落,从而提升修改时的渲染性能
局部更新
CherryMarkdown利用virtual dom机制实现对预览区域需要变更的内容进行局部更新的功能,从而减少了浏览器Dom操作,提高了修改时预览内容更新的性能
评论