---
disqus: twoz
---
# HackMD
{%hackmd BJrTq20hE %}
## 摺疊語法：
- `:::spoiler {state="open"}` 預設開啟
## 具名留言語法：
-

    > 提問內容 [name=<myName>]

效果如下：
>
> 提問內容 [name=Mix]
## 外部連結：
在連結的最後加上 `[target=_blank]` 來讓連結在新分頁打開
~~[Release Notes](/s/release-notes) [target=_blank]~~ (失效)

[Release Notes](/s/release-notes) [target=_blank]

<a href="https://www.google.com/" target="_self">谷哥_self</a><br/>
<a href="https://www.google.com/" target="_blank">谷哥_blank</a>

## 預覽卡片：

{%preview https://hackmd.io/c/tutorials-tw/%2F%40docs%2Flink_preview_tw %}

{%preview https://hackmd.io/c/tutorials-tw/%2F%40docs%2Flink_preview_tw %}
## 書本模式加上子標題層
- 語法如下：

    CSS相關
    ---
    - [CSS基本知識](/0fuJMU4KS7-qUWPkV2w_YQ)
    - ## Animation (子標題層)
        - [Pixi.js](/QdhBDFAhQZSod6bltKTAXw)
        - [GSAP 3](/tNODzJsPSnqHK9Ab1ANLLA)
        - [three.js](/AhviZYPFTvK1y2GGw8UI4Q)

## 註腳標籤：
- ASDFB[^註腳標籤]
[^註腳標籤]: 如果註腳超過一個段落，第二個段落開始請記得縮排 4 個空白字元。
## 圖片尺寸：[link](https://hackmd.io/@docs/how_to_upload_image_tw?utm_source=note&utm_medium=error-msg)
- 指定比例：注意在等號 `=` 之前要加一個空白

    ![](圖片連結 =50%x)

    舉例：
    ![](https://hackmd.io/favicon.png =50%x)

- 指定寬度：

    ![](圖片連結 =200x)

## 繪圖語法：[更多繪圖](https://hackmd.io/MathJax##and##UML##tw?both)
### [`flowchart.js`流程圖文件](http://flowchart.js.org/)
- 節點圖例：
| 節點 | 語法 | 圖示 |
| - | - | - |
| start | `st=>start: start` |  |
| end | `e=>end: end` | 
|operation (操作)|`op1=>operation: operation`| 
|io (輸入輸出)|`io=>inputoutput: inputoutput`||
|subroutine (子程序：指示流中發生子例程，並且應該有另一個流程圖來記錄此子例程。)|`sub1=>subroutine: subroutine`||
|condition (條件)|`cond=>condition: condition`||
|parallel (平行：允許多個流同時發生)|`para=>parallel: parallel`||

### sample：節點和連接是分開定義的，這樣節點可以重用，連接可以快速改變。

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no@No No No)->para
para(path1@an1, bottom)->sub1(right)->op1
para(path2, top)->op1
``

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no@No No No)->para
para(path1@an1, bottom)->sub1(right)->op1
para(path2, top)->op1

### `mermaid.js`
- [官方文件](http://mermaid.js.org/syntax/flowchart.html#styling-and-classes)，可以畫各種圖

flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{fa:fa-spinner Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
style C fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

## markdown 軟體
- [Yu Writer Pro](https://ivarptr.github.io/yu-writer.site/?src=vpslala.com)
- [obsidian](https://obsidian.md/)