Docusaurus Markdown Features 備忘錄
在 Docusaurus 中，Markdown 是構建文檔和部落格文章的核心工具。這篇文章將記錄一些我平常在使用 Docusaurus 撰寫文章時，常用到的 Markdown 功能。
內聯目錄 Inline table of contents
import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc}/>
添加空白行
<br/>
Quotes 引用框
> 這是一個引用框
> - 在引用框內也可以疊加其他的 `Markdown` 功能
這是一個引用框
- 在引用框內也可以疊加其他的
Markdown功能
Toggle 展開元素
<details>
<summary>Toggle me!</summary>
This is the detailed content
```js
console.log("Markdown features including the code block are available");
```
You can use Markdown here including **bold** and _italic_ text, and [inline link](https://docusaurus.io)
<details>
<summary>Nested toggle! Some surprise inside...</summary>
😲😲😲😲😲
</details>
</details>
Toggle me!
This is the detailed content
console.log("Markdown features including the code block are available");
You can use Markdown here including bold and italic text, and inline link
Nested toggle! Some surprise inside...
😲😲😲😲😲
Tabs 切換元素
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs
defaultValue="react"
values={[
{label: 'React', value: 'react'},
{label: 'Angular', value: 'angular'},
{label: 'Vue', value: 'vue'},
]}>
<TabItem value="react">This is React content</TabItem>
<TabItem value="angular">This is Angular content</TabItem>
<TabItem value="vue">This is Vue content</TabItem>
</Tabs>
- React
- Angular
- Vue
This is React content
This is Angular content
This is Vue content
Code blocks 程式碼區塊
- 加入標題
- 顯示行號
- highlight 特定行數的程式碼
```js title="example.js" showLineNumbers={true} {2-3}
console.log("title: example.js !");
console.log("Hello, world!");
console.log("This is a code block with line numbers and highlighted lines.");
```
example.js
console.log("title: example.js !");
console.log("Hello, world!");
console.log("This is a code block with line numbers and highlighted lines.");
- Interactive code editor
```jsx live
function HelloWorld() {
return <div>Hello, world!</div>;
}
```
即時編輯器
function HelloWorld() { return <div>Hello, world!</div>; }
結果
Loading...
- 切換多種程式語言 code blocks
<Tabs>
<TabItem value="js" label="JavaScript">
```js
function helloWorld() {
console.log('Hello, world!');
}
```
</TabItem>
<TabItem value="py" label="Python">
```py
def hello_world():
print("Hello, world!")
```
</TabItem>
<TabItem value="java" label="Java">
```java
class HelloWorld {
public static void main(String args[]) {
System.out.println("Hello, World");
}
}
```
</TabItem>
</Tabs>
- JavaScript
- Python
- Java
function helloWorld() {
console.log('Hello, world!');
}
def hello_world():
print("Hello, world!")
class HelloWorld {
public static void main(String args[]) {
System.out.println("Hello, World");
}
}
Admonitions 告示
:::note[備註標題]
This is a note
:::
:::tip[提示標題]
This is a tip
:::
:::info[信息標題]
This is an info
:::
:::caution[警告標題]
This is a caution
:::
:::danger[危險標題]
This is a danger
:::
備註標題
This is a note
提示標題
This is a tip
信息標題
This is an info
警告標題
This is a caution
危險標題
This is a danger
圖片 Images
靜態資源 Static assets
靜態資源放在 static 資料夾中，引用時以 static 目錄為根目錄。
