文章

文本与排版

文本、排版、数学公式、图表、流程图、图片、视频等示例。

文本与排版

标题

H1 — 一级标题

H2 — 二级标题

H3 — 三级标题

H4 — 四级标题

段落

Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas interdum malesuada egestas. Duis consectetur porta risus, sit amet vulputate urna facilisis ac. Phasellus semper dui non purus ultrices sodales. Aliquam ante lorem, ornare a feugiat ac, finibus nec mauris. Vivamus ut tristique nisi. Sed vel leo vulputate, efficitur risus non, posuere mi. Nullam tincidunt bibendum rutrum. Proin commodo ornare sapien. Vivamus interdum diam sed sapien blandit, sit amet aliquam risus mattis. Nullam arcu turpis, mollis quis laoreet at, placerat id nibh. Suspendisse venenatis eros eros.

列表

有序列表

  1. 第一项
  2. 第二项
  3. 第三项

无序列表

  • 章节
    • 小节
      • 段落

待办事项列表

  • 任务
    • 步骤 1
    • 步骤 2
    • 步骤 3

描述列表

太阳
地球围绕其公转的恒星
月亮
地球的天然卫星,通过反射太阳光而可见

引用块

这一行展示了 引用块

提示框

这是一个 tip 类型提示框的示例。

这是一个 info 类型提示框的示例。

这是一个 warning 类型提示框的示例。

这是一个 danger 类型提示框的示例。

表格

公司名称联系人国家
Alfreds FutterkisteMaria Anders德国
Island TradingHelen Bennett英国
Magazzini Alimentari RiunitiGiovanni Rovelli意大利

链接

http://127.0.0.1:4000

脚注

点击钩子将跳转到脚注1,这里是另一个脚注2

行内代码

这是一个 行内代码 的示例。

文件路径

这是文件路径:/path/to/the/file.extend

代码块

通用代码块

1
这是一个通用代码片段,没有语法高亮和行号。

指定语言

1
2
3
4
if [ $? -ne 0 ]; then
  echo "命令执行失败。";
  #执行必要操作 / 退出
fi;

指定文件名

1
2
3
@import
  "colors/light-typography",
  "colors/dark-typography";

数学公式

MathJax 驱动的数学公式:

\[\begin{equation} \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} \label{eq:series} \end{equation}\]

我们可以引用该公式为 \eqref{eq:series}。

当 $a \ne 0$ 时,方程 $ax^2 + bx + c = 0$ 有两个解,分别为:

\[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\]

Mermaid SVG 图表

 gantt
  title  为 Mermaid 添加甘特图功能
  apple :a, 2017-07-20, 1w
  banana :crit, b, 2017-07-23, 1d
  cherry :active, c, after b a, 1d

图片

默认(带标题)

桌面视图
全屏宽度并居中对齐

左对齐

桌面视图

左浮动

桌面视图
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.

右浮动

桌面视图
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.

深色/浅色模式与阴影

下方图片会根据主题偏好自动切换深色/浅色模式,请注意它带有阴影效果。

仅浅色模式
仅深色模式

视频

脚注来源

  1. 脚注内容 ↩︎

  2. 第二个脚注内容 ↩︎

本文由作者按照 CC BY 4.0 进行授权