--- tags: CSST description: "CSST 2022: 使用 Markdown 和 LaTeX 成為筆記大師" --- {%hackmd BkVfcTxlQ %} # HackMD 額外功能 [![hackmd-github-sync-badge](https://hackmd.io/kvD8r4l1RP6WcT6CzlD27w/badge)](https://hackmd.io/kvD8r4l1RP6WcT6CzlD27w) :arrow_left: 點擊左側以查看原始碼！ 這裡是一些 HackMD 擴充的語法。 ## Inline HackMD 增加惹一些行內元素的支援。 ### Sources ```markdown Wrap words in ++two consecutive plus signs++ to ++underline++ them. Wrap words in ==two consecutive equal signs== to ==highlight== them. Wrap words in ^carets^ to make them ^superscript^. Wrap words in ~tildes~ to make them ~subscript~. ``` ### Results Wrap words in ++two consecutive plus signs++ to ++underline++ them. Wrap words in ==two consecutive equal signs== to ==highlight== them. Wrap words in ^carets^ to make them ^superscript^. Wrap words in ~tildes~ to make them ~subscript~. ## Quotes w/ additional attributions 引言區塊可以標註名字、時間，並自訂 border 的顏色。 ### Sources ```markdown > Can anybody find me somebody to love? > > Each morning I get up I die a little \ > Can barely stand on my feet \ > Take a look in the mirror and cry \ > Lord, what you're doing to me? \ > I have spent all my years in believing you \ > But I just can't get no relief, Lord \ > Somebody, somebody \ > Can anybody find me somebody to love? > > ![A Day at the Races](https://i.imgur.com/flOmqfD.jpg "A Day at the Races" =200x200) > > [name=Queen][time=1976][color=#F2D0A7] ``` ### Results > Can anybody find me somebody to love? > > Each morning I get up I die a little \ > Can barely stand on my feet \ > Take a look in the mirror and cry \ > Lord, what you're doing to me? \ > I have spent all my years in believing you \ > But I just can't get no relief, Lord \ > Somebody, somebody \ > Can anybody find me somebody to love? > > ![A Day at the Races](https://i.imgur.com/flOmqfD.jpg "A Day at the Races" =200x200) > > [name=Queen][time=1976][color=#F2D0A7] ## Table HackMD 的表格編輯器頗方便美觀。 | Column 0 | Column 1 | Column 2 | Column 3 | | ------------- |:-------- |:--------:| --------:| | Not specified | Left | Center | Right | ## Definition list 可以對應到 HTML 的 `<dl>`, `<dt>` & `<dd>` tags 及 $\LaTeX$ 的 `description` environment. ### Sources ```markdown Term A : Definition a : Definition b Term B : Definition ``` ### Results Term A : Definition _a_ : Definition **b** Term B : Definition ## Blocks HackMD 支援四種顏色 blocks（對應到 Bootstrap?）以及可折疊的 blocks. ### Sources ```markdown :::success This is a **success** block. ::: :::info This is a _info_ block. ::: :::warning This is a _**warning**_ block. ::: :::danger This is a `danger` block. ::: :::spoiler This is a ~~spoiler~~ block. ::: :::spoiler Custom Caption This is a ~~spoiler~~ w/ custom caption block. ::: ``` ### Results :::success This is a **success** block. ::: :::info This is a _info_ block. ::: :::warning This is a _**warning**_ block. ::: :::danger This is a `danger` block. ::: :::spoiler This is a ~~spoiler~~ block. ::: :::spoiler Custom Caption This is a ~~spoiler~~ w/ custom caption block. ::: ## Include external contents 我們可以容易地在 HackMD 中嵌入一些外部內容。 ### Sources ```markdown :::spoiler YouTube {%youtube fJ9rUzIMcZQ %} ::: :::spoiler GitHub Gist {%gist nevikw39/06f049e5fc01878d27bd381beb1880a8 %} ::: :::spoiler PDF {%pdf https://m110.nthu.edu.tw/~s110062219/ICPC/2022-Asia%20Taipei%202021-Mr.%20Chun-Mu%20Weng-MEDAL.pdf %} ::: :::spoiler HackMD {%hackmd @nevikw39/signature %} ::: ``` ### Results :::spoiler YouTube {%youtube ogoIxkPjRts %} ::: :::spoiler GitHub Gist {%gist nevikw39/06f049e5fc01878d27bd381beb1880a8 %} ::: :::spoiler PDF {%pdf https://m110.nthu.edu.tw/~s110062219/CSST2022.pdf %} ::: :::spoiler HackMD {%hackmd @nevikw39/signature %} ::: ## Graph & diagram HackMD 還支援繪製一系列的圖表，比較通用的有 [Graphviz](https://en.wikipedia.org/wiki/Graphviz), Mermiad 等。 ### Sources ````markdown :::spoiler Graphviz ```graphviz digraph { A0[shape=none]; I8[shape=doublecircle]; A0->B1[label="0"] B1->C2[label="1"] C2->D3[label="0"] D3->E4[label="1"] E4->F5[label="0"] F5->G6[label="1"] G6->H7[label="1"] H7->I8[label="1"] edge[weight=0] H7->J9[label="0"] J9->K10[label="1"] K10->H7[label="1"] edge[style=dashed] A0->A0[label="1"] B1->B1[label="0"] C2->A0[label="1"] D3->B1[label="0"] E4->A0[label="1"] F5->B1[label="0"] G6->F5[label="0"] I8->A0[label="1"] I8->B1[label="0"] J9->B1[label="0"] K10->D3[label="0"] } ``` ::: ```` ### Results :::spoiler Graphviz ```graphviz digraph { A0[shape=none]; I8[shape=doublecircle]; A0->B1[label="0"] B1->C2[label="1"] C2->D3[label="0"] D3->E4[label="1"] E4->F5[label="0"] F5->G6[label="1"] G6->H7[label="1"] H7->I8[label="1"] edge[weight=0] H7->J9[label="0"] J9->K10[label="1"] K10->H7[label="1"] edge[style=dashed] A0->A0[label="1"] B1->B1[label="0"] C2->A0[label="1"] D3->B1[label="0"] E4->A0[label="1"] F5->B1[label="0"] G6->F5[label="0"] I8->A0[label="1"] I8->B1[label="0"] J9->B1[label="0"] K10->D3[label="0"] } ``` ::: ## $\LaTeX$ HackMD 透過 [MathJax](https://en.wikipedia.org/wiki/MathJax) 支援數學式子的顯示。 ### Sources ```markdown This is an inline math expression: $(1-x)^{-n}=\sum_{i=0}^\infty\binom{-n}{i}(-x)^i=\sum_{i=0}^\infty(-1)^i\binom{n+i-1}{i}(-x)^i$. And the following is a display math expression: $$\begin{pmatrix}A_{0,0}&A_{0,1}\\A_{1,0}&A_{1,1}\end{pmatrix}=\begin{pmatrix}I&O\\A_{1,0}A_{0,0}^{-1}&I\end{pmatrix}\begin{pmatrix}A_{0,0}&O\\O&A_{1,1}-A_{1,0}A_{0,0}^{-1}A_{0,1}\end{pmatrix}\begin{pmatrix}I&A_{0,0}^{-1}A_{0,1}\\O&I\end{pmatrix}$$ ``` ### Results This is an inline math expression: $(1-x)^{-n}=\sum_{i=0}^\infty\binom{-n}{i}(-x)^i=\sum_{i=0}^\infty(-1)^i\binom{n+i-1}{i}(-x)^i$. And the following is a display math expression: $$\begin{pmatrix}A_{0,0}&A_{0,1}\\A_{1,0}&A_{1,1}\end{pmatrix}=\begin{pmatrix}I&O\\A_{1,0}A_{0,0}^{-1}&I\end{pmatrix}\begin{pmatrix}A_{0,0}&O\\O&A_{1,1}-A_{1,0}A_{0,0}^{-1}A_{0,1}\end{pmatrix}\begin{pmatrix}I&A_{0,0}^{-1}A_{0,1}\\O&I\end{pmatrix}$$ ## Reference [Official document](https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw).