本站扩展语法

本站扩展语法——shortcodes #

本站使用hugo与hugo-book搭建,支持一些称之为shortcodes的markdown扩展语法,接下来我们就详细介绍一下

按钮 #

按钮其实是一个装饰后的超链接,它可以导向外部连接或者本地

例子 #

{{< button relref="/" [class="..."] >}}回到首页{{< /button >}}
{{< button href="https://github.com/SAST-Mathematics-SIG" >}}前往SIG的GITHUB组织{{< /button >}}

回到首页 前往SIG的GITHUB组织

细节展示 #

细节展示(Details)是一个展开的栏目,可以隐藏一些信息

例子 #

{{< details "Title" [open] >}}
### 内容
细节展示(Details)是...
{{< /details >}}
{{< details title="Title" open=true >}}
### 内容
细节展示(Details)是...
{{< /details >}}
Title

内容 #

细节展示(Details)是…

分列 #

分列(Columns)有助于组织简短的文字,使之排版更加清晰可读

{{< columns >}} <!-- begin columns block -->
# Left Content
Lorem markdownum insigne...

<---> <!-- magic separator, between columns -->

# Mid Content
Lorem markdownum insigne...

<---> <!-- magic separator, between columns -->

# Right Content
Lorem markdownum insigne...
{{< /columns >}}

例子 #

左段落 #

左段落内容…

#include <iostream>
int main(){
    std::cout <<"hello world";
}

中段落 #

中段落内容…

WARNING: 注意在分栏中不能使用扩展语法

右段落 #

右段落内容…

SAST.Mathematics SIG

高亮 #

高亮是一种不同颜色的引用块, 有三种颜色可以被选择: info, warning and danger.

{{< hint [info|warning|danger] >}}
**内容**  
这里是*[info|warning|danger]*喵
{{< /hint >}}

例子 #

内容
这里是 Info
内容
这里是 warning
内容
这里是 danger

KaTeX #

KaTeX 可以让你在Markdown中插入Latex公式,在本站相当重要。详情可见 KaTeX

{{< katex >}}\pi(x){{< /katex >}}
//这是行内公式

{{< katex display=true class="optional" >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}
// 这是行外公式

注意 对于行外公式,你也可以使用markdown自带的写法,甚至更加推荐这种写法

$$a^2+b^2=c^2$$

$$a^2+b^2=c^2$$

显示模式/例子 #

这里是行内公式: \(\pi(x)\) 下面是行外公式, 具有display: block属性

\[f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\]

文本可以在这里继续

tabs #

tabs 有助于你组织不同情况下不同的文本

{{< tabs "uniqueid" >}}
{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}

Example #

MacOS #

这是 MacOS 的tab内容

SAST.Mathematics SIG

Linux #

这是 Linux 的tab内容

SAST.Mathematics SIG

Windows #

这是 Windows 的tab内容

SAST.Mathematics SIG

Mermaid 图表 #

MermaidJS 是用于从文本生成 svg 图表和图表的库

覆盖Mermaid的初始化配置

要覆盖 Mermaid 的初始化配置,请在 assets 文件夹中创建一个 mermaid.json 文件!

例子 #

{{< mermaid class="optional" >}}
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
{{< /mermaid >}}

stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left.