洛谷编辑器帮助手册
因为编辑器尚处于热开发阶段，还有很多功能没有完善，因此帮助手册暂时放在这里，方便进行热更新。
有一些需要反馈的 bug 可以直接发在本专栏评论区（但不保证一定会处理）。
排版格式
洛谷文章的排版基于 Markdown，而为了支持数学公式使用了基于
- Markdown 使用帮助：https://help.luogu.com.cn/rules/academic/handbook/markdown；
- LaTeX 使用帮助：https://help.luogu.com.cn/rules/academic/handbook/latex。
另附一些可能有用的资料：
- Github Flavord Markdown，简称 GFM，https://github.github.com/gfm/，是一个得到广泛共识的 Markdown 语法规范。洛谷使用的 Markdown 语法基本基于 GFM；
- KaTeX 官方语法手册 https://katex.org/docs/supported，是最全面最准确的描述基于 KaTeX 实现的 LaTeX 功能的文档，适用于有意了解 LaTeX 更进一步语法的同学。
本文主要介绍编辑器的相关功能以及期望的行为。
Markdown 插件
为了丰富用户编辑体验，我们引入了 remark-directive 用于实现多种插件。具体而言，我们引入了以下两种语法：
容器 Directive（containerDirective）：
:::name[label]{attributes}
Something...
:::容器 Directive 需要至少三个冒号。容器 Directive 允许嵌套，父容器的冒号数量应大于子容器的冒号数量。
叶子 Directive（leafDirective）：
::name[label]{attributes}叶子 Directive 需要恰好两个冒号，并出现在单独一行里。
我们基于 remark-directive 实现了以下功能：
Callouts
一共有 4 种 Callouts，分别为 info，success，warning，error。例如：
:::info[这是一个提示] 我是提示内容。 :::
:::info[这是一个提示]
我是提示内容。
:::在方括号里编写 Callout 的标题。
Callout 支持默认展开的语法，只需要在 attributes 部分加上 open 标记：
:::success[我默认处于展开状态]{open} 我是展开内容。 :::
:::success[我默认处于展开状态]{open}
我是展开内容。
:::Callouts 支持嵌套。但请不要滥用嵌套。
:::::warning[我是父容器]
我是一些文字。
::::success[我是子容器 1]{open} 我是内容 1。 ::::
我是一些文字。
::::success[我是子容器 2]{open} :::error[我是子容器 3]{open} 我是内容 2。 ::: ::::
我是一些文字。
:::::
::::::info[源码]
:::::warning[我是父容器]
我是一些文字。
::::success[我是子容器 1]{open}
我是内容 1。
::::
我是一些文字。
::::success[我是子容器 2]{open}
:::error[我是子容器 3]{open}
我是内容 2。
:::
::::
我是一些文字。
:::::::::::
表格
我们为表格增加了两项插件：表格合并（基于 rehype-extend-table，有更改）和表格样式（基于 remark-directive + CSS 样式）。
表格合并的相关功能已经集成到了编辑器里。工具栏里的表格工具可用于编辑表格。
示例：基础表格（GFM 默认）。
| 测试点编号 | 特殊性质 | ||
|---|---|---|---|
| 无 | |||
| 无 | |||
| A | |||
| 无 | |||
| 无 |
单元格合并：
| 测试点编号 | 特殊性质 | ||
|---|---|---|---|
| 无 | |||
| ^ | ^ | 无 | |
| ^ | A | ||
| ^ | ^ | 无 | |
| ^ | 无 |
三线表风格：
::cute-table{three}
| 测试点编号 | 特殊性质 | ||
|---|---|---|---|
| 无 | |||
| 无 | |||
| A | |||
| 无 | |||
| 无 |
Tuack 风格：
::cute-table{tuack}
| 测试点编号 | 特殊性质 | ||
|---|---|---|---|
| 无 | |||
| ^ | ^ | 无 | |
| ^ | A | ||
| ^ | ^ | 无 | |
| ^ | 无 |
在某些情况下我们需要额外加粗竖线（例如，有两列测试点）。此时可以在 tuack 传入参数指定竖线位置：
::cute-table{tuack=3}
| 测试点编号 | 测试点编号 | ||||
|---|---|---|---|---|---|
| ^ | ^ | ^ | ^ | ||
| ^ | ^ | ^ | ^ | ||
| ^ | ^ | ^ | |||
| ^ | ^ | ^ | ^ |
为了防止滥用，我们修改了 rehype-extend-table 的部分语法，使之处理某些“不规范”的表格时不会发生错误（例如多余或者缺少的单元格）。
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| a | < | < | ^ | < |
| ^ | a | < | ^ | < |
| ^ | > | a | ^ | < |
| < | < | < | a | < |
::::info[源码]
:::info[默认样式]
|测试点编号 |$n\le $|$m\le $|特殊性质|
|:--------:|:-----:|:-----:|:--:|
|$1\sim 2$ |$100$ |$100$ |无 |
|$3\sim 4$ |$100$ |$100$ |无 |
|$5$ |$10^5$ |$100$ |A |
|$6\sim 8$ |$10^5$ |$100$ |无 |
|$9\sim 10$|$10^5$ |$10^5$ |无 |:::
:::info[单元格合并]
|测试点编号 |$n\le $|$m\le $|特殊性质|
|:--------:|:-----:|:-----:|:--:|
|$1\sim 2$ |$100$ |$100$ |无 |
|$3\sim 4$ |^ |^ |无 |
|$5$ |$10^5$ |^ |A |
|$6\sim 8$ |^ |^ |无 |
|$9\sim 10$|^ |$10^5$ |无 |:::
:::info[三线表风格]
::cute-table{three}
|测试点编号 |$n\le $|$m\le $|特殊性质|
|:--------:|:-----:|:-----:|:--:|
|$1\sim 2$ |$100$ |$100$ |无 |
|$3\sim 4$ |$100$ |$100$ |无 |
|$5$ |$10^5$ |$100$ |A |
|$6\sim 8$ |$10^5$ |$100$ |无 |
|$9\sim 10$|$10^5$ |$10^5$ |无 |:::
:::info[tuack 风格]
::cute-table{tuack}
|测试点编号 |$n\le $|$m\le $|特殊性质|
|:--------:|:-----:|:-----:|:--:|
|$1\sim 2$ |$100$ |$100$ |无 |
|$3\sim 4$ |^ |^ |无 |
|$5$ |$10^5$ |^ |A |
|$6\sim 8$ |^ |^ |无 |
|$9\sim 10$|^ |$10^5$ |无 |::cute-table{tuack=3}
|测试点编号|$n\le $|$m\le $|测试点编号|$n\le $|$m\le $|
|:---:|:-----:|:-----:|:---:|:-----:|:-----:|
|$1$ |$100$ |$100$ |$6$ |$10^5$ |$10^5$ |
|$2$ |^ |^ |$7$ |^ |^ |
|$3$ |^ |^ |$8$ |^ |^ |
|$4$ |^ |$10^5$ |$9$ |^ |^ |
|$5$ |^ |^ |$10$ |^ |^ |:::
:::error[非法情况]
我们不保证非法情况的渲染是合理的，我们只保证非法情况不会导致长得很奇怪的单元格。
|1 |2 |3 |4 |5 |
|:-:|:-:|:-:|:-:|:-:|
|a |< |< |^ |< |
|^ |a |< |^ |< |
|^ |> |a |^ |< |
|< |< |< |a |< |:::
::::
编辑区
编辑区部分使用 Codemirror6 实现，加了一些插件。比如行数显示，搜索功能（使用 Ctrl+F 打开），多行选择（按住 Alt 选择可以同时选中多行内容，但是中文环境 bug 多，慎用）。左侧箭头可以对代码进行折叠。
使用了 Markdown Language，编辑高亮基本遵循 Github Flavord Markdown 语法。但为了适配洛谷环境，进行了如下修改：禁用 HTML 语法高亮；对数学公式进行高亮。
作为较为先进的开源编辑器，Codemirror 的可靠性得到了普遍检验。拥有性能表现高、扩展能力好、兼容能力强等特点。
代码块
洛谷基于 PrismJS 接管代码高亮。在代码块语法（``` 或者 \~\~\~ 包裹的内容）上加上语言标记（如 cpp，py 等）可以自动给代码块加上高亮。处于历史兼容性考虑，若未添加语言标记默认按照 C++ 格式高亮，如果你希望以文本格式高亮，可以添加任意无法被识别为编程语言的标记如 plain 或者 plaintext。
例如以下代码文本：
#include <bits/stdc++.h>
using namespace std;
int main(){
ios :: sync_with_stdio(false);
cin.tie(nullptr);
int a, b;
cin >> a >> b;
cout << a + b << endl;
return 0;
}我们添加了 line-number 插件以及 line-highlight 插件，用于添加代码行号，以及帮助用户高亮某些行。对于后者，示例如下：
#include <bits/stdc++.h>
using namespace std;
int main(){
ios :: sync_with_stdio(false); // 解绑流同步
cin.tie(nullptr); // 解绑 cin & cout
int a, b;
cin >> a >> b;
cout << a + b << endl;
return 0; // 记得 return 0
}:::info[源码]
```cpp
#include <bits/stdc++.h>
using namespace std;
int main(){
ios :: sync_with_stdio(false);
cin.tie(nullptr);
int a, b;
cin >> a >> b;
cout << a + b << endl;
return 0;
}
``````cpp lines=5-6,11
#include <bits/stdc++.h>
using namespace std;
int main(){
ios :: sync_with_stdio(false); // 解绑流同步
cin.tie(nullptr); // 解绑 cin & cout
int a, b;
cin >> a >> b;
cout << a + b << endl;
return 0; // 记得 return 0
}
```:::
布局
我们添加了左对齐、右对齐、居中对齐文字的方法。这些方法仅能应用于段落和标题行。换言之，代码块、表格（请使用 cute-table）、列表等元素无效。
语法：
:::align{left}
居左内容。
:::
:::align{center}
居中内容。
:::
:::align{right}
居右内容。
::::::align{left} 居左内容。 :::
:::align{center} 居中内容。 :::
:::align{right} 居右内容。 :::
对齐方式同样支持嵌套，用于帮助用户进行调整。
::::align{right} 我是居右内容。
我是居右内容。
:::align{center} 我是居中内容。 :::
我是居右内容。 ::::
::::align{right}
我是居右内容。
我是居右内容。
:::align{center}
我是居中内容。
:::
我是居右内容。
::::Codeforces 风格 epigraph
模仿 Codeforces，我们实现了 epigraph，可帮助用户在题目背景进行书写。
:::epigraph[——otto] 大家好啊，我是说的道理。 :::
:::epigraph[——otto]
大家好啊，我是说的道理。
:::尽管技术上 epigraph 支持嵌套，但请不要滥用。
预览区
预览区使用 Rehype+Remark 的组合将 Markdown 源码翻译成 HTML 并在右侧展示。
编辑器功能介绍
工具栏
最上面一排是工具栏，主要由操作按钮组成，方便用户对文本进行编辑。
显示设置
右侧可以对编辑区、预览区进行显示/隐藏，也可以进入全屏编辑模式。一般来说由于预览对性能的损耗较大，尽管我们使用了防抖来降低预览区刷新的频率，但当文章较长时建议关闭预览。
自动保存
编辑器自带定时保存功能，主要用来防止用户误关闭页面忘记对编辑内容进行保存。处于活跃状态的编辑器每分钟会进行一次保存，最多缓存最后十次自动保存的结果。可以点击右上角的自动保存按钮调取内容。
滚动同步
当滚动同步处于开启状态时，滚动编辑区文本会使预览区同步滚动至相同高度；滚动预览区会使编辑区文本同步滚动至相同高度。
特别地，当滚动的那一侧到达底部时，另一侧也会跟着到达底部。
值得注意的是，编辑器以用户光标位置（编辑区/预览区）作为焦点，如果用户在编辑区的末尾编辑文字，而此时光标处于预览区，可能会导致底部位置的同步功能处于失效状态；如果文章中插入了较长的图片，由于编辑器优先将编辑区顶部和预览区顶部进行对齐，可能会导致下半部分差距较大。
用户可以在右下角设置滚动同步状态。
快捷键
我们增设了 Markdown 编辑快捷键，辅助用户进行编写。下文中提到的 Mod 键，在 Mac 系统指命令键（⌘），在其它系统指 Ctrl 键。
具体而言，有如下快捷键：
- 提升标题行等级：
Mod+Shift+↑； - 降低标题行等级：
Mod+Shift+↓； - 插入水平线：
Mod+Shift+H； - 加粗：
Mod+B； - 斜体：
Mod+I； - 删除：
Mod+D； - 数学公式：
Mod+M； - 插入链接：
Mod+Shift+L； - 插入图片：
Mod+Shift+I； - 插入引用块：
Mod+Shift+Q； - 插入代码：
Mod+Shift+1； - 插入表格：
Mod+Shift+2； - 插入无序列表：
Mod+Shift+7； - 插入有序列表：
Mod+Shift+8； - 插入任务列表：
Mod+Shift+9。
以后可能会增加设置帮助用户进行调整。
杂项
左下角有字数统计功能，统计编辑区的字符数量。每个英文字母、汉字、标点、空格均算作一个字符。仅供参考。
帮助手册
引导用户查阅资料获取帮助。