---
title: Introduction of Markdown
tags: Markdown
description: Simply introduce how to write our first Markdown.
---

# How to write Markdown(MD)

====reference==== : https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw

Markdown 最初的目標是為了讓一般人也能夠撰寫網路頁面，撰寫完成以可以轉換成XHTML or HTML,讓網路頁面能夠更加美觀。至於公司規劃能從word轉成MD的理由,就不是我能知道的秘辛(?)了XD

## What is Markdown(MD)
====ref:==== https://zh.wikipedia.org/zh-tw/Markdown

Markdown是一種====輕量級====標記式語言。它允許人們使用====易讀易寫的純文字格式編寫文件====，然後轉換成有效的XHTML（或者HTML）文件。這種語言吸收了很多在電子郵件中已有的純文字標記的特性。

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

每個網站可以接受的 Markdown 的語法都不太一樣，可以~~依個人喜好~~ 由公司網頁需要的markdown來進行撰寫。

## Markdown Pros and Cons
- Pros
- 不會夾雜很多不必要的標籤，讓可讀性提高
- 不需要像程式碼一樣縮排
- Cons
- 需習慣 Markdown 的編輯方式
- 還是需要一些撰寫,不能像word可以完全依賴UI

## Usage flow

digraph {
  compound=true
  rankdir=RL

  graph [ fontname="Source Sans Pro", fontsize=20 ];
  node [ fontname="Source Sans Pro", fontsize=18];
  edge [ fontname="Source Sans Pro", fontsize=12 ];


  subgraph core {
    c [label="Hackmd-it \ncore"] [shape=box]
  }
  
  c -> sync [ltail=session lhead=session]

  subgraph cluster1 {
     concentrate=true
    a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
    b [label="HackMD Editor"] [shape=box]
    sync [label="sync" shape=plaintext ]
    b -> sync  [dir="both"]
    sync -> a [dir="both"]
    label="An edit session"
  }
}

## Some basic Markdown Syntax

### 粗體語法

**粗體**

**粗體**

### 標題語法

# 標題1(h1)
## 標題2(h2)
### 標題3(h3)
#### 標題4(h4)
##### 標題5(h5)

### 項目列表語法

- 表1
    - 表1-1
- 表2
    - 表2-1
    - 表2-2

- 表1
- 表1-1
- 表2
- 表2-1
- 表2-2

### 階層式區塊語法

> 類似列表
>> 類似子列表
>>> 類似子子列表

> 類似列表
>> 類似子列表
>>> 類似子子列表

### 表格語法

| Left columns  | Right columns |
| ------------- |:-------------:|
| left foo (左)      | right foo(右)     |
| left bar (左)     | right bar (右)    |
| left baz (左)     | right baz  (右)   |

| Left column | Center column | Right Columns |
| ------------| :------------:| -------------:|
|left foo | center foo | right foo |
|left bar | center bar | right bar |
|left baz | center baz | right baz |

### 斜體語法

__斜體 or *斜體*

*斜體*

### 刪除線語法

~刪除線 or ~~刪除線~~

~~刪除線~~

### [表情符號語法](#表情符號語法)

:表情符號:

完整表情符號[在這裡](https://github.com/ikatyang/emoji-cheat-sheet)
:smile:
:heart:
:100:
:muscle:
:tada:

### 待辦事項語法

- [ ] 待辦事項
- [x] 已完成事項

* [ ] 待辦事項
* [x] 已完成事項

### [footnote 語法](#footnote-語法)

註腳的詳細內容會放在最後一個page的最下面註解
[這是註腳編號]: 這是註腳詳細內容

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

Indent paragraphs to include them in the footnote.

`{ my code }`

Add as many paragraphs as you like.

### 超連結語法

[item name](URL) ==> 外部連結
[item name](# ID name) ==> 內部連結

[Google連結](https://google.com)
[表情符號語法](#表情符號語法)
[樹狀圖語法](#樹狀圖語法)
[footnote 語法](#footnote-語法)
### HTML Writting Code

<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>

- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event

### 圖片連結語法

![alternative document](URL)


### 各種邊框語法(只有適合HackMD)
:::warning
這是警告框
:::
:::success
這是成功框
:::
:::danger
這是危險框
:::

## UML 圖表

### 流程圖與法

最上面的一行要加"```flow"
st=>start: 開始狀態
op=>operation: 中間狀態
cond=>condition: 條件
cond(yes)->如果"是"的條件
cond(no)->如果"否"的條件
e=>end: 結果狀態

st=>start: 註冊可以使用markdown的編輯器
e=>end: 您可以使用markdown
op1=>operation: 登入編輯器
op2=>operation: 購買編輯器
cond=>condition: 是否已經購買並登入了編輯器?

st->op1->cond
cond(yes)->e
cond(no)->op2->e

#### [樹狀圖語法](#樹狀圖語法)

mermaod
graph TD
root-->level1
level1-->level2.1
level1-->level2.2
level2.1-->level3.1
level2.1-->level3.2
level2.2-->level3.4

graph TD;
國產疫苗-->二期解盲成功就EUA;
國產疫苗-->三期歐美標準才可EUA;
二期解盲成功就EUA-->時效派;
三期歐美標準才可EUA-->標規派;
時效派-->需公開透明;
時效派-->需醫界共識;
時效派-->需預盤風險;
時效派--->仍可做三期試驗;
標規派-->延後半年短缺因應;
仍可做三期試驗-->可跟國外大型藥廠合作試驗;

### Thank you! :sheep:

You can find me on

- GitHub
- Twitter
- or email me