Markdown教學

Posted on | In ,

Markdown介紹

Markdown是一種文字轉Html的語法

Markdown的目標是實現「易讀易寫」。

為什麼使用Markdown

  1. 容易寫

寫Markdown比寫Html容易，不需要會Html也可以產生Html的內容

  1. 容易讀

某些環境你沒辦法開啟IDE去看你的Html或的Word文章只能開txt檔時，你還可以容易看得出來你文章的結構以及內容是甚麼

  1. 一致性

在多人共同作業時每個人寫出來的Html可能都有誤差，以至於風格不一，使用Markdown會產生相同的格式再由統一的css樣式表就可以輕鬆統一訂製網頁風格

書寫提示

  1. Mardown語法裡面可以直接使用html標籤
  2. 記得Markdown的標籤大部分都需與你的文字有一個空格 ex. # ABC
  3. 區塊元素比如<div>、<table>、<pre>、<p>等標籤需要與前後文有一行空行
This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

Markdown

段落與引言

段落

文字區塊段落主要用一個以上的空行來表示也可以用兩個空白來表示強制插入<br/>

文章主要段落有兩種寫法使用

  1. 使用===(數量不限)寫在文字下方 ===為1階標題 —為2階標題
  2. 使用# 來表示段落 最多6個
段落1
=====
段落2
-----

# 段落1
## 段落2
### 段落3
#### 段落4
##### 段落5
###### 段落6

段落1

段落2

段落1

段落2

段落3

段落4

段落5
段落6

引言

引言使用>加在文字前面來表示類似email格式的引言區塊，可使用多個>來表示引言階層 例如> >

> 這是引言
> 這是引言
>
> > 這是引言中的引言
>
> 這是引言
> 這是引言

這是引言
這是引言

這是引言中的引言

這是引言
這是引言

清單

  1. 無順序的清單使用 * + - 來表示
  2. 有順序的清單使用數字加句點表示 1. (數字順序不影響顯示出來的內容，顯示出來一定為1. 2. 3. 4.)
* 清單1
* 清單2 
* 清單3
  • 清單1
  • 清單2
  • 清單3 
1. 清單1
2. 清單2 
3. 清單3
1. 清單1
1. 清單2 
1. 清單3
  1. 清單1
  2. 清單2
  3. 清單3
  4. 清單1
  5. 清單2
  6. 清單3

表格

使用 | 來分隔欄位 使用 - 來分隔標題

使用 : 來表示內容對齊，也可以不使用，預設靠左

為了Markdown語法美觀可自行對齊 | 實際上語法內可以不用對齊(如下程式碼最後一行)

目前MD不支援合併儲存格，有需要請使用Html

| left | center | right | default |
| :--- | :----: | ----: | ------  |
| a    | b      | c     |d        |
|a|b|c|d|
left center right default
a b c d
a b c d

文字格式

使用 * 或 _ 來將你的文字包起來做強調或著使用 ~~ 來加刪除縣

**Blod**
*Italic*
***Bold and Italic***
~~Delete~~

Blod

Italic

Bold and Italic

Delete

分隔線

一行中使用三個以上的 * - _ 來表示分隔線<hr/>


---

*******

_______________

程式碼

使用3個 ` 包圍你的程式碼區塊也可以是一行文字

```區塊可以在後面加上語法名稱例如 cs，md，html來表示你的語法(本站使用highlight.js來高亮語法)

附上常用語言代碼參考

程式語言 代碼
Bash bash, sh
C# cs, csharp
C++ cpp, c, c++
CSS css
HTML, XML html, xml, xhtml, rss
JSON json
JAVA java, jsp
JAVASCRIPT javascript, js
MARKDOWN markdown, md
R r
SQL sql 

 ``` cs
 class Program
   {
      static void Main(string[] args)
      {
         // Create an object of type CustomClass.
         CustomClass custClass = new CustomClass();

         // Set the value of the public property.
         custClass.Number = 27;

         // Call the public method.
         int result = custClass.Multiply(4);
         Console.WriteLine($"The result is {result}.");
      }
   }
 ` ` ` 此行為了示範把`分開 實際上是要打在一起


class Program
   {
      static void Main(string[] args)
      {
         // Create an object of type CustomClass.
         CustomClass custClass = new CustomClass();

         // Set the value of the public property.
         custClass.Number = 27;

         // Call the public method.
         int result = custClass.Multiply(4);
         Console.WriteLine($"The result is {result}.");
      }
   }

連結

超連結常用分為行內以及參考兩種方法

  1. 使用[ ]將文字包起來 ( )將連結網址放在裡面
  2. 使用兩個 [ ][ ] 前面為文字後面為參考的id，參考的超連結分開使用 [id]: 連結 “tooltip文字” 的格式來寫來寫

This is [Google](http://www.google.com) Link

This is [Google][0] Link

[0]: http://www.google.com "tooltip"

This is Google Link

This is Google Link

圖片

超連結常用分為行內以及參考兩種方法

  1. 使用![ ]將文字包起來 ( )將圖片網址放在裡面
  2. 使用兩個 ![ ][ ] 前面為文字後面為參考的id，參考的超連結分開使用 [id]: 連結 “tooltip文字” 的格式來寫
![Alt text](Markdown.png)

![Alt text][logo]

[logo]: Markdown.png "tooltip"

Alt text

Alt text

tooltip