例子

Github 地址

 

Cherry Markdown 简明手册 jiǎn míng shǒu cè

目录

  • 例子
  • Cherry Markdown 简明手册 jiǎn míng shǒu cè
  • 基本语法
  •       字体样式
  •       标题设置
  •       超链接
  •       无序列表
  •       有序列表
  •       引用
  •       行内代码
  •       代码块
  •       插入图像
  • 高阶语法手册
  •       目录
  •       信息面板
  •       手风琴
  •       语法高亮
  •       checklist
  •       公式
  •       插入音视频
  •       带对齐功能的表格
  •       表格配图
  •       流程图
  •       时序图
  •       状态图
  •       UML图
  •       饼图
  •       注释
  •       脚注
  • 编辑器操作能力
  •       通过快捷按钮修改字体样式
  •       复制html内容,粘贴成markdown
  •       快捷键
  •       协议
  • 特性展示
  •       语法特性
  •             特性 1:图片缩放、对齐、引用
  •                   语法
  •             特性 2:根据表格内容生成图表
  •             特性 3:字体颜色、字体大小
  •       功能特性
  •             特性 1:复制Html粘贴成MD语法
  •                   使用场景
  •             特性 2:经典换行&常规换行
  •                   使用场景
  •             特性 3: 多光标编辑
  •                   使用场景
  •             特性 4:图片尺寸
  •             特性 5:导出
  •       性能特性
  •             局部渲染
  •             局部更新
  • 基本语法


    字体样式

    说明

    • 使用*(或_)**(或__) 表示斜体粗体

    • 使用 / 表示 下划线 ,使用~~ 表示删除线

    • 使用^(或^^)表示上标下标

    • 使用 ! 号+数字 表示字体 [1]

    • 使用两个(三个)!号+RGB 颜色 表示字体颜色(背景颜色)[1]

    示例

    [!!#ff0000 红色超链接!!](http://www.qq.com)
    [!!#ffffff !!!#000000 黑底白字超链接!!!!!](http://www.qq.com)
    [新窗口打开](http://www.qq.com){target=_blank}
    鞋子 !32 特大号!
    大头 ^`儿子`^ 和小头 ^^`爸爸`^^
    爱在~~西元前~~**当下**

    效果
    红色超链接
    黑底白字超链接
    新窗口打开
    鞋子 特大号
    大头 儿子 和小头 爸爸
    爱在西元前当下


    标题设置

    说明

    • 在文字下方加 === 可使上一行文字变成一级标题

    • 在文字下方加 --- 可使上一行文字变成二级标题

    • 在行首加井号(#)表示不同级别的标题,例如:# H1, ##H2, ###H3


    超链接

    说明

    • 使用 [描述](URL) 为文字增加外链接

    • 使用<URL>插入一个链接

    • URL 会自动转成链接

    示例

    这是 [腾讯网](https://www.qq.com) 的链接。
    这是 [一个引用的][引用一个链接] 的链接。
    这是一个包含中文的链接<https://www.qq.com?param=中文>,中文
    直接识别成链接:https://www.qq.com?param=中文,中文 用空格结束
    [引用一个链接]
    [引用一个链接]: https://www.qq.com

    效果
    这是 腾讯网 的链接。
    这是 一个引用的 的链接。
    这是一个包含中文的链接www.qq.com?param=中文,中文
    直接识别成链接:www.qq.com?param=中文,... 用空格结束
    引用一个链接

     


    无序列表

    说明

    • 在行首使用 *,+,- 表示无序列表

    示例

    - 无序列表项 一`默认`
    - 无序列表项 二
      - 无序列表2.1
      - 无序列表2.2
    - 无序列表项 三
      + 无序列表3.1`空心圆`
      + 无序列表3.1
    - 无序列表四
      * 无序列表4.1`实心方块`
      * 无序列表4.2

    效果

    • 无序列表项 一默认

    • 无序列表项 二

      • 无序列表2.1

      • 无序列表2.2

    • 无序列表项 三

      • 无序列表3.1空心圆

      • 无序列表3.1

    • 无序列表四

      • 无序列表4.1实心方块

      • 无序列表4.2


    有序列表

    说明

    • 在行首使用数字、字母、汉字和点表示有序列表

    示例

    1. 有序列表项 一`阿拉伯数字`
    1. 有序列表项 二
      I. 有序列表项 2.1`罗马数字`
      I. 有序列表项 2.2
      I. 有序列表项 2.3
    1. 有序列表 三
      a. 有序列表3.1`希腊字母`
      a. 有序列表3.2
      a. 有序列表3.3
    1. 有序列表 四
      一. 有序列表4.1`中文数字`
      一. 有序列表4.2
      一. 有序列表4.3

    效果

    1. 有序列表项 一阿拉伯数字

    2. 有序列表项 二

      1. 有序列表项 2.1罗马数字

      2. 有序列表项 2.2

      3. 有序列表项 2.3

    3. 有序列表 三

      1. 有序列表3.1希腊字母

      2. 有序列表3.2

      3. 有序列表3.3

    4. 有序列表 四

      1. 有序列表4.1中文数字

      2. 有序列表4.2

      3. 有序列表4.3


    引用

    说明

    • 在行首使用 > 表示文字引用

    示例

    > 野火烧不尽,春风吹又生

    效果

    野火烧不尽,春风吹又生

    行内代码

    说明

    • 使用 `代码` 表示行内代码

    示例

    让我们聊聊 `html`

    效果
    让我们聊聊 html


    代码块

    说明

    • 使用 三个` 表示代码块

    效果

        这是一个代码块
        有两行

    插入图像

    说明

    • 使用 ![描述](图片链接地址) 插入图像

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

    • 使用![描述#宽度#高度#对齐方式](图片链接地址) 可以调整图片大小[1]

    示例

    标准图片  ![一条dog#100px](images/demo-dog.png)
    设置图片大小(相对大小&绝对大小)  ![一条dog#10%#50px](images/demo-dog.png)
    设置图片对齐方式:
    **左对齐+边框**
    ![一条dog#auto#100px#left#border](images/demo-dog.png)
    **居中+边框+阴影**
    ![一条dog#auto#100px#center#B#shadow](images/demo-dog.png)
    **右对齐+边框+阴影+圆角**
    ![一条dog#auto#100px#right#B#S#radius](images/demo-dog.png)
    **浮动左对齐+边框+阴影+圆角**
    ![一条dog#auto#100px#float-left#B#S#R](images/demo-dog.png)
    开心也是一天,不开心也是一天
    这样就过了两天,汪

    效果
    标准图片 一条dog#100px
    设置图片大小(相对大小&绝对大小) 一条dog#10%#50px
    设置图片对齐方式:
    左对齐+边框
    一条dog#auto#100px#left#border
    居中+边框+阴影
    一条dog#auto#100px#center#B#shadow
    右对齐+边框+阴影+圆角
    一条dog#auto#100px#right#B#S#radius
    浮动左对齐+边框+阴影+圆角
    一条dog#auto#100px#float-left#B#S#R
    开心也是一天,不开心也是一天
    这样就过了两天,汪

    属性释义:
    • 宽度:第一个 #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])来声明

    :::primary // [primary | info | warning | danger | success] 标题
    内容
    :::

    效果

    标题

    内容

    内容


    手风琴

    说明
    使用连续三个加号+++和关键字([ + | - ])来声明,关键字+表示默认收起,关键字-表示默认展开

    +++ 点击展开更多
    内容
    ++- 默认展开
    内容
    ++ 默认收起
    内容
    +++

    效果

    点击展开更多

    内容

    默认展开

    内容

    默认收起

    内容


    语法高亮

    说明

    • 在```后面指明语法名

    • 加强的代码块,支持四十一种编程语言的语法高亮的显示

    效果
    非代码示例:

    sudo apt-get install vim-gnome

    Python 示例:

    @requires_authorization
    def somefunc(param1='', param2=0):
        '''A docstring'''
        if param1 > param2: # interesting
            print 'Greater'
        return (param2 - param1 + 1) or None
    
    class SomeClass:
        pass
    
    >>> message = '''interpreter
    ... prompt'''

    JavaScript 示例:

    /**
     * nth element in the fibonacci series.
     * @param n >= 0
     * @return the nth element, >= 0.
     */
    function fib(n) {
      var a = 1,
        b = 1;
      var tmp;
      while (--n >= 0) {
        tmp = a;
        a += b;
        b = tmp;
      }
      return a;
    }
    
    document.write(fib(10));

    checklist[2]

    说明

    • 输入[ ][x],就会生成一个 checklist

    示例

    - [ ] AAA
    - [x] BBB
    - [ ] CCC

    效果

    • AAA

    • BBB

    • CCC


    公式[2]

    说明

    • 输入$$$,就会生成一个公式

    • 访问 MathJax 参考更多使用方法

    示例

    块级公式:$$
    \begin{aligned}
    P(B|A)&=\frac{P(AB)}{P(A)}\\
    P(\overline{B}|A)&=1-P(B|A)=1-\frac{P(AB)}{P(A)}
    \end{aligned}
    $$
    行内公式: $e=mc^2$

    效果
    块级公式:

    P(B|A)=P(AB)P(A)P(B|A)=1P(B|A)=1P(AB)P(A)

    行内公式: e=mc2


    插入音视频

    说明

    • 使用 !v[描述](视频链接地址) 插入视频

      • 使用 !v[描述](视频链接地址){poster=封面地址} 插入视频并配上封面

    • 使用 !audio[描述](视频链接地址) 插入音频

    示例

    这是个演示视频  !video[不带封面演示视频](images/demo.mp4)
    这是个演示视频  !video[带封面演示视频](images/demo.mp4){poster=images/demo-dog.png}
    这是个假音频!audio[描述](视频链接地址)

    效果

    这是个演示视频
    这是个演示视频
    这是个假音频

    带对齐功能的表格

    说明

    • 一种比较通用的markdown表格语法

    示例

    |项目(居中对齐)|价格(右对齐)|数量(左对齐)|
    |:-:|-:|:-|
    |计算机|¥1600|5|
    |手机机|¥12|50|

    效果

    项目(居中对齐)价格(右对齐)数量(左对齐)
    计算机¥16005
    手机机¥1250

    表格配图

    说明

    • 在通用表格语法的基础上,通过在首行首列单元格里写入关键字来同时生成表格和图表

    示例(折线图)

    | :line:{x,y} | Header1 | Header2 | Header3 | Header4 |
    | ------ | ------ | ------ | ------ | ------ |
    | Sample1 | 11 | 11 | 4 | 33 |
    | Sample2 | 112 | 111 | 22 | 222 |
    | Sample3 | 333 | 142 | 311 | 11 |

    效果

    :line:{x,y}Header1Header2Header3Header4
    Sample11111433
    Sample211211122222
    Sample333314231111

    示例(柱状图)

    | :bar:{y,x} | Header1 | Header2 | Header3 | Header4 |
    | ------ | ------ | ------ | ------ | ------ |
    | Sample1 | 11 | 11 | 4 | 33 |
    | Sample2 | 112 | 111 | 22 | 222 |
    | Sample3 | 333 | 142 | 311 | 11 |

    效果

    :bar:{y,x}Header1Header2Header3Header4
    Sample11111433
    Sample211211122222
    Sample333314231111

    流程图[2]

    说明

    效果
    小明老婆让小明下班时买一斤包子,如果遇到卖西瓜的,买一个。

    左右结构

    下 班
    Yes
    No
    公司
    菜市场
    看见
    卖西瓜的
    买一个包子
    买一斤包子

    上下结构

    下 班
    Yes
    No
    公司
    菜市场
    看见
    卖西瓜的
    买一个包子
    买一斤包子

    时序图[2]

    说明

    效果

    ABloop[循环2]loop[循环3]loop[循环1]文本1文本2文本3文本4文本5AB

    状态图[2]

    说明

    效果

    A
    D
    B
    C

    UML图[2]

    说明

    效果

    Base
    +String name
    +getName()
    +setName(String name)
    One
    +String newName
    +getNewName()
    Two
    -int id
    -getId()

    饼图[2]

    说明

    效果

    饼图40%30%20%10%饼图ABCD

    注释[2]

    说明

    • 使用中括号+冒号([]:)生成单行注释

    • 使用中括号+尖号+冒号([^]:)生成多行注释

    • 多行注释以连续两次回车结束

    示例

    下面是一行单行注释
    [注释摘要]: 这是一段注释,不会显示到页面上
    上面面是一行单行注释
    下面是多行注释
    [^注释摘要]: 这是一段多行注释,不会显示到页面上
    可以换行
        可以缩进
    以两次回车结束
    
    上面是多行注释

    效果
    下面是一行单行注释

    上面面是一行单行注释
    下面是多行注释

     

    上面是多行注释


    脚注[2]

    说明

    • 在段落中引用多行注释即会生成脚注

    • 脚注中括号中的数字以引用脚注的顺序自动生成

    • 点击脚注的数字可以跳转到脚注详情或回到引用脚注位置

    示例

    这里需要一个脚注[^脚注别名1],另外这里也需要一个脚注[^another]
    [^脚注别名1]: 无论脚注内容写在哪里,脚注的内容总会显示在页面最底部
    以两次回车结束
    
    [^another]: 另外,脚注里也可以使用一些简单的markdown语法
    >比如 !!#ff0000 这里!!有一段**引用**
    

    效果
    这里需要一个脚注[3],另外这里也需要一个脚注[4]

     


    编辑器操作能力


    通过快捷按钮修改字体样式

    bubble menu


    复制html内容,粘贴成markdown

    说明

    • 粘贴html内容时会自动转成markdown,也可以选择粘贴为纯文本格式

    • 可以拖拽调整预览区域的宽度

    copy and paste


    快捷键

    功能按键(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

    协议

    /**
     * Tencent is pleased to support the open source community by making CherryMarkdown available.
     *
     * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
     * The below software in this distribution may have been modified by THL A29 Limited ("Tencent Modifications").
     *
     * All Tencent Modifications are Copyright (C) THL A29 Limited.
     *
     * CherryMarkdown is licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.
     * You may obtain a copy of the License at
     *
     *     http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
     */

     

    特性展示

    语法特性

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

    特性 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:图片尺寸

    wysiwyg

    特性 5:导出

    wysiwyg


    性能特性

    局部渲染

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

    wysiwyg

    局部更新

    CherryMarkdown利用virtual dom机制实现对预览区域需要变更的内容进行局部更新的功能,从而减少了浏览器Dom操作,提高了修改时预览内容更新的性能
    wysiwyg
    脚注
    [1]该语法是CherryMarkdown专有语法,可能无法在其他markdown平台上使用该语法
    [2]该语法不是markdown通用语法,无法保证在其他markdown平台上进行正确渲染
    [3]无论脚注内容写在哪里,脚注的内容总会显示在页面最底部
    以两次回车结束
    [4]另外,脚注里也可以使用一些简单的markdown语法
    比如 这里有一段引用
    作者:zeejk007  创建时间:2024-08-05 10:43
    最后编辑:zeejk007  更新时间:2024-08-22 11:31