30208邱泓諭_HackMD練習

# 30208邱泓諭_HackMD練習 :::success * 完成項目 * [x] 基本內容80% * [x] 增加文字顏色 3% * [x] 心智圖 3% * [x] 圓餅圖 3% * [x] 表格製作 3% * [x] (功課表 2%) * [x] 內容善用[顏色區塊][文字格式/繪文字][分隔線]編排整理 6% ::: :::warning 目錄 [TOC] ::: ## 1.標題筆記名稱預設為最大字體的標題一# 次要標題可以用標題二## 或標題三### 標題一至標題六,字體由大到小 #符號多少決定字體大小標題一 h1(#) 標題二 h2(##) 標題三 h3(###) 標題四 h4(####) 標題五 h5(#####) 標題六 h6(######) ## 2.清單 ### (1)無序清單無序清單用半形星號*、加號+或減號-,再一個空白例:全台六都 * 新北市 * 台北市 * 桃園市 + 台中市 + 台南市 - 高雄市 ### (2)有序清單有序清單用數字、點(或右括號)與空白例:12生肖 1. 鼠 2. 牛 3. 虎 4. 兔 5) 龍 6) 蛇 7) 馬 ### (3)待辦清單待辦清單:清單後面再加中括號與空白或x(小寫) 例:中秋節採購 * [x] 月餅 * [ ] 玉米 * [x] 黑輪 * [ ] 米血 * [x] 木炭 * [ ] 蝦子 * [x] 文旦 * [ ] 烤肉片 ### (4)第二層清單按Tab或2個空白形成第二層清單例:學測準備科目 * 國文 * 作文 * 英文 * 數學 * 自然 * 物理 * 公視背誦 * 化學 * 化學週期表 * 生物 * 地科 * 社會 ## 3.字體變化 * 斜體:一個星號*或底線_ → *斜體* _斜體_ * 粗體:兩個星號**或底線__ → **粗體** __粗體__ * 刪除線:兩個Tilde(波浪號~) → ~~刪除線~~ * 底線:兩個加號++ → ++底線++ * 高亮:兩個等號== → ==高亮== * 上標:兩個^^,如 1024^16^=102416 → ^上標^ * 下標:兩個~~ ,如 H~2~O~2~= 2 → ~下標~ * 進階功能: 如何更換文字顏色: * 灰色 紫色 藍色 ## 4.繪文字Emoji * 格式:用兩個冒號夾住,:Emoji代碼: 例::tada: :heart: 練習題:找3個喜愛的食物/水果/動物 1.檸檬 :lemon: 2.酪梨 :avocado: 3.猴子 :monkey: * [Emoji代碼清單](https://www.webfx.com/tools/emoji-cheat-sheet/) ## 5.程式碼 * 文字之間使用:前後用一個倒引號==[與~同一鍵]== 夾住 * 一段獨立指令碼區塊 * 第一行與最後一行用==三個倒引號==開頭 * 第一行倒引號後面可以接==程式語言==名稱 * 程式語言名稱=則會以語法強調格式呈現 →```python=``` 或 ```cpp=``` * 程式語言名稱==開始行號==:行號1由指定行號開始例:高一C++上機考題目 ```cpp= #include <bits/stdc++.h> //#include <iostream> using namespace std; int main() { int x; for (int i=0;i<5;i++) { cin>>x; if (x>=200) cout<<x<<"天:白金會員\n"; else if (x>=180) cout<<x<<"天:金牌會員\n"; else if (x>=160) cout<<x<<"天:銀牌會員\n"; else if (x>=140) cout<<x<<"天:銅牌會員\n"; else cout<<x<<"天:基本會員\n"; } return 0; } ``` ## 6.連結連結格式: 1.`[文字](網址)` 2.`[文字](網址"題是文字")` 例: 1.[國立北門高中](https://www.bmsh.tn.edu.tw) 2.[我的高中母校](https://www.bmsh.tn.edu.tw "北中") 3.[我的最愛網站](https://www.roblox.com/home) ## 7.圖片圖片格式: 1. `![文字](網址)` 2. `![文字](網址=寬x高)` 3. `![文字](網址 =50%x)` 例:野獸前輩原圖 ![野獸前輩](https://pbs.twimg.com/media/Fn4CdztaYAASuzm.jpg) 原圖變形 ![野獸前輩](https://pbs.twimg.com/media/Fn4CdztaYAASuzm.png =100x200) 原圖縮小一半 ![野獸前輩](https://pbs.twimg.com/media/Fn4CdztaYAASuzm.png =50%x) 上傳自己的圖 ![71-230GG04H4-50](https://hackmd.io/_uploads/SkTfLDCTR.jpg) ## 8.外部資源格式:{%資源名稱參考代碼 %} 資源名稱 * youtube * vimeo * gist * slideshare * speakerdeck * pdf 例: 1.北中沙克男孩 {%youtube djgGNhyecI0%} 2.我最愛的影片(Rick roll) {%youtube dQw4w9WgXcQ%} ### 8-1.外部資源example 1. Youtube {%youtube 1G4isv_Fylg %} 2. Vimeo {%vimeo 124148255 %} 3.Gist(程式碼) {%gist schacon/4277 %} 4.SlideShare(簡報) {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} 5.Speakerdeck(簡報) {%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %} 6.PDF {%pdf https://www.tqc.org.tw/user/Example/B973D99B-4C85-44B2-9133-BD34827395B4.pdf %} ## 9.圖表功能以下圖表功能請參考官方教學文件 ### 數學式MathJax 您可以使用 **MathJax** 語法來產生 *LaTeX* 數學表達式，如同 [math.stackexchange.com](http://math.stackexchange.com/)，但是開始的 `$` 後面以及結尾的 `$` 前面不能有空白： The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral 使用區塊層級的數學式時，請在您的數學式之前與之後給予 `$$` 以及換行： $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$ $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ [更多關於 **LaTeX** 數學表達式 ](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) ### 循序圖sequence ```sequence 艾莉絲->包柏: 哈摟，你好嗎？ Note right of 包柏: 包柏思考中包柏-->艾莉絲: 我很好，謝謝！ Note left of 艾莉絲: 艾莉絲回應艾莉絲->包柏: 最近過得怎樣？ ``` [更多關於 **循序圖** 語法 ](http://bramp.github.io/js-sequence-diagrams/)     ### 流程圖flow 您可以像是以下使用流程圖： ```flow st=>start: 開始 e=>end: 結束 op=>operation: 我的操作 op2=>operation: 啦啦啦 cond=>condition: 是或否？ st->op->op2->cond cond(yes)->e cond(no)->op2 ``` [更多關於 **流程圖** 語法 ](http://adrai.github.io/flowchart.js/)     ### 樹狀圖Graphviz ```graphviz digraph hierarchy { nodesep=1.0 // increases the separation between nodes node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour edge [color=Blue, style=dashed] //All the lines look like this Headteacher->{Deputy1 Deputy2 BusinessManager} Deputy1->{Teacher1 Teacher2} BusinessManager->ITManager {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level } ``` [更多關於 **graphviz** 語法 ](http://www.tonyballantyne.com/graphs.html)     ### 五線譜abc ```abc X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ``` [更多關於 **abc** 語法 ](http://abcnotation.com/learn)     ### 圓餅圖pie title 代表圓餅圖的名稱每個項目的數值請以百分比寫出來小數點不需要非常準確，但數值總和必須約等於100哦～ ```mermaid pie title 你最常喝什麼酒？ "啤酒" : 52.8 "紅、白葡萄酒" : 24.8 "威士忌" : 8.6 "高粱" : 4.0 "花式調酒": 8.9 ``` ### 心智圖markmap ```markmap ## 1.標題 ## 2.清單 ### (1)無序清單 ### (2)有序清單 ### (3)待辦清單 ### (4)第二層清單 ## 3.字體變化 ## 4.Emoji繪文字 ## 5.程式碼 ## 6.連結 ## 7.圖片 ## 8.外部資源 ### example示例 ## 9.圖表功能 ### MathJax 數學公式 ### UML循序圖 ### 流程圖 ### Graphviz樹狀圖 ### 五線譜 ### 圓餅圖(進階) ### 心智圖(進階) ## 10.提示區塊 ## 11.區塊引用 ## 12.表格 ## 13.參考資料 ``` ## 10.提示區塊 *格式: * 第一行是:::提示種類 * 最後一行是::: * 提示種類: * success * info * warning * danger * 註: 分隔線:三個或以上的星號、減號、底線例:4色區塊 :::success 綠色區塊 ::: :::info 藍色區塊 ::: :::warning 黃色區塊 ::: :::danger 紅色區塊 ::: :::success 12345 :::info 混色區塊 ::: :::spoiler 不要亂點蔡雲林是蘿莉控 :::success ::: 3條分隔線 *** ___ ___ ## 11.區塊引用 * 區塊引用:> * 提示種類: * Note: 註 * Tip: 小提醒 * Important: 很重要 * Warning: 超急 * Caution: 危險勿動 * 例:座右銘 >座右銘 >>助人為快樂之本 >>>摘錄自名人語錄 * 引用警示:格式:>[!] * 例:引用警示 * >[!Note] 註 * >[!Tip] 小提醒 * >[!Important] 很重要 * >[!Warning] 超急 * >[!Caution] 危險勿動 ## 12.表格 1.我們用 |和 -來繪製 Markdown 表格 2.第一列為標題列，Markdown 表格用標題列的欄數決定這個表格的欄數 3.第二列的欄位需要包含-，並用| 分隔 4.用 |分隔每欄 5.用換行來建立新的一列範例 | 名稱 | 數量 | | ----- | -------- | | 蘋果 | 3 | | 雞蛋 | 12 | 功課表 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 | |-|-|-|-|-| | 物理 | 化學 | 英文 | 生物 | 選修 | | 英文 | 生物 | 數學 | 國文 | 選修 | | 選修 | 物理 | 物理 | 國文 | 體育 | | 選修 | 國文 | 物理 | 物理 | 體育 | | 數學 | 數學 | 數學 | 化學 | 團體活動 | | 物理 | 藝術 | 自主 | 音樂 | 團體活動 | | 英文 | 藝術 | 自主 | 音樂 | 數學 | | 數學 | 物理 | 化學 | 化學 | 國文 | * 步驟一(啟用智慧貼上) ![image](https://hackmd.io/_uploads/Hksyspgkyl.png) * 步驟二(複製Excel已經打好的課表) ![image](https://hackmd.io/_uploads/H1lqsq6e1yx.png) ## 13.參考資料 [HackMD 使用教學](https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw)