【Tools】MarkDown教程(二)-MarkDown基本語法

00. 目錄

01. 文本格式化

1.1 粗體和斜體

我們使用*斜體文字*的方式傾斜文字,**加粗的文字**的方式加粗文字,使用***加粗的斜體字***同時加粗和傾斜文字。

Markdown代碼

*斜體文字*
**加粗文字**
***加粗的斜體文字***

編譯成html

<em>斜體文字</em>
<strong>加粗文字</strong>
<strong><em>加粗的斜體文字</em></strong>

網頁顯示效果

斜體文字
加粗文字
加粗的斜體文字

1.2 刪除線

markdown中可以給文字添加刪除線

Markdown代碼

~~添加刪除線的文字~~

編譯成html

<del>添加刪除線的文字</del>

網頁顯示效果

添加刪除線的文字

1.3 標題

Markdown 支持兩種標題的語法,類 Setext 和類 atx 形式。

Markdown代碼

類Setext形式採用底線的形式.
一號標題
=============
二號標題
-------------
類Atx形式則是在行首插入1到6個#,對應到標題1到標題6.
# 一號標題
## 二號標題
### 三號標題
#### 四號標題
##### 五號標題
###### 六號標題

編譯成html

<h1>一號標題</h1>
<h2>二號標題</h2>
<h3>三號標題</h3>
<h4>四號標題</h4>
<h5>五號標題</h5>
<h6>六號標題</h6>

網頁顯示效果

1.4 引用

Markdown通過在引用的文字之前添加”>”標記達到引用的效果,引用段落的時候可以偷懶只在整個段落的第一行最前面加上 >。引用裏面可以使用強調、鏈接等其他語法。

Markdown代碼

> 這裏是一段引用
> 也可以偷懶只在首行引用一個段落

> 引用段落:Markdown是一種輕量級的標記語言,把作者從繁雜的排版工作中解放出
  來,實現**易讀易寫**的文章寫作,已經逐漸成爲事實上的行業標準。

>**結束引用,用個空行**

編譯成html

<blockquote>
    <p>這裏是一段引用
    也可以偷懶只在首行引用一個段落</p>
    <p>引用段落:Markdown是一種輕量級的標記語言,把作者從繁雜的排版工作中解放出來,實現<strong>易讀易寫</strong>的文章寫作,已經逐漸成爲事實上的行業標準。</p>
    <strong>結束引用,用個空行</strong>
</blockquote>

網頁顯示效果

這裏是一段引用
也可以偷懶只在首行引用一個段落

引用段落:Markdown是一種輕量級的標記語言,把作者從繁雜的排版工作中解放出
來,實現易讀易寫的文章寫作,已經逐漸成爲事實上的行業標準。

結束引用,用個空行

1.5 嵌套引用

引用可以嵌套,使用不同數量的“>”表示層次。

Markdown代碼

> 這裏是個引用
> > 嵌套引用
> 
> 這裏是個引用

編譯成html

<blockquote>
    <p>這裏是個引用</p>
    <blockquote>
        <p>嵌套引用</p>
    </blockquote>
    <p>這裏是個引用</p>
</blockquote>

網頁顯示效果

這裏是個引用

嵌套引用

這裏是個引用

02. 代碼格式化

2.1 行內代碼

使用反引號”`”包含實現行內代碼。

Markdown代碼

我們可以使用`<br>`換行,也可以使用`<p></p>`實現。
`高亮`文字

編譯成html

我們可以使用<code>&lt;br&gt;</code>換行,也可以使用<code>&lt;p&gt;&lt;/p&gt;</code>實現。
<code>高亮</code>文字。

網頁顯示效果

我們可以使用<br>換行,也可以使用<p></p>實現。
高亮文字

2.2 區塊代碼

如果需要在代碼內插入反引號,需要多個反引號開始和結束一段代碼。
如果需要代碼塊和語法高亮,可以採用三個反引號的方式,同時可以註明語言類型。

Markdown代碼

​```c
#include <stdio.h>

