Typecho Markdown 编辑器

使用的是Cherry Markdown

关于MathJax公式，drawIo绘图，从多的小功能后续看情况添加。可以定制一些主流主题"自带"的Markdown语法。

复制一些支持的语法

支持斜线快捷键输入
截图粘贴自动上传

多种主题（支持修改背景图）

斜线工具栏

悬浮工具栏，右边表格可视化编辑

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

[[toc]]

基本语法

字体样式

说明

使用*(或_) 和 **(或__) 表示斜体和粗体
使用 / 表示 /下划线/ ,使用~~ 表示~~删除线~~
使用^(或^^)表示^上标^或^^下标^^
使用 ! 号+数字表示字体 !24 大! !12 小! ¹
使用两个(三个)!号+RGB 颜色表示!!#ff0000 字体颜色!!(!!!#f9cb9c 背景颜色!!!)¹

示例

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

效果 !!#ff0000 红色超链接!! !!#ffffff !!!#000000 黑底白字超链接!!!!! 新窗口打开{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

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

无序列表

说明

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

示例

- 无序列表项 一`默认`
- 无序列表项 二
  - 无序列表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

效果

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

引用

说明

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

示例

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

效果

野火烧不尽，春风吹又生

行内代码

说明

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

示例

让我们聊聊 `html`

效果让我们聊聊 html

代码块

说明

使用三个` 表示代码块

效果

    这是一个代码块
    有两行

插入图像

说明

使用 ![描述](图片链接地址) 插入图像
截图，在编辑器中粘贴（ctrl+V）也可以插入图像
使用![描述#宽度#高度#对齐方式](图片链接地址) 可以调整图片大小¹

示例

标准图片  ![一条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)
开心也是一天，不开心也是一天
这样就过了两天，汪

效果标准图片设置图片大小(相对大小&绝对大小) 设置图片对齐方式： 左对齐+边框 居中+边框+阴影 右对齐+边框+阴影+圆角 浮动左对齐+边框+阴影+圆角 开心也是一天，不开心也是一天这样就过了两天，汪

属性释义：

宽度：第一个 #100px 或 #10% 或 #auto
高度：第二个 #100px 或 #10% 或 #auto
左对齐：#left
右对齐：#right
居中对齐：#center
悬浮左对齐：#float-left
悬浮右对齐：#float-right
边框：#border 或 #B
阴影：#shadow 或 #S
圆角：#radius 或 #R

高阶语法手册

信息面板

说明使用连续三个冒号:::和关键字（[primary | info | warning | danger | success]）来声明

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

效果 :::p 标题内容 ::: :::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²

说明

输入[ ]或[x]，就会生成一个 checklist

示例

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

效果

公式²

说明

输入$$或$，就会生成一个公式
访问 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$

效果块级公式：$$ \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$

插入音视频

说明

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

示例

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

效果

这是个演示视频 !video不带封面演示视频这是个演示视频 !video带封面演示视频{poster=images/demo-dog.png} 这是个假音频!audio描述

带对齐功能的表格

说明

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

示例

|项目（居中对齐）|价格（右对齐）|数量（左对齐）|
|:-:|-:|:-|
|计算机|￥1600|5|
|手机机|￥12|50|

效果

项目（居中对齐）	价格（右对齐）	数量（左对齐）
计算机	￥1600	5
手机机	￥12	50

流程图²

说明

访问Mermaid 流程图参考具体使用方法。

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

左右结构

graph LR
    A[公司] -->| 下 班 | B(菜市场)
    B --> C{看见<br>卖西瓜的}
    C -->|Yes| D[买一个包子]
    C -->|No| E[买一斤包子]

上下结构

graph TD
    A[公司] -->| 下 班 | B(菜市场)
    B --> C{看见<br>卖西瓜的}
    C -->|Yes| D[买一个包子]
    C -->|No| E[买一斤包子]

时序图²

说明

访问Mermaid 时序图参考具体使用方法

效果

sequenceDiagram
A-->A: 文本1
A->>B: 文本2
loop 循环1
loop 循环2
A->B: 文本3
end
loop 循环3
B -->>A: 文本4
end
B -->> B: 文本5
end

状态图²

说明

访问Mermaid 状态图参考具体使用方法

效果

stateDiagram
[*] --> A
A --> B
A --> C
state A {
    [*] --> D
    D --> [*]
}
B --> [*]
C --> [*]

UML图²

说明

访问Mermaid UML图参考具体使用方法

效果

classDiagram
Base <|-- One
Base <|-- Two
Base : +String name
Base: +getName()
Base: +setName(String name)
class One{
  +String newName
  +getNewName()
}
class Two{
  -int id
  -getId()
}

饼图²

说明

访问Mermaid 饼图参考具体使用方法

效果

pie
title 饼图
"A" : 40
"B" : 30
"C" : 20
"D" : 10

注释²

说明

使用中括号+冒号（[]:）生成单行注释
使用中括号+尖号+冒号（[^]:）生成多行注释
多行注释以连续两次回车结束

示例

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

上面是多行注释

效果下面是一行单行注释 [注释摘要]: 这是一段注释，不会显示到页面上上面面是一行单行注释下面是多行注释

上面是多行注释

脚注²

说明

在段落中引用多行注释即会生成脚注
脚注中括号中的数字以引用脚注的顺序自动生成
点击脚注的数字可以跳转到脚注详情或回到引用脚注位置

示例

这里需要一个脚注[^脚注别名1]，另外这里也需要一个脚注[^another]。
[^脚注别名1]: 无论脚注内容写在哪里，脚注的内容总会显示在页面最底部
以两次回车结束

[^another]: 另外，脚注里也可以使用一些简单的markdown语法
>比如 !!#ff0000 这里!!有一段**引用**

效果这里需要一个脚注³，另外这里也需要一个脚注⁴。

比如 !!#ff0000 这里!!有一段引用

编辑器操作能力

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

复制html内容，粘贴成markdown

说明

粘贴html内容时会自动转成markdown，也可以选择粘贴为纯文本格式
可以拖拽调整预览区域的宽度

快捷键

功能	按键
1级标题	`Ctrl + 1`
2级标题	`Ctrl + 2`
3级标题	`Ctrl + 3`
4级标题	`Ctrl + 4`
5级标题	`Ctrl + 5`
6级标题	`Ctrl + 6`
加粗	`Ctrl + b`
斜体	`Ctrl + i`
插入链接	`Ctrl + l`
插入代码块	`Ctrl + k`
插入图片	`Ctrl + g`
插入公式	`Ctrl + 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语法

使用场景

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

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

使用场景

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

特性 3: 多光标编辑

使用场景

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

特性 4：图片尺寸

特性 5：导出

性能特性

局部渲染

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

局部更新

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

该语法是CherryMarkdown专有语法，可能无法在其他markdown平台上使用该语法 ↩ ↩² ↩³
该语法不是markdown通用语法，无法保证在其他markdown平台上进行正确渲染 ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶ ↩⁷ ↩⁸ ↩⁹
无论脚注内容写在哪里，脚注的内容总会显示在页面最底部以两次回车结束 ↩
另外，脚注里也可以使用一些简单的markdown语法 ↩

guugg/FanEd

Typecho Markdown 编辑器

复制一些支持的语法

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

基本语法

字体样式

标题设置

超链接

无序列表

有序列表

引用

行内代码

代码块

插入图像

高阶语法手册

目录

信息面板

手风琴

语法高亮

checklist2

公式2

插入音视频

带对齐功能的表格

流程图2

时序图2

状态图2

UML图2

饼图2

注释2

脚注2

编辑器操作能力

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

复制html内容，粘贴成markdown

快捷键

协议

特性展示

语法特性

特性 1：图片缩放、对齐、引用

语法

特性 2：根据表格内容生成图表

特性 3：字体颜色、字体大小

功能特性

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

使用场景

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

使用场景

特性 3: 多光标编辑

使用场景

特性 4：图片尺寸

特性 5：导出

性能特性

局部渲染

局部更新

Footnotes

checklist²

公式²

流程图²

时序图²

状态图²

UML图²

饼图²

注释²

脚注²