markdown語法

little小新發表於2024-07-11

This is red //字型顏色
ㄏㄢˋ // 特殊字
Ctrl+F9 // 按鍵標識
Bigger //字型大小和背景

字型及字型顏色和大小
字型顏色

居左文字

居中文字

居右文字

使用span或者font標籤,同時用style屬性控制樣式。
點選時的區域標題:點選檢視詳細內容

- 測試 測試測試

  title,value,callBack可以預設    

我是標籤


由於 markdown 本身並不支援字型,字號,顏色的更改,所以需要藉助 html 來解決。
我是黑體字
我是微軟雅黑
我是華文彩雲
黑體
哈哈哈哈
gray



title: markdown語法
categories:

  • 乾貨
    tags:
  • 個人部落格
  • markdown語法
    abbrlink: f134a8e5
    date: 2024-06-22 22:44:47

markdown 語法

官網:https://markdown.com.cn/basic-syntax/
線上體驗:https://markdown.com.cn/editor/

1.標題語法

要建立標題,請在單詞或短語前面新增井號 (#) 。
"#"的數量代表了標題的級別。
例如,新增三個 # 表示建立一個三級標題 <h3>

(例如:### My Header)。
# 這是一級標題
## 這是二級標題
### 這是三級標題
#### 這是四級標題
##### 這是五級標題
###### 這是六級標題

可選語法

還可以在文字下方新增任意數量的 == 號來標識一級標題,或者 -- 號來標識二級標題。

一級標題
===============

或

二級標題
---------------

不同的 Markdown 應用程式處理 # 和標題之間的空格方式並不一致。為了相容考慮,請用一個空格在 # 和標題之間進行分隔。

2.段落語法

要建立段落,請使用空白行將一行或多行文字進行分隔

I really like using Markdown.

I think I'll use it to format all of my documents from now on.

如:
I really like using Markdown.

I think I'll use it to format all of my documents from now on.

3.換行語法

在一行的末尾新增兩個或多個空格,然後按Enter鍵,即可建立一個換行<br>

This is the first line.  
And this is the second line.

如:
This is the first line.
And this is the second line.

幾乎每個 Markdown 應用程式都支援兩個或多個空格進行換行,稱為 結尾空格(trailing whitespace) 的方式,
但這是有爭議的,因為很難在編輯器中直接看到空格,並且很多人在每個句子後面都會有意或無意地新增兩個空格。
由於這個原因,你可能要使用除結尾空格以外的其它方式來換行。
幸運的是,幾乎每個 Markdown 應用程式都支援另一種換行方式:HTML 的 <br> 標籤。
為了相容性,請在行尾新增“結尾空格”或 HTML 的 <br> 標籤來實現換行。
First line with the HTML tag after.<br>
And the next line.

如:
First line with the HTML tag after.

And the next line.

4.強調語法

粗體(Bold)

透過將文字設定為粗體或斜體來強調其重要性。

要加粗文字,請在單詞或短語的前後各新增兩個星號(asterisks)或下劃線(underscores)

如需加粗一個單詞或短語的中間部分用以表示強調的話,請在要加粗部分的兩側各新增兩個星號(asterisks)

I just love **bold text**.   
I just love __bold text__.
Love**is**bold

效果如下:

I just love bold text.
I just love bold text.
Loveisbold

斜體(Italic)

要用斜體顯示文字,請在單詞或短語前後新增一個星號(asterisk)或下劃線(underscore)。
要斜體突出單詞的中間部分,請在字母前後各新增一個星號,中間不要帶空格。

Italicized text is the *cat's meow*.
Italicized text is the _cat's meow_.
A*cat*meow

效果如下:

Italicized text is the cat's meow.
Italicized text is the cat's meow.
Acatmeow

粗體(Bold)和斜體(Italic)

要同時用粗體和斜體突出顯示文字,請在單詞或短語的前後各新增三個星號或下劃線。
要加粗並用斜體顯示單詞或短語的中間部分,請在要突出顯示的部分前後各新增三個星號,中間不要帶空格。

This text is ***really important***.
This text is ___really important___.
This text is __*really important*__.
This text is **_really important_**.
This is really***very***important text.

效果如下:

This text is really important.
This text is really important.
This text is really important.
This text is really important.
This is reallyveryimportant text.

引用語法

要建立塊引用,請在段落前新增一個 > 符號

> Dorothy followed her through many of the beautiful rooms in her castle.

效果如下:

Dorothy followed her through many of the beautiful rooms in her castle.

多個段落的塊引用

塊引用可以包含多個段落。為段落之間的空白行新增一個 > 符號

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

效果如下:

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

巢狀塊引用

塊引用可以巢狀。在要巢狀的段落前新增一個 >> 符號。

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

效果如下:

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

帶有其它元素的塊引用

塊引用可以包含其他 Markdown 格式的元素。並非所有元素都可以使用,你需要進行實驗以檢視哪些元素有效

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

效果如下:

The quarterly results look great!

  • Revenue was off the chart.
  • Profits were higher than ever.

Everything is going according to plan.

列表語法

可以將多個條目組織成有序或無序列表

有序列表

要建立有序列表,請在每個列表項前新增數字並緊跟一個英文句點。
數字不必按數學順序排列,但是列表應當以數字 1 起始。

1. First item
2. Second item
3. Third item
4. Fourth item

1. First item
1. Second item
1. Third item
1. Fourth item

1. First item
8. Second item
3. Third item
5. Fourth item

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

效果如下:

  1. First item

  2. Second item

  3. Third item

  4. Fourth item

  5. First item

  6. Second item

  7. Third item

  8. Fourth item

  9. First item

  10. Second item

  11. Third item

  12. Fourth item

  13. First item

  14. Second item

  15. Third item

    1. Indented item
    2. Indented item
  16. Fourth item

無序列表

要建立無序列表,請在每個列表項前面新增破折號 (-)、星號 (*) 或加號 (+) 。
縮排一個或多個列表項可建立巢狀列表。

- First item
- Second item
- Third item
- Fourth item

* First item
* Second item
* Third item
* Fourth item

+ First item
+ Second item
+ Third item
+ Fourth item

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

效果如下:

  • First item
  • Second item
  • Third item
  • Fourth item
  • First item
  • Second item
  • Third item
  • Fourth item
  • First item
  • Second item
  • Third item
  • Fourth item
  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item

在列表中巢狀其他元素

要在保留列表連續性的同時在列表中新增另一種元素,請將該元素縮排四個空格或一個製表符

段落

*   This is the first list item.
*   Here's the second list item.

    I need to add another paragraph below the second list item.

*   And here's the third list item.

渲染效果如下:

  • This is the first list item.

  • Here's the second list item.

    I need to add another paragraph below the second list item.

  • And here's the third list item.

引用塊

*   This is the first list item.
*   Here's the second list item.

    > A blockquote would look great below the second list item.

*   And here's the third list item.

渲染效果如下:

  • This is the first list item.

  • Here's the second list item.

    A blockquote would look great below the second list item.

  • And here's the third list item.

程式碼塊

程式碼塊通常採用四個空格或一個製表符縮排。當它們被放在列表中時,請將它們縮排八個空格或兩個製表符。

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

渲染效果如下:

  1. Open the file.

  2. Find the following code block on line 21:

    <html>
      <head>
        <title>Test</title>
      </head>
    
  3. Update the title to match the name of your website.

圖片

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![Tux, the Linux mascot](https://img.shields.io/badge/這是-圖片連結-blue)
    ![Tux, the Linux mascot](/img/512.png)

3.  Close the file.

渲染效果如下:

  1. Open the file containing the Linux mascot.

  2. Marvel at its beauty.

    Tux, the Linux mascot
    Tux, the Linux mascot

  3. Close the file.

列表

您可以將無序列表巢狀在有序列表中,反之亦然。

1. First item
2. Second item
3. Third item
    - Indented item
    - Indented item
4. Fourth item

渲染效果如下:

  1. First item
  2. Second item
  3. Third item
    • Indented item
    • Indented item
  4. Fourth item

程式碼語法

要將單詞或短語表示為程式碼,請將其包裹在反引號 () 中。 ```At the command prompt, type nano`.```

渲染效果如下:

At the command prompt, type nano.

轉義反引號

如果你要表示為程式碼的單詞或短語中包含一個或多個反引號,則可以透過將單詞或短語包裹在雙反引號(``)中。

``Use `code` in your Markdown file.``

渲染效果如下:

Use `code` in your Markdown file.

程式碼塊

要建立程式碼塊,請將程式碼塊的每一行縮排至少四個空格或一個製表符。

    <html>
      <head>
      123
      </head>
    </html>

渲染效果如下:

<html>
  <head>
  123
  </head>
</html>

Note: 要建立不用縮排的程式碼塊,請使用 圍欄式程式碼塊fenced code blocks

分隔線語法

要建立分隔線,請在單獨一行上使用三個或多個星號 (***)、破折號 (---) 或下劃線 (___) ,並且不能包含其他內容。

***

---

_________________

以上三個分隔線的渲染效果看起來都一樣:

如下:

Try to put a blank line before...


...and after a horizontal rule.

連結語法

連結文字放在中括號內,連結地址放在後面的括號中,連結title可選。

超連結Markdown語法程式碼:[超連結顯示名](超連結地址 "超連結title")

對應的HTML程式碼:<a href="超連結地址" title="超連結title">超連結顯示名</a>
這是一個連結 [Markdown語法](https://markdown.com.cn)。

效果如下:

這是一個連結 Markdown語法

給連結增加 Title

連結title是當滑鼠懸停在連結上時會出現的文字,這個title是可選的,它放在圓括號中連結地址後面,跟連結地址之間以空格分隔。

這是一個連結 [Markdown語法](https://markdown.com.cn "最好的markdown教程")。

效果如下:

這是一個連結 Markdown語法

網址和Email地址

使用尖括號可以很方便地把URL或者email地址變成可點選的連結

<https://markdown.com.cn>
<fake@example.com>

效果如下:

https://markdown.com.cn
fake@example.com

帶格式化的連結

強調 連結, 在連結語法前後增加星號。 要將連結表示為程式碼,請在方括號中新增反引號。

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).

效果如下:

I love supporting the EFF.
This is the Markdown Guide.
See the section on code.

引用型別連結

引用樣式連結是一種特殊的連結,它使URL在Markdown中更易於顯示和閱讀。
參考樣式連結分為兩部分:與文字保持內聯的部分以及儲存在檔案中其他位置的部分,以使文字易於閱讀。

連結的第一部分格式

引用型別的連結的第一部分使用兩組括號進行格式設定。第一組方括號包圍應顯示為連結的文字。
第二組括號顯示了一個標籤,該標籤用於指向您儲存在文件其他位置的連結。
儘管不是必需的,可以在第一組和第二組括號之間包含一個空格。第二組括號中的標籤不區分大小寫,可以包含字母,數字,空格或標點符號。
以下示例格式對於連結的第一部分效果相同:
*[hobbit-hole][1]
*[hobbit-hole] [1]

連結的第二部分格式

引用型別連結的第二部分使用以下屬性設定格式:
放在括號中的標籤,其後緊跟一個冒號和至少一個空格(例如[label]:)。
連結的URL,可以選擇將其括在尖括號中。
連結的可選標題,可以將其括在雙引號,單引號或括號中。
以下示例格式對於連結的第二部分效果相同
·[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
·[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
·[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
·[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
·[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
·[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
·[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)

可以將連結的第二部分放在Markdown文件中的任何位置。有些人將它們放在出現的段落之後,有些人則將它們放在文件的末尾(例如尾註或腳註)。

連結最佳實踐

[link](https://www.example.com/my%20great%20page)

link

圖片語法

要新增影像,請使用感嘆號 (!), 然後在方括號增加替代文字,圖片連結放在圓括號裡,括號裡的連結後可以增加一個可選的圖片標題文字。
插入圖片Markdown語法程式碼:![圖片alt](圖片連結 "圖片title")。
對應的HTML程式碼:<img src="圖片連結" alt="圖片alt" title="圖片title">


![這是圖片](/assets/img/philly-magic-garden.jpg "Magic Gardens")

效果如下:

這是圖片

連結圖片

給圖片增加連結,請將影像的Markdown 括在方括號中,然後將連結新增在圓括號中。
點選圖片跳轉到連結地址。

[![圖片](/images/tag.png "Shiprock")](https://markdown.com.cn)

圖片

跳脫字元語法

要顯示原本用於格式化 Markdown 文件的字元,請在字元前面新增反斜槓字元 \ 。

\* Without the backslash, this would be a bullet in an unordered list.

效果如下:

* Without the backslash, this would be a bullet in an unordered list.

可做轉義的字元

以下列出的字元都可以透過使用反斜槓字元從而達到轉義目的。

Character	Name
\	backslash
`	backtick (see also escaping backticks in code)
*	asterisk
_	underscore
{ }	curly braces
[ ]	brackets
( )	parentheses
#	pound sign
+	plus sign
-	minus sign (hyphen)
.	dot
!	exclamation mark
|	pipe (see also escaping pipe in tables)

特殊字元自動轉義

在 HTML 檔案中,有兩個字元需要特殊處理: < 和 & 。 < 符號用於起始標籤,& 符號則用於標記 HTML 實體,
如果你只是想要使用這些符號,你必須要使用實體的形式,像是 &lt; 和 &amp;。
& 符號其實很容易讓寫作網頁檔案的人感到困擾,如果你要打「AT&T」 ,你必須要寫成「AT&amp;T」 ,還得轉換網址內的 & 符號

如果你要連結到:

http://images.google.com/images?num=30&q=larry+bird

你必須要把網址轉成:

http://images.google.com/images?num=30&amp;q=larry+bird

才能放到連結標籤的 href 屬性裡。不用說也知道這很容易忘記,這也可能是 HTML 標準檢查所檢查到的錯誤中,數量最多的。

Markdown 允許你直接使用這些符號,它幫你自動跳脫字元。
如果你使用 & 符號的作為 HTML 實體的一部分,那麼它不會被轉換,
而在其它情況下,它則會被轉換成 &amp;。所以你如果要在檔案中插入一個著作權的符號,
你可以這樣寫:
&copy;

Markdown 將不會對這段文字做修改,但是如果你這樣寫:
AT&T

Markdown 就會將它轉為:
AT&amp;T

類似的狀況也會發生在 < 符號上,因為 Markdown 支援 行內 HTML ,
如果你使用 < 符號作為 HTML 標籤的分隔符,
那 Markdown 也不會對它做任何轉換,但是如果你是寫:
4 < 5
Markdown 將會把它轉換為:
4 &lt; 5

需要特別注意的是,在 Markdown 的塊級元素和內聯元素中, < 和 & 兩個符號都會被自動轉換成 HTML 實體,
這項特性讓你可以很容易地用 Markdown 寫 HTML。(在 HTML 語法中,你要手動把所有的 < 和 & 都轉換為 HTML 實體。)

Markdown 內嵌 HTML 標籤

對於 Markdown 涵蓋範圍之外的標籤,都可以直接在檔案裡面用 HTML 本身。
如需使用 HTML,不需要額外標註這是 HTML 或是 Markdown,只需 HTML 標籤新增到 Markdown 文字中即可。

行級內聯標籤

HTML 的行級內聯標籤如 <span>、<cite>、<del> 不受限制,可以在 Markdown 的段落、列表或是標題裡任意使用。
依照個人習慣,甚至可以不用 Markdown 格式,而採用 HTML 標籤來格式化。
例如:如果比較喜歡 HTML 的 <a> 或 <img> 標籤,可以直接使用這些標籤,而不用 Markdown 提供的連結或是圖片語法。
當你需要更改元素的屬性時(例如為文字指定顏色或更改影像的寬度),使用 HTML 標籤更方便些。

HTML 行級內聯標籤和區塊標籤不同,在內聯標籤的範圍內, Markdown 的語法是可以解析的。
This **word** is bold. This <em>word</em> is italic.

輸出如下:

This word is bold. This word is italic.

區塊標籤

區塊元素──比如 <div>、<table>、<pre>、<p> 等標籤,必須在前後加上空行,以便於內容區分。
而且這些元素的開始與結尾標籤,不可以用 tab 或是空白來縮排。
Markdown 會自動識別這區塊元素,避免在區塊標籤前後加上沒有必要的 <p> 標籤。

例如,在 Markdown 檔案里加上一段 HTML 表格:
This is a regular paragraph.

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

This is another regular paragraph.

請注意,Markdown 語法在 HTML 區塊標籤中將不會被進行處理。
例如,你無法在 HTML 區塊內使用 Markdown 形式的強調

HTML 用法最佳實踐

出於安全原因,並非所有 Markdown 應用程式都支援在 Markdown 文件中新增 HTML。
如有疑問,請檢視相應 Markdown 應用程式的手冊。某些應用程式只支援 HTML 標籤的子集。

對於 HTML 的塊級元素 <div>、<table>、<pre> 和 <p>,請在其前後使用空行(blank lines)與其它內容進行分隔。
儘量不要使用製表符(tabs)或空格(spaces)對 HTML 標籤做縮排,否則將影響格式。

在 HTML 塊級標籤內不能使用 Markdown 語法。例如 <p>italic and **bold**</p> 將不起作用。