新前端 md 语法

Author: hh0592821

docs/rules/academic/handbook/_image/Collapsible_Panel.png

@@ -4,6 +4,13 @@ Markdown 的目标是实现「易读易写」，成为一种适用于网络的
 
 **请仔细阅读下列文档，如果没有按照要求正确使用格式，将可能无法发出讨论，或者被删除。**
 
+:::info[请注意]
+
+- 本页面显示效果非洛谷主站实际效果，仅作为参考。部分语法使用截图展示。
+- 部分新语法特性仅支持新前端页面，无法在老前端页面内使用。
+
+:::
+
 ## 段落和换行
 
 一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的**空行**。普通的 Markdown 段落不可以用空格或制表符来缩进。
@@ -137,11 +144,33 @@ Markdown 建立代码块的方法：将 \`\`\` 置于这段代码的首行和末
 #include<iostream>
 ```
 
+### 指定范围高亮
+
+【仅支持新前端页面】在代码块中首行使用 `lines=start-end` 来指定范围高亮。例如：
+
+```markdown
+```cpp lines=5-6
+```
+
+![代码高亮示例](./_image/code_block_Highlighting.png "5～6 行高亮")
+
+这样代码块的第 5～6 行会被高亮。
+
 ### 小段代码
 
 需要引用代码时，如果引用的语句只有一段，不分行，可以用 \` 将语句包起来。
 
-注：如果真的要打 \` 这个字符的话，可以仿照和 \* 这个字符一样的处理方式，在 \` 前加一个反斜杠。
+**例如：**
+
+```markdown
+前面的内容 `printf("Hello World!\n");` 后面的内容。
+```
+
+**显示的效果如下：**
+
+前面的内容 `printf("Hello World!\n");` 后面的内容。
+
+注：如果真的要打 \` 这个字符的话，可以仿照和 \* 这个字符一样的处理方式，在 \` 前加一个反斜杠`\`。
 
 ## 区块引用
 
@@ -168,7 +197,7 @@ Markdown 标记区块引用的方法是在行的最前面加 `>`，也可以只
 > > ```
 ```
 
-显示的效果如下：
+**显示的效果如下：**
 
 > Markdown 标记区块引用的方法是在行的最前面加 `>`。
 >
@@ -240,10 +269,12 @@ Markdown 支持有序列表和无序列表，无序列表使用星号、加号
 在方块括号后面紧接着圆括号并插入网址链接即可，如果还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如：
 
 ```md