int main(void)
{
	return 0;
}```

編譯成html


網頁顯示效果

#include <stdio.h>

int main(void)
{
	return 0;
}

03. 列表

3.1 無序列表

無序列表使用星號、加號或是減號作爲列表標記,如果不按列表顯示,前面記得加一空行。

Markdown代碼

- Red
- Green
- Blue

編譯成html

<ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

網頁顯示效果

  • Red
  • Green
  • Blue

3.2 有序列表

使用數字接着一個英文句點表示一個有序列表, 注意前面的數字對列表沒有影響。

Markdown代碼

1. 北京
2. 上海
3. 廣州
4. 深圳

編譯成html

<ol>
    <li>文字</li>
    <li>圖片</li>
    <li>表格</li>
</ol>

網頁顯示效果

  1. 北京
  2. 上海
  3. 廣州
  4. 深圳

3.3 列表嵌套

列表可以嵌套,添加tab縮進表示層次。

Markdown代碼

1. 文字
    1. 強調
        - 粗體
        - 斜體
        - 粗體和斜體
    2. 引用
2. 圖片
3. 表格

編譯成html

<ol>
    <li>文字
    <ol>
        <li>強調
            <ul>
                <li>粗體</li>
                <li>斜體</li>
                <li>粗體和斜體</li>
            </ul>
        </li>
        <li>引用</li>
    </ol>
    </li>
    <li>圖片</li>
    <li>表格</li>
</ol>

網頁顯示效果

  1. 文字
    1. 強調
      • 粗體
      • 斜體
      • 粗體和斜體
    2. 引用
  2. 圖片
  3. 表格

3.4 多段列表

列表項裏可以包含多個段落,每個項目下的段落都必須縮進 4 個空格或是 1 個製表符。

Markdown代碼

1. 學習Markdown
    學習Markdown的網站,我們可以參考文章結尾的學習資源,文檔、案例、教程。
    學習起來很簡單。
2. 使用Markdown
    可以使用客戶端和在線編輯器。

編譯成html


網頁顯示效果

  1. 學習Markdown
    學習Markdown的網站,我們可以參考文章結尾的學習資源,文檔、案例、教程。
    學習起來很簡單。
  2. 使用Markdown
    可以使用客戶端和在線編輯器。

04. 鏈接

4.1 行內式鏈接

首先來看行內式,只要在方塊括號後面緊接着圓括號並插入網址鏈接即可,如果你還想要加上鍊接的 title 文字,只要在網址後面,用雙引號把 title 文字包起來即可。

Markdown代碼

歡迎大家訪問我的[博客](https://blog.csdn.net/dengjin20104042056 "博客")。
也可以不指定[鏈接](https://blog.csdn.net/dengjin20104042056)的title。

編譯成html

歡迎大家訪問我的<a href="https://blog.csdn.net/dengjin20104042056" title="博客">博客</a>。
也可以不指定<a href="https://blog.csdn.net/dengjin20104042056">鏈接</a>的title。

網頁顯示效果

歡迎大家訪問我的博客
也可以不指定鏈接的title。

4.2 參考式鏈接(不支持)

參考式鏈接需要進行鏈接內容定義,然後引用該定義設置鏈接。

鏈接內容定義格式爲:

[鏈接名]: 鏈接地址 "鏈接title"
[鏈接名]: 空格(或tab) 鏈接地址 空格 "鏈接地址"(可省略)12

設置鏈接的格式爲

[鏈接文字][鏈接名稱]

Markdown代碼

請大家訪問我的[博客][blog],獲取更多信息。
https://blog.csdn.net/dengjin20104042056 "我的CSDN博客"

編譯成html

請大家訪問我的<a href="https://blog.csdn.net/dengjin20104042056" title="我的CSDN博客">博客</a>,獲取更多信息。

網頁顯示效果

請大家訪問我的[博客][blog],獲取更多信息。
https://blog.csdn.net/dengjin20104042056 “我的CSDN博客”

4.3 頁內導航

我們同樣可以使用markdown實現頁內導航,步驟如下:

  1. 先定義一個錨記
    <div id="footer"></div>
  2. 然後設置頁內鏈接
    [到底部](#footer)
    我們可以類似的方式去實現文章的頁內導航。單擊下面的鏈接跳轉到2.4鏈接。

05. 圖片

Markdown 使用一種和鏈接很相似的語法來標記圖片,同樣也允許兩種樣式: 行內式和參考式。
行內式圖片如下所示:

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

參考式圖片如下所示:

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

到目前爲止, Markdown 還沒有辦法指定圖片的寬高,如果你需要的話,你可以使用普通標籤。
注意:CSDN圖片如果大於顯示區域,則圖片寬度自適應,如果圖片較小則以原始尺寸顯示。

06. 分割線

你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線,行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線:

Markdown代碼

* * *
***
___
- - -

編譯成html


網頁顯示效果




07. 轉義

Markdown 可以利用反斜槓來實現轉義, 支持以下這些符號前面加上反斜槓來幫助插入普通的符號:

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

08. 附錄

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章