---
# System prepended metadata

title: Markdown基礎設定

---

# 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**