# MarkDown 基本常用語法 [TOC] CheckList --- - [ ] HackMD其他相關的MD - [X] 書本目錄筆記 - [X] 改筆記網址 - [X] TOC table of content - [X] 留言板disqus - [ ] YAML config - [ ] 簡報 YAML config 字體效果 --- *斜體字* ==> `*文字*` **粗體字** ==> `**文字**` ***斜粗體*** ==> `***文字***` ~~刪除線strikethrough~~ ==> `~~文字~~` _斜體2_ ==> `_文字_` __斜粗2__ ==> `__文字__` 正常^上標^ ==> `文字^string1^` 正常~下標~ ==> `文字~string1~` ++底線++ ==> `++文字++` ==螢光標記== ==> `==文字==` color --- - <font color="red">color</font> ==> `<font color="red">text </font>` - <mark style="background-color: #FFFF00">Highlighted text</mark> => `<mark style="background-color: #FFFF00">Highlighted text</mark>` > change mark or span/div CheckBox(Task Lists) --- > - [x] uncheck > - [ ] check ```md - [ ] uncheck - [x] check ``` 短區塊 block --- >`內容` Admonitions色塊 --- 最近常看有人筆記有放短區塊有顏色，好像是新功能，之前好像沒有。可能我太久沒用hackmd。區塊有放Emoji如`:emojiID:` ，可以到下面[emoji](#Emoji)章節看如何設。 >Syntax: >> `::: XXX ::: ，XXX用下面其中一個 >> `warning|Danger|info|Success` ``` :::warning :warning: Warnings ::: :::danger :radioactive_sign: Danger ::: :::info :information_source: Info ::: :::success :+1: Success ::: ``` **以上範例結果為:** :::warning :warning: Warnings ::: :::danger :radioactive_sign: Danger ::: :::info :information_source: Info ::: :::success :+1: Success ::: Github alert --- >Syntax: >> `> ![XX]` XX，請問下面其中一個option: >> `Note|Tip |Important|Warning |Caution` ``` >[!Note]註記 >即使您換行仍可以繼續撰寫內容 ``` **以上範例結果為:** >[!Note]註記 >即使您換行仍可以繼續撰寫內容 表格 table --- - normal table | 欄位1 | 欄位2 | 欄位3 | | :-- | --: |:--:| | 置左 | 置右 | 置中 | | $100 | $100 | $100 | | $10 | $10 | $10 | | $1 | $1 | $1 | ``` | 欄位1 | 欄位2 | 欄位3 | | :-- | --: |:--:| | 置左 | 置右 | 置中 | ``` - hidden border <style> tr, td, th { border: none!important; } </style> | Time | Length | | ------------ | ------------- | | -Millisecond | Millimetre | ``` <style> tr, td, th { border: none!important; } </style> | Time | Length | | ------------ | ------------- | | -Millisecond | Millimetre | ``` 巢狀標號 --- 第一層 第二層分之一 內容 第二層分之二 第三層分之一 內容 第三層分之二 內容 Emoji --- [Emoki-link](https://gist.github.com/rxaviers/7360908) > Syntax: >> `:emojiXXX:` ex: :a: when you type `:` it will occur different emoji, please refer to the link I provided for more emoji id you can use. Math --- ``` $$ P = \frac {\sum_{i=1}^n (x_i- x)(y_i- y)} {\displaystyle \left[ \sum_{i=1}^n (x_i-x)^2 \sum_{i=1}^n (y_i-y)^2 \right]^{1/2} } $$ ``` $$ P = \frac {\sum_{i=1}^n (x_i- x)(y_i- y)} {\displaystyle \left[ \sum_{i=1}^n (x_i-x)^2 \sum_{i=1}^n (y_i-y)^2 \right]^{1/2} } $$ 連結 --- ### {} 嵌入外部的 下面是有支援的外部連結，可以用`{}` ![](https://hackmd.io/_uploads/BkdYsncIC.png "type_hackmdlink") > [!Note]註記 > 也可以用`[]()`方式用外部連結 ### youtube video > `{%youtube youtube-id}` ### 串連筆記連結 每個筆記後面都有一組ID，請把它複製，我們可以用它當作連結到你要的筆記。 > `[連結文字描述](/ID)` 圖片 --- 圖片可以用拉過去等於上傳。 > `![圖片文字](圖片連接 "圖片標題")` 可以改尺寸 > `![](圖片連結 =50%x)` ``` ![](https://hackmd.io/favicon.png =50%x) ``` Styling MD --- 把下面貼到筆記，所有樣式都會變，可以根據你喜歡顏色來修改。有興趣可以參考我這個筆記的[結果](/Rsc4zs-bRxe2o36VSmOzqw) ``` <style> html, body, .ui-content { background-color: #333; color: #ddd; } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { color: #ddd; } .markdown-body h1, .markdown-body h2 { border-bottom-color: #ffffff69; } .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link { color: #fff; } .markdown-body img { background-color: transparent; } .ui-toc-dropdown .nav>.active:focus>a, .ui-toc-dropdown .nav>.active:hover>a, .ui-toc-dropdown .nav>.active>a { color: white; border-left: 2px solid white; } .expand-toggle:hover, .expand-toggle:focus, .back-to-top:hover, .back-to-top:focus, .go-to-bottom:hover, .go-to-bottom:focus { color: white; } .ui-toc-dropdown { background-color: #333; } .ui-toc-label.btn { background-color: #191919; color: white; } .ui-toc-dropdown .nav>li>a:focus, .ui-toc-dropdown .nav>li>a:hover { color: white; border-left: 1px solid white; } .markdown-body blockquote { color: #bcbcbc; } .markdown-body table tr { background-color: #5f5f5f; } .markdown-body table tr:nth-child(2n) { background-color: #4f4f4f; } .markdown-body code, .markdown-body tt { color: #eee; background-color: rgba(230, 230, 230, 0.36); } a, .open-files-container li.selected a { color: #5EB7E0; } </style> ``` HackMD其他相關的MD --- ### 書本目錄筆記 - [筆記]，就會出現連結來建立筆記，就出網址 (/xxxxx) - 書本模式 加 --- 來告訴它這是書本模式 - 簡報 ### hotkey - Ctrl + / : 註記 ### TOC table of content > `[TOC]` 它只會顯示 header1~header3， header4以上不會顯示 ### 留言板disqus ``` --- disqus: hackmdtest --- ``` > NOTE: hackmdtest 是 disqus帳號 ### YAML config ### 簡報 YAML config Reference: --- 更多內容可以到下面官網的筆記連結: > [中文Chinese](/c/tutorials-tw) | [英文English](/c/tutorials) ###### tags: `code` `markdown`