编辑器使用

Markdown 编辑器

了解如何使用文流的 Markdown 编辑器,包括基础语法、快捷键、高级功能等。

界面布局

文流采用三栏布局设计,面板之间的分隔线可以拖拽调整宽度。

编辑器Monaco Editor解析引擎remark/rehype预览区实时渲染主题面板样式选择输出HTML/微信

编辑器

基于 Monaco Editor,支持语法高亮、自动补全、多光标编辑

Monaco Editor

预览区

实时渲染 Markdown,所见即所得,渲染延迟 <100ms

实时渲染

主题面板

50+ 精美主题,支持 AI 生成个性化主题

样式选择

Markdown 基础语法

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

文本样式

**粗体文本**
*斜体文本*
~~删除线~~
`行内代码`

列表

- 无序列表项 1
- 无序列表项 2
  - 嵌套列表项

1. 有序列表项 1
2. 有序列表项 2

- [ ] 待办事项
- [x] 已完成事项

链接和图片

[链接文本](https://example.com)
![图片描述](https://example.com/image.jpg)

高级功能

代码高亮

支持 100+ 编程语言

数学公式

LaTeX 语法支持

Mermaid 图表

流程图、时序图等

图片上传

拖拽或粘贴上传

代码块

```javascript
function hello() {
  console.log("Hello, World!");
}
```

数学公式

行内公式:$E = mc^2$

块级公式:
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

Mermaid 图表

```mermaid
graph LR
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]
    C --> D
```

表格

| 列名 1 | 列名 2 | 列名 3 |
|--------|--------|--------|
| 内容 1 | 内容 2 | 内容 3 |
| 内容 4 | 内容 5 | 内容 6 |

快捷键

功能快捷键
加粗选中文本Ctrl + B
斜体选中文本Ctrl + I
插入链接Ctrl + K
复制到公众号Ctrl + Shift + C
保存文档Ctrl + S

图片上传

支持多种方式上传图片:

拖拽上传

直接将图片拖拽到编辑器中

粘贴上传

复制图片后直接粘贴到编辑器

工具栏上传

点击工具栏图片按钮选择文件

💡
上传的图片会自动存储到云端,支持 HTTPS 访问,确保在微信公众号中正常显示。