Skip to main content

Docusaurus Markdown Note

紀錄一下 Docusaurus 適用的 Markdown 語法

img & link​

Rubylago's note

img 連結

img 預覽

[Rubylago's note](url)
[img alt02](/img/docusaurus.png)  /連結
![img alt03](/img/docusaurus.png "滑鼠經過說明文字") /static下的路徑

Docusaurus 轉換:

[下載此文檔](/files/note.docx)
會被轉換為
<a href={require('static/files/note.docx')}>下載此文檔</a>

換行 & 空行​

後面空兩格再換行，顯示出來就會換行了

123
有換行

456 沒換行

123後面接兩個空白鍵  
有換行

456沒有接到兩個空白鍵
沒換行

引用​

在最前面使用 > 符號 就可以變成<blockquote>

引用

引用
第二行也使用 > 符號

還可以空行

引用
只有第一行使用 > 符號
後面不管幾行
都不用也沒關係

>引用

>引用  
>第二行也使用 `>` 符號
>
>還可以空行

>引用  
只有第一行使用 `>` 符號  
後面不管幾行  
都不用也沒關係

警告視窗​

note

Some content with Markdown syntax.

tip

Some content with Markdown syntax.

info

Some content with Markdown syntax.

caution

Some content with Markdown syntax.

danger

Some content with Markdown syntax. 


:::note

Some **content** with _Markdown_ `syntax`. 

:::

:::tip

Some **content** with _Markdown_ `syntax`.  

:::

:::info

Some **content** with _Markdown_ `syntax`.  

:::

:::caution

Some **content** with _Markdown_ `syntax`.  

:::

:::danger

Some **content** with _Markdown_ `syntax`.  

:::

CODE​

<!-- view -->
<form action="/profile" method="POST" enctype="multipart/form-data">
  <input type="file" name="avatar" />
</form>
  ```html
  <!-- view -->
  <form action="/profile" method="POST" enctype="multipart/form-data">
    <input type="file" name="avatar" />
  </form>
function HighlightSomeText(highlight) {
  if (highlight) {
    return 'This text is highlighted!';
  }

  return 'Nothing highlighted';
}
```js
function HighlightSomeText(highlight) {
  if (highlight) {
    return 'This text is highlighted!';
  }

  return 'Nothing highlighted';
}
/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}
```jsx title="/src/components/HelloCodeTitle.js"
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}

Table​

在標題下面的 --- 處加上 : 表示靠左靠右還是置中
:-- 靠左
---: 靠右
:---: 置中
如果想要合併儲存格(好老的術語)，還是要把欄位畫出來，裡面不用塞東西，顯示就會是同一格了!每一格靠哪裡都會對應到最上面的---設定

tableA
靠左置中靠右
我置中
|tableA|||
|:---|:----:|---:|
|靠左|置中|靠右|
||我置中||

真的很懶也有線上產生 Markdown Table 的工具Tables Generator