Joey's 各種筆記

Markdown練習

發表於 | 0 comments |

Markdown簡介

Markdown的目標是實現「易讀易寫」，最大靈感來源其實是純文字的電子郵件格式。

Markdown的語法有個主要的目的：用來作為一種網路內容的寫作用語言
他並不是用來取代html，html已經很容易寫了，Markdown的重點在於讓文件更易讀、編寫。
html是一種發佈格式，Markdown是一種編寫的個是，因此Markdown格式只涵蓋純文字可以涵蓋的範圍

行內HTML

  1. 區塊元素
    如<div>、<table>、<pre>、<p>等標籤，必需在前後加上空行，以利與內容區隔。
    例如：在Markdown中加入HTML表格








    哈妮貓 小貓 酷貓 大貓

    Markdown語法在HTML區塊標籤中將不會被進行處理。

  2. 區段標籤
    如<span>、<cite>、<del>則不受限制，可以在Markdown的段落、清單或是標題裡任意使用。舉例說明：如果比較喜歡HTML的<a>或<img>標籤，可以直接使用這些標籤。

    HTML區段標籤和區塊標籤不同，在區段標籤的範圍內，Markdown的語法是有效的。

特殊字元轉換

在HTML中，必須使用實體形式ex: <和&
Markdown中允許直接使用，但要小心跳脫字元的使用

區塊元素

標題

  1. =為最高標題，-為第二標題

    1
    2
    3
    4
    This is the title
    =====
    this is subtitle
    ----

  2. 插入1~6#分別對應到1~6階

    1
    2
    3
    4
    5
    6
    # title
    ## title
    ### title
    #### title
    ##### title
    ###### title

引言

每一行都加上 >

1
2
3
4
5
6
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> 
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

也可以只在第一行加上 >

1
2
3
4
5
6
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

引言內的引言：再加一層 >

1
2
3
4
5
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

List

Unorder List * + - 做開頭

1
2
3
4
5
6
*   Cat
*   Dog
+   Cat
+   Dog
-   Ubuntu
-   Ubuntu

Order List 數字. 做開頭，數字並不會影響結果

1
2
3
4
5
6
1.  Bird
1.  McHale
1.  Parish
3. Bird
1. McHale
8. Parish

如果清單項目間用空行分開， Markdown會把項目的內容在輸出時用

標籤包起來

1
2
3
*   Bird
*   Magic

會變成

1
2
3
4
<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul>

如果要放程式碼區塊的話，該區塊就需要縮排兩次，也就是8個空白或是兩個tab

1
2
3
*   A list item with a code block:
        <code goes here>

程式碼

簡單地縮排4個空白或是1個tab就可以

1
2
3
This is a normal paragraph:
    This is a code block.

程式碼區塊會一直持續到縮排結束為止

Markdown會自動轉換特殊符號

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

變成

<div class=”footer”>
    &copy; 2004 Foo Corporation
    </div>

分隔線

一行中用三個或以上的星號、減號、底線建立

* * *
***
*****
- - -
---------------------------------------

區段元素

連結

[]內放連結文字後面用()包住網址
連結
若要加入Title：
連結

也可以使用相對路徑
關於

未讀

參考連結

強調

Markdown使用星號*和底線_作爲強調符號，用<em>包住，用兩個*和_則會轉成<strong>
single asterisks

_single underscores_

**double asterisks**

__double underscores__

要在文字後加入普通符號時，運用反斜線

\*this text is surrounded by literal asterisks\*

跳脫字元

用反斜線

\*這是星星的內容!!!\*

可用反斜線的符號

\   反斜線
`   反引號
*   星號
_   底線
{}  大括號
[]  方括號
()  括號
#   井字號
+   加號
-   減號
.   英文句點
!   驚嘆號

程式碼

想表達程式碼時，可以用```包覆

This is the `code` !

插入時，要用更多包覆

``This is the code(`) ``

圖片

行內圖片

![text](/path/img.jpg)
![text](/path/img.jpg "Optional title")

參考圖片

![text][id]

id為參考連結的名稱
定義：

[id]: url/to/image  "Optional title attribute"

也可以用普通的img標籤

自動連結

直接包起來
http://Sample.com/
darwin7381987654@gmail.com

Reference

1 Markdown文件