Skip to main content

[note] Docusaurus 筆記

v2.0.0-beta.15

CLI

CLI @ Docusaurus

$ npx docusaurus --version  # 檢視版本
$ yarn upgrade @docusaurus/core@latest @docusaurus/preset-classic@latest ... # 更新套件

建立專案

$ npx @docusaurus/init@next init <website-name> classic
$ npx docusaurus --version

設定

docusaurus.config.js

// docusaurus.config.js
themes: [
require.resolve('@docusaurus/theme-live-codeblock'),
require.resolve('@docusaurus/theme-search-algolia'),
require.resolve('@docusaurus/theme-classic'), // 不加有些程式碼高亮無法正常顯示
],

Markdown Features

Markdown Features

提示區塊(Admonitions)

Admonitions

支援這幾類的提示:

  • note
  • tip
  • info
  • caution
  • danger

需要的話可以加上標題(title):

```note 這是標題

內容放這裡面。

```

程式碼區塊(Code Blocks)

Code blocks

加上標題(title)

```js title="這裡可以寫標題"
// [程式碼區塊]
```

畫記重點行(highlight)

可以透過在程式碼中加上「註解」的方式來幫特定行數畫記重點(Highlighting with comments),這些註解並不會在最後顯示在程式碼區塊中:

  • 使用 // highlight-next-line,其下一行會被畫記
  • 使用 // highlight-start 搭配 // highlight-end 則其之間的程式碼都會被畫記

除了在程式碼中透過註解的方式來畫記重點外,也可以直接在 "metadata" 的地方進行標記(Highlighting with metadata string):

```js {1,4-6,11}
// 第 1、4-6、11 行都會被畫記重點
```
tip

docusaurus 建議使用註解的方式來畫記程式碼,這樣就不用自己算要畫記的行數。

標題(Headings)

headings

預設的情況下,docusaurus 會針對 title 自動產生對應的 id,例如 ### Hello World 會自動產生名為 hello-word 的 id(即,#hello-world),有些時候它產生的 id 可能並不是你想要的,這時候可以使用 {#<id>} 的方式來可以化 id:

```
### Hello World {#my-hello-world}
```

需要的時候則可以使用 [link](#heading-id) 來連結到特定標題。

theme

@docusaurus/theme-classic

@docusaurus/theme-classic @ v2.alpha

// docusaurus.config.js
themes: [require.resolve('@docusaurus/theme-search-algolia')];

Discuss