-[行内式链接标题](http://www.luogu.org/)
+[行内式链接标题](http://www.luogu.com.cn/ "可选标题")
 ```
 
-显示效果：这是 [行内式链接标题](http://www.luogu.org/ "可选标题") 内联方式。
+显示效果：
+
+这是 [行内式链接标题](http://www.luogu.com.cn/ "可选标题") 内联方式。请将光标移至连接上查看效果。
 
 ## 图片
 
@@ -260,19 +291,19 @@ Markdown 使用一种和链接很相似的语法来标记图片。在互联网
 **例如：**
 
 ```markdown
-![logo](https://cdn.class.luogu.com.cn/fe/logo-full.png?27925f707b34b1472e135b1a2dd848e5)
+![洛谷网校 logo](https://cdn.class.luogu.com.cn/fe/logo-full.png?27925f707b34b1472e135b1a2dd848e5 "洛谷网校 logo")
 ```
 
 将会显示图片：
 
-![logo](https://cdn.class.luogu.com.cn/fe/logo-full.png?27925f707b34b1472e135b1a2dd848e5)
+![洛谷网校 logo](https://cdn.class.luogu.com.cn/fe/logo-full.png?27925f707b34b1472e135b1a2dd848e5 "洛谷网校 logo")
 
 ## 自动链接
 
 Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来，Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如：
 
 ```markdown
-[https://www.luogu.com.cn/](https://www.luogu.com.cn/)
+<https://www.luogu.com.cn/>
 ```
 
 显示效果为：
@@ -327,6 +358,130 @@ _   底线
 .   英文句点
 !   惊叹号
 ```
+## 表格合并
+
+【仅支持新前端页面】在正常 Markdown 语法的基础上，结合`^`来跨行合并单元格，结合`<`来跨列合并单元格。在同一个表格内可混合使用这两种方式。
+
+```markdown
+| 标题 1| 标题 2| 标题 3    |标题 4|
+|:-:|:--------:|:--------:|:--:|
+|1  |$\le 10$  |$\le 10$  |无   |
+|2  |^         |^         |无   |
+|3  |^         |^         |无   |
+|4  |$\le 3\times 10^5$|^         |无   |
+|5  |^         |^         |无   |
+|6  |^         |$\le 3\times 10^5$|无   |
+|7  |^         |^         |无   |
+|8  |^         |^         |无   |
+|9  |^         | 跨列合并 1         |<   |
+|10 |跨列合并 2         |<         |无   |
+```
+**效果：**
+
+![表格合并示例](./_image/table_span.png)
+
+## 更像 Tuack 的表格
+
+【仅支持新前端页面】使用```:::cute-table{tuack}```来创建更像 Tuack 的表格。可以结合上文的表格合并语法使用。
+
+```markdown
+::cute-table{tuack}
+
+| 测试点编号 | $n, m \leq$ | $k \leq$ | 特殊性质 |
+| :-: | :-: | :-: | :-: |
+| $1, 2$ | $6$ | $6$ | C |
+| $3 \sim 5$ | $10^3$ | $10^3$ | ^ |
+| $6 \sim 8$ | $5 \times 10^4$ | $10^2$ | 无 |
+| $9, 10$ | $10^5$ | $10^5$ | AB |
+| $11, 12$ | ^ | ^ | A |
+| $13 \sim 15$ | ^ | ^ | C |
+| $16 \sim 18$ | ^ | ^ | 无 |
+| $19, 20$ | $3 \times 10^5$ | $2.5 \times 10^5$ | ^ |
+```
+**显示效果：**
+
+![更像 Tuack 的表格示例](./_image/table_tuack.png)
+## 居中排版
+
+【仅支持新前端页面】使用```:::align{center}```来居中排版。被此语法包裹的内容将居中显示（部分元素不支持）。
+
+**例如：**
+
+```markdown
+:::align{center}
+
+![](https://cdn.luogu.com.cn/upload/usericon/1.png)
+ 123
+#### 标题 4
+:::
+```
+**显示效果：**
+
+![居中排版示例](./_image/align_center.png)
+
+## 居右排版
+
+【仅支持新前端页面】使用```:::align{right}```来居右排版。被此语法包裹的内容将居右显示。
+
+**例如：**
+
+```markdown
+:::align{right}
+
+![](https://cdn.luogu.com.cn/upload/usericon/1.png)
+ 123
+#### 标题 4
+:::
+```
+**显示效果：**
+
+![居右排版示例](./_image/align_right.png)
+
+## CF 风格 epigraph
+
+【仅支持新前端页面】使用```:::epigraph```来创建 CF 风格 epigraph。
+
+**例如：**
+
+```markdown
+:::epigraph[——otto]
+大家好啊，我是说的道理，今天来点大家想看的东西。
+:::
+```
+
+**显示效果：**
+
+![CF 风格 epigraph 示例](./_image/epigraph.png)
+
+## 折叠框
+
+【仅支持新前端页面】使用```:::info```、```:::success```、```:::warning```来创建折叠框。并使用`{open}`来使折叠框默认展开。折叠框的标题支持 LaTeX 公式。
+
+:::tip
+建议复制以下代码至洛谷文章编辑页内测试体验。
+:::
+
+**例如：**
+
+```markdown
+::::info[我是标题]
+大家好啊，我是说的道理，今天来点大家想看的东西。
+::::
+
+::::info[我是默认展开的折叠框]{open}
+使用 `{open}` 使折叠框默认展开。
+::::
+
+::::success[$$\displaystyle\sum_{i = 1}^n \sum_{j = 1}^n \gcd(i, j)$$]
+数学公式也是可以出现在标题上的。
+::::
+
+::::warning[警告]
+这是一个警告框。
+::::
+```
+
+![折叠框示例](./_image/Collapsible_Panel.png)
 
 ## 插入 Bilibili 视频