# Markdown基礎設定 ## 基本概念 Markdown 可以輸出成 HTML 的格式，所以各種標示也會對應 HTML 的標籤，就顯示的結構上可區分為兩大類：區塊、行內。 ### 1. 區塊 這個類別會把內容獨立成一個區塊，**此區塊內套用相同的格式**，包含**標題、引用、清單**、都屬於這個類型，區塊可以疊加使用。(ex：引用內可以包含標題。) ### 2. 行內 此類別的內容可插入於區塊內(ex：**強調文字、 斜體字、文字連結、插入圖片**) -- 與HTML特性相符合。 ## 區塊元素 ### 1. 標題 總共分為六個層級，根據HTML的結構會轉為 <h1~h6>，依照在文字前方補上不同數量的#，#越少層級越高，也是視覺上最大的標題。 ### 2. 文字段落 當沒有加上任何標示符號時，該區塊的文字就是文字段落區塊，而段落與段落之間會保留一行空白空間，在接下一段的內容。 ### 3. 引用 寫法類似於Email中的回文原文，在文章前面補上 ">" 的符號就可以ㄌ。 會長下面這樣 > 引用文字 然後跟標題一樣是有層級ㄉ > 一層 > > 兩層 > > > 三層 ### 4. 清單 清單就分成**一般列表**跟**數字符號列表**，兩個都有多個層級，只要加上一個縮排或是兩個空格就可以新增層級(ㄟ不是，我還沒搞懂縮排怎麼用。) 一般列表的使用彈性比較高， - 、 + 、 \* 後方加上空白就可以轉成列表，表示下一個層級可以多一個縮排或是兩個空白就可以ㄌ。 舉例說明 + 這是清單 - 這還是清單 * 想不到ㄅ這也是清單 * 清單下一個層級 desu ![清單層級](https://i.imgur.com/e7nDFpR.png =300x136) 忘了還有數字清單 1. 清單 2. 繼續 3. 縮排 4. 不太對 1. 再試一次 2. 繼續 1. 看起來很酷 2. 要自己重打 **從這邊可以發現，數字清單是不用連續數字的。(要放圖才看得懂了)** ![數字清單](https://i.imgur.com/x7UqBC5.png =400x200) [偷師網址](https://www.casper.tw/development/2019/11/23/ten-mins-learn-markdown/) ### 5. 區塊程式碼 用三個反引號 ``` 來區隔程式碼(放在開頭跟結尾) ``` for (let i = 0; i < 10; i++){ setTimeout(function(){ console.log('這執行第' + i + '次'); }, 0); } ``` 首行補上特定程式碼語言名稱，該段可使用特定語言的 Highlight ``` javascript for (let i = 0; i < 10; i++){ setTimeout(function(){ console.log('這執行第' + i + '次'); }, 0); ``` ``` cpp #include <iostream> #include <vector> using namespace std; int i; char* a; for(i = 0; i <= 10; i++){ cin >> b >> endl; }; cout << "顏色好可愛忍不住多試一下" << endl; ``` HTML結構 <body> <p> 這是一段 HTML 結構 </p> </body> <div class="content"> <ul> <li>遛狗</li> <li>寫作業</li> <li>倒垃圾</li> </ul> </div> ![HTML結構示意](https://i.imgur.com/ctpvW6y.png) #### **i. 行內程式碼** 最後一次祝福，祝福我們的人生在失去彼此後依舊精采，<strong>像不曾遇見過那樣</strong>。 ![行內程式碼](https://i.imgur.com/actDbOg.png =400x75) ### 6. 表格 | thead 1 | thrad 2 | thread 3| |---------|---------|---------| | td | td | td | ### 7. 圖片&影片 圖片前面都做過ㄌ，方法就是： ``` ![unsplash 圖片](html形式的圖片檔) ![unsplash 圖片](html形式的圖片檔 = length x width) (可以更變圖片大小) ``` 影片嵌入方法則是： ``` {%youtube youtubeid %} -- youtubeid置換成youtube連結的id https://youtu.be/ "kzdJkT4kp-A" 這串是影片id ``` 舉例： {%youtube kzdJkT4kp-A %} ## 數學式 **好ㄌ 大致簡單的操作就是這樣 感謝閱讀<3**