---
tags: html
title: MarkDown 簡介與基礎語法
description: 從HTML到MarkDown-講義簡報-資訊社主題社課
image: 'https://i.imgur.com/1Q6Rm96.png'
slideOptions:
loop: true
theme: white
---

<style>
hr{display:none}
section h1 span{font-size:40%}
section h1,section h2,section h3,section h4,section h5,section h6,section p,section blockquote
{color:#656c73!important}section a{color:#337ab7!important}section img{border:0!important}
section br{display:inline!important}
br#title{display:none}
section h2.toc{display:none!important}
h2.toc{display:inline;border:0}
</style>

#### [md.nchuit.cc/html/](https://md.nchuit.cc/html/edit?view)

# <i class="fa fa-markdown"></i>MarkDown簡介與<br id='title'>基礎語法

> [<small><i class="fa fa-fw fa-github"></i>VJ</small>](https://github.com/twjmy)

:::spoiler <h2 class='toc'>目錄</h2> {state=open}
+ 參考: [HackMD](https://hackmd.io/features-tw?both), [Github](https://gist.github.com/billy3321/1001749662c370887c63bb30f26c9e6e)
[ToC]
:::

---

## 背景

[Markdown](https://zh.wikipedia.org/wiki/Markdown)是一種**輕量級**標記式語言，最重要的設計是**可讀性**，也就是說這個語言應該要能**直接在字面上的被閱讀**，而不需要用被一些**格式化指令**來標記（像是RTF與HTML）。它允許人們使用易讀易寫的純文字格式編寫文件，然後轉換成有效的XHTML（或者HTML）文件。

* 初始版本： 2004年3月19日 （18年前）
* 最新版本： 1.0.1 2004年12月17日 （17年前）

----

由於Markdown的輕量化、易讀易寫特性，並且對於圖片，圖表、數學式都有支援，目前許多網站都廣泛使用Markdown來撰寫說明文件或是用於論壇上發表訊息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡書等，甚至還能被用來撰寫電子書。

---

## 環境

### <i class="fa fa-fw fa-github"></i>GitHub: github.com `readme.md` `*.md` 等下會講

* [GitHub Markdown 爆改詳情](https://github.github.com/gfm/)

### <i class="fa fa-fw fa-file-text"></i>HackMD: hackmd.io 註冊

* [HackMD 使用教學](https://hackmd.io/c/tutorials-tw)

----

:::spoiler HackMD 註冊流程


----


----


----


----


----


----


:::

---

## MarkDown主要用途

簡化HTML: 標題

<h1>標題一</h1>
<h6>標題六</h6>

MarkDown

# 標題一
###### 標題六

---

### <i class="fa fa-fw fa-bold"></i>粗體 <i class="fa fa-fw fa-italic"></i>斜體 <i class="fa fa-fw fa-underline"></i>底線 <i class="fa fa-fw fa-strikethrough"></i>刪除線 <i class="fa fa-highlighter"></i>==標記文字==

**粗體** *斜體* ++底線++ ~~刪除線~~ ==標記文字==

:::spoiler 練習: ***~~我沒辦法全都要?~~***

***~~我沒辦法全都要~~***

:::

----

### <i class="fa fa-fw fa-list-ul"></i>無序清單 <i class="fa fa-fw fa-list-ol"></i>有序清單 <i class="fa fa-list-check"></i>待辦事項(?)

- 無序清單項1
- 無序清單項2
1. 有序清單項1
2. 有序清單項2
- [x] 待辦事項1
- [ ] 待辦事項2

- 無序清單項甲
- 無序清單項乙
1. 有序清單項甲
2. 有序清單項乙
- [x] 待辦事項甲
- [ ] 待辦事項乙

----

### 分隔線 `<hr>`

<hr>
---
----

CSS

<style>
hr{display:none}
</style>

----

https://hackmd.io/yaml-metadata

---
tags: 從HTML到MarkDown
title: MarkDown 簡介與基礎語法
description: 從HTML到MarkDown1-講義簡報-資訊社主題社課
image: 'https://i.imgur.com/1Q6Rm96.png'
slideOptions:
 loop: true
 theme: Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized
---

----

### <i class="fa fa-fw fa-link"></i>超連結

[超連結](https://www.google.com "標題文字！") 

[超連結](https://www.google.com "標題文字！")

----

### <i class="fa fa-fw fa-image"></i>插入圖片

![](https://網址 "標題文字" =寬x高)

[![](https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png "HTML5 JS CSS3" =500x)](https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png "標題文字！")

:::spoiler 練習: 圖片超連結

[![](https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png "HTML5 JS CSS3" =500x)](https://www.kindpng.com/picc/m/254-2547396_javascript-html-css-logo-hd-png-download.png)

:::

----

### <i class="fa fa-fw fa-table"></i>表格

| 欄位標題A | 欄位標題B | 欄位標題C |
| ---------:|:---------:| --------- |
|    欄位A1 |  欄位B1   | 欄位C1    |
|    欄位A2 |  欄位B2   | 欄位C2    |

| 欄位標題A | 欄位標題B | 欄位標題C |
| ---------:|:---------:| --------- |
| 欄位A1 | 欄位B1 | 欄位C1 |
| 欄位A2 | 欄位B2 | 欄位C2 |

----

### <i class="fa fa-fw fa-code"></i>程式碼

行內 `程式碼` 現在我有`冰淇淋`

行內 `程式碼` 現在我有`冰淇淋`

程式碼區塊

while True:
print("hello world")

while True:
    print("hello world")

----

### <i class="fa fa-fw fa-code"></i>嵌入

 

----

### <i class="fa fa-fw fa-youtube"></i>Youtube(HackMD 獨家)

{%youtube dQw4w9WgXcQ %}

{%youtube dQw4w9WgXcQ %}

----

### <i class="fa fa-fw fa-quote-left"></i>引用區塊

> 引用區塊也可以是巢狀的喔...
>> ...可以多層次的使用...
> > > ...或是用空白隔開 

> 引用區塊也可以是巢狀的喔...
>> ...可以多層次的使用...
> > > ...或是用空白隔開

----

#### <i class="fa fa-fw fa-file-text"></i>HackMD 獨家

> 您可以使用以下語法，表明自己的 **姓名、時間與顏色** 並與其他的引用區塊做區別
> [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]
> > 也支援巢狀引用區塊喔！
> > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red]

> 您可以使用以下語法，表明自己的 **姓名、時間與顏色** 並與其他的引用區塊做區別
> [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]
> > 也支援巢狀引用區塊喔！
> > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red]

----

警告區塊(<i class="fa fa-fw fa-file-text"></i>HackMD 獨家)
---
:::success
耶 :tada:
:::

:::info
這是訊息 :mega:
:::

:::warning
注意 :zap:
:::

:::danger
喔不 :fire:
:::

----

:::spoiler 點選顯示更多內容
找到我了！ :stuck_out_tongue_winking_eye:
:::

:::spoiler {state=open} 預設展開摺疊內容
找到我了！ :stuck_out_tongue_winking_eye:
:::

----

## [And more...](https://hackmd.io/c/tutorials-tw)

----

## [HackMD 簡報?](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-slide-deck-tw)

[](https://hackmd.io/slide-example?both)

---

## 將HTML/MarkDown放上網

----

### HackMD 檔案下載

----

### MD-HackMD

###### 書本/簡報 都需要透過「**分享的連結**」或按下「**預覽**」才有效果

+ [本頁簡報](/@NCHUIT/mdhtml3)([簡報詳解](/how-to-create-slide-deck-tw?both))
+ [書本模式](/@NCHUIT/mdhtml/edit?both)(按預覽才有側邊欄)

 

---

### HTML/MD-[GitHub](https://github.com/)
https://github.com/twjmy/twjmy.github.io

---

### 註冊 GitHub(電腦) github.com

1. 點擊註冊按鈕「Sign up」

----

2. 輸入帳號「Continue」

----

3. 輸入密碼後點「Continue」

----

4. 輸入ID(username)後點「Continue」，注意只能是字母和半形「-」號

----

+ 

----

5. 訂閱電郵，看你要輸入「y」或「n」都可以，然後點「Continue」

----

6. 機器人驗證後點「Create account」

----

7. 收郵件驗證信箱，打完數字會自動繼續

----

8. 資料填寫(剩下自己填完，也可以滑到下面跳過)

----

+ 

----

+ 

----

+ 

----

+ 

----

+ 

----

### 上傳
1. 點「Create repository」新建存放庫

----

2. 輸入存放庫名稱 ==⚠️請填寫成 `[自己的ID].github.io`⚠️==

----

+ ==⚠️一定設成要公開(Public)，不然等下網頁出不來⚠️==

----

+ ==⚠️剩下都不用勾⚠️==，點「Create repository」建立存放庫

----

3. 丟完檔案之後，等待上傳完成滑到最下面點「Commit changes」

----

+ 

----

+ 檔案可以在 HackMD 下載
+ 
:::info
⚠️注意檔名⚠️
1. `*.html`檔存成`index.html`
2. `*.md`檔存成`readmd.md`
:::

----

4. 上傳完成後的頁面會是這樣子。上傳完之後不會立刻有網頁，
我們點「Actions」看看網頁的建立過程，看看建得怎麼樣

----

+ 

----

+ 等個不到一分鐘的時間，看到綠色勾勾就代表網頁就出爐啦~

----

+ 點進去你可以看到`[自己的ID].github.io`的網址

----

+ 你的網站就架好啦~