Test Docusaurus

2025年10月21日 · 阅读需 5 分钟

Jiarong Zhang

Software Engineer

测试Docusaurus的使用

内联目录

内联目录
Blog Structure
公式
- 行内
- 行间
代码块
- Python
- JSX
图片
HTML
Admonition
- Nested Admonition
- Admonitions with MDX
JSX
注释
表格
引用
文字格式
列表
Mermaid 图表
业内跳转
Emoji
斜体粗体支持

Blog Structure

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

2019-05-30-welcome.md
2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

公式

行内

这是一个行内公式 $E=mc^2$

行间

质能

E=mc^2

Maxwell

\begin{aligned} \nabla\cdot\vec{E} &= \frac{\rho}{\epsilon_0} \\ \nabla\cdot\vec{B} &= 0 \\ \nabla\times\vec{E} &= -\frac{\partial B}{\partial t} \\ \nabla\times\vec{B} &= \mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t} \right) \end{aligned}

代码块

Python

for i in range(0, 10):
    print(i)

JSX

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}
```

src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

图片

avatar

HTML

待定

Admonition

Your Title with some Markdown syntax!

This is a note admonition. Some content with some Markdown syntax.

提示

This is a tip admonition

注意

This is a warning admonition

信息

This is an info admonition

危险

This is a danger admonition

警告

This is a caution admonition

important

This is an important admonition

success

This is a success admonition

Nested Admonition

Parent

Parent content

Child

Child content

Deep Child

Deep child content

Admonitions with MDX

Use tabs in admonitions

Apple
Orange
Banana

This is an apple 🍎

JSX

For example, use JSX to create an interactive button:

<button onClick={() => alert('button clicked!')}>Click me!</button>

注释

这里使用了脚注¹

A footnote on "label"²

The footnote for definition³

A footnote with link⁴

表格

列1	列2	列3
数据1	数据2	数据3
数据4	数据5	数据6
数据7	数据8	数据9

引用

这是引用的文本内容

文字格式

加醋

粗体文字, 看见了吗

斜体

斜体文字, 看见了吗

删除线

~~删除线~~

超链接

百度

列表

有序

第一手
第二条
第三次

无序

这里
那里

任务

混合
check in
check out

水平分割线

Mermaid 图表

业内跳转

公式

行间

质能

Emoji

👍👎👽👼💢😠😧😲👶💙😊💥:bow::bowtie:👦👰💔👤👥👏😰:collision:😖😕:construction_worker::cop:👫:couple_with_heart::couplekiss:😢😿💘💃:dancers:💨😞😥💫😵💧👂❗😑👀👊:family:😨:feelsgood::feet::finnadie:🔥✊😳😦🖕👧:goberserk::godmode:💚❕❔😬😁😀💂:haircut::hand::hankey:🙉❤️😍😻💓💗:hurtrealbad:😯👿:information_desk_person:😇👺👹😂😹💋😗😽😚😘😙😆👄💌👨👲👳😷:massage:🤘💪🎵💅:neckbeard:😐:no_good:😶👃🎶👌🙆👴👵👐😮😔😣:person_frowning::person_with_blond_hair::person_with_pouting_face:👇👈👉☝👆💩😾🙏👸:punch:💜❓😡:rage1::rage2::rage3::rage4:✋🙌:raising_hand:☺️😌💞:runner::running::satisfied:😱🙀🙈:shit:💀😴😪😄😸😃😺😈😏😼😭✨💖🙊💬⭐🌟😛😝😜😎:suspect:😓💦😅💭:thumbsdown::thumbsup:😫👅😤:trollface:💕👬👭😒✌:walking:👋😩😉👩😟💛😋💤

斜体粗体支持

^^insert^^

^^*insert italic*^^  *^^insert italic 2^^*

^^_insert italic_^^  _^^insert italic 2^^_

^^**insert bold**^^  **^^insert bold 2^^**

^^__insert bold__^^  __^^insert bold 2^^__

^^***insert italic bold***^^  ***^^insert italic bold 2^^***

^^___insert italic bold___^^  ___^^insert italic bold 2^^___

**^^*insert italic bold*^^**  *^^**insert italic bold 2**^^*

__^^_insert italic bold_^^__  _^^__insert italic bold 2__^^_

**^^_insert italic bold_^^**  _^^**insert italic bold 2**^^_

__^^*insert italic bold*^^__  *^^__insert italic bold 2__^^*

^^insert^^

^^insert italic^^ ^^insert italic 2^^

^^insert bold^^ ^^insert bold 2^^

^^insert italic bold^^ ^^insert italic bold 2^^

^^insert italic bold^^ ^^insert italic bold 2^^

这是注释的内容 ↩
A footnote on "label" ↩
The footnote for definition ↩
Markdown Cheatsheet ↩

内联目录​

Blog Structure​

公式​

行内​

行间​

质能​

Maxwell​

代码块​

Python​

JSX​

图片​

HTML​

Admonition​

Nested Admonition​

Admonitions with MDX​

JSX​

注释​

表格​

引用​

文字格式​

加醋​

斜体​

删除线​

超链接​

列表​

有序​

无序​

任务​

水平分割线​

Mermaid 图表​

业内跳转​

Emoji​

斜体粗体支持​

Footnotes​