# 短代码

**短代码**可以直接在文章编辑器里书写，可以与 Markdown 标识混用，用来帮助写作者更好地排版。

### Tip（提示框）

Tip 用来展示一段需要被读者注意的简短**提示/警告信息**，有多种颜色供选择，语法如下：

```
[tip]普通的灰色 Tip[/tip]
[tip type="blue"]蓝色的 Tip，通常用于标识一段有用的信息[/tip]
[tip type="yellow"]黄色的 Tip，通常用于标识一段需要引起注意的信息[/tip]
[tip type="red"]红色的 Tip，通常用于标识一段警告信息[/tip]
[tip type="green"]绿色的 Tip，通常用于标识一段祝贺/成功/正面的信息[/tip]
```

![](https://1100254127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD51uWqmmX4iWdnmjM7%2F-MMkeqRXXi3Q5-Kcfp4h%2F-MMkfDOnuW6heWfdpNFn%2Fimage.png?alt=media\&token=a1b96827-61c7-4ba4-9a1d-e2fb899cc8a7)

你还可以用 Tip Group 把这些 Tip 放在一起，这会让他们排列得更紧密

```
[tip-group]
[tip]普通的灰色 Tip[/tip]
[tip type="blue"]蓝色的 Tip，通常用于标识一段有用的信息[/tip]
[tip type="yellow"]黄色的 Tip，通常用于标识一段需要引起注意的信息[/tip]
[tip type="red"]红色的 Tip，通常用于标识一段警告信息[/tip]
[tip type="green"]绿色的 Tip，通常用于标识一段祝贺/成功/正面的信息[/tip]
[tip type="purple"]紫色的 Tip，无实义[/tip]
[/tip-group]
```

![](https://1100254127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD51uWqmmX4iWdnmjM7%2F-MIoFXUWFzjIv5KmIGxA%2F-MIoIsK_7XjRSvwqTV3Y%2Fimage.png?alt=media\&token=54d900a1-12d2-4d53-81d5-be20a7de4a11)

{% hint style="warning" %}
Tip Group 暂未支持新的（0.2.0 及以后）Tip 样式
{% endhint %}

### Shadow（阴影）

使用阴影工具，可以给图片和表格添加阴影效果，使内容更突出

```
[shadow]![](xxx.jpg)[/shadow]

[shadow]
| 表头 | 表头 | 表头 | 表头 |
| --- | --- | --- | --- |
| 表项 | 表项 | 表项 | 表项 |
[/shadow]

<!-- 或者 -->

[shadow]
![](xxx.jpg)

| 表头 | 表头 | 表头 | 表头 |
| --- | --- | --- | --- |
| 表项 | 表项 | 表项 | 表项 |
[/shadow]
```

![](https://1100254127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD51uWqmmX4iWdnmjM7%2F-MIwirMifTs0yDs8OAcx%2F-MIwkku1i2cvUVpL3L1g%2Fimage.png?alt=media\&token=bb0e99f1-cea2-444f-8272-21122d17bb68)

### 键盘按键和注音

用 `[[]]` 创建一个用于表示键盘按键的行内元素，例如：

```
[[Ctrl]] [[Del]] [[+]]
```

![](https://1100254127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD51uWqmmX4iWdnmjM7%2F-MIwirMifTs0yDs8OAcx%2F-MIwlYosf__vmXKtCiWK%2Fimage.png?alt=media\&token=89e36020-4452-4bbc-ad19-657b76bf0494)

用 `{{:}}` 为一段文字标注读音，例如：

```
蚊子的幼虫叫{{孑孓:jie jue}}
```

![](https://1100254127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD51uWqmmX4iWdnmjM7%2F-MIwirMifTs0yDs8OAcx%2F-MIwlqiEN2TMZnyvItrz%2Fimage.png?alt=media\&token=0dd2a9b4-5ba6-41fd-9754-6c9cd131c1a5)

### Details（折叠框）

使用以下语法构造一个折叠框，可以将一些内容折叠起来，访客点击标题才能看到内容。

```
[details sum="标题"]
折叠内容
[/details]
```

{% hint style="info" %}
折叠框采用 html 原生的 `<details>` 标签，并使用 js 垫片优化了其兼容性，面向未来，向下兼容。
{% endhint %}

![](https://1100254127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MD51uWqmmX4iWdnmjM7%2F-MMkeqRXXi3Q5-Kcfp4h%2F-MMkg2XF5N0RQnqqpzpi%2FHoneycam%202020-11-23%2000-00-35.gif?alt=media\&token=7b7d4742-6667-47bd-8c3a-eee341985aae)
