---
# System prepended metadata

title: HackMD

---

---
disqus: twoz
---
# HackMD
{%hackmd BJrTq20hE %}
## 摺疊語法：
- `:::spoiler {state="open"}` 預設開啟
## 具名留言語法：
- 
    ```jsx=
    > 提問內容 [name=<myName>]
    ```
    效果如下：
    >
    > 提問內容 [name=Mix]
## 外部連結：
在連結的最後加上 `[target=_blank]` 來讓連結在新分頁打開
~~[Release Notes](/s/release-notes) [target=_blank]~~ (失效)
```html=
[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>
```
## 預覽卡片：
```htmlembedded=
{%preview https://hackmd.io/c/tutorials-tw/%2F%40docs%2Flink_preview_tw %}
```
{%preview https://hackmd.io/c/tutorials-tw/%2F%40docs%2Flink_preview_tw %}
## 書本模式加上子標題層
- 語法如下：
    ```mediawiki
    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)
- 指定比例：注意在等號 `=` 之前要加一個空白
    ```jsx=
    ![](圖片連結 =50%x)

    舉例：
    ![](https://hackmd.io/favicon.png =50%x)
    ```
- 指定寬度：
    ```mediawiki=
    ![](圖片連結 =200x)
    ```
## 繪圖語法：[更多繪圖](https://hackmd.io/MathJax##and##UML##tw?both)
### [`flowchart.js`流程圖文件](http://flowchart.js.org/)
- 節點圖例：
    | 節點 | 語法 | 圖示 |
    | - | - | - |
    | start | `st=>start: start` | ![](https://github.com/adrai/flowchart.js/raw/master/imgs/start.png) |
    | end | `e=>end: end` | ![](https://github.com/adrai/flowchart.js/raw/master/imgs/end.png)
    |operation (操作)|`op1=>operation: operation`| ![](https://github.com/adrai/flowchart.js/raw/master/imgs/operation.png)
    |io (輸入輸出)|`io=>inputoutput: inputoutput`|![](https://github.com/adrai/flowchart.js/raw/master/imgs/inputoutput.png)|
    |subroutine (子程序：指示流中發生子例程，並且應該有另一個流程圖來記錄此子例程。)|`sub1=>subroutine: subroutine`|![](https://github.com/adrai/flowchart.js/raw/master/imgs/subroutine.png)|
    |condition (條件)|`cond=>condition: condition`|![](https://github.com/adrai/flowchart.js/raw/master/imgs/condition.png)|
    |parallel (平行：允許多個流同時發生)|`para=>parallel: parallel`|![](https://github.com/adrai/flowchart.js/raw/master/imgs/parallel.png)|
    
    ### sample：節點和連接是分開定義的，這樣節點可以重用，連接可以快速改變。
    ```bash=
        ```flow
        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
        ``
    ```
    ```flow
    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)，可以畫各種圖
    ```mermaid
    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/)