文本与排版

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

发表于 2026/05/08 更新于 2026/05/15

Chirpy 主题在多种设备上的响应式渲染效果。

作者

4 分钟阅读

文本与排版

标题

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.

列表

有序列表

第一
第二
第三

无序列表

章节
- 小节
  - 段落

待办事项列表

任务
- 第一步
- 第二步
- 第三步

定义列表

太阳: 地球环绕运行的恒星
月亮: 地球的天然卫星，通过反射太阳光可见

引用块

这行显示的是 引用块。

提示框

tip 类型提示框示例。

info 类型提示框示例。

warning 类型提示框示例。

danger 类型提示框示例。

表格

公司	联系人	国家
Alfreds Futterkiste	Maria Anders	德国
Island Trading	Helen Bennett	英国
Magazzini Alimentari Riuniti	Giovanni Rovelli	意大利

链接

http://127.0.0.1:4000

脚注

点击钩子将定位到脚注[^脚注]，这里还有另一个脚注¹。

行内代码

这是 行内代码 的示例。

文件路径

这是 /path/to/the/file.extend。

代码块

普通代码块

这是一个普通代码片段，没有语法高亮和行号。

指定语言

  
if [ $? -ne 0 ]; then
  echo "命令执行失败。";
  #do the needful / exit
fi;

指定文件名

  
@import
  "colors/light-typography",
  "colors/dark-typography";

数学公式

由 MathJax 驱动的数学公式：

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

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

当 $a \ne 0$ 时，$ax^2 + bx + c = 0$ 有两个解，它们是

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

Mermaid SVG

 gantt
  title  为 mermaid 添加甘特图功能
  苹果 :a, 2017-07-20, 1w
  香蕉 :crit, b, 2017-07-23, 1d
  樱桃 :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.