Markdown超詳細使用說明

原文地址:點擊查看php

內容摘要

介紹了Markdown的來源,使用場景,並以豐富的示例,詳細介紹了Markdown的各類語法,幫助你們更好的使用Markdown。
若是您以爲有用,也歡迎將本文推薦給您的朋友。html

什麼是Markdown

Markdown是一種輕量級標記語言,經過純文本的方式編寫文檔,而後再經過工具轉化成HTML,PDF,圖片等格式,實現Write Once,Read Everywhere的效果。 更詳細的定義參見維基百科java

Markdown示意圖:
git

使用Markdown的好處是什麼呢

Markdown是一種純文本標記語言,那麼純文本標記語言有什麼好處呢?程序員

  1. 方便編輯。任何一個文本編輯器就能夠編輯,連你們熟悉的Windows記事本也能夠。讓編寫者專一於內容,而不是格式。是否有爲了調整不聽話的編輯器(好吧,我說的就是word)的格式而浪費大量時間的經歷?
  2. 能夠放到版本管理系統中,追蹤歷史變動。這對碼農們來講過重要了,這樣文檔能夠和程序代碼一塊兒放版本管理系統中了。若是你不清楚版本管理系統,只須要把它理解成能夠永久追蹤的修改歷史記錄便可(版本管理系統能夠另開一篇文章了)。這樣,多人協做編輯的時候,也不用擔憂文檔被改壞了。

要把時間放在製造優質內容上,而不是調整文檔格式。(想起了多年前作研究生論文的時候。。。)spring

Markdown的歷史

Markdown由John Gruber在2004年建立。其中在語法上有很大一部分是跟Aaron Swartz共同合做的。markdown

Aaron Swartz就是那位於2013年自殺,有着開掛通常人生經歷的程序員。維基百科對他的介紹是:軟件工程師、做家、政治組織者、互聯網活動家、維基百科人網絡

他有着足以讓你跪拜的人生經歷:編輯器

  • 14歲參與RSS 1.0規格標準的制訂。
  • 2004年入讀斯坦福,以後退學。
  • 2005年建立Infogami,以後與Reddit合併成爲其合夥人。
  • 2010年創立求進會(Demand Progress),積極參與禁止網絡盜版法案(SOPA)活動,最終該提案竟然被撤回。
  • 2011年7月19日,因被控從MIT和JSTOR下載480萬篇學術論文並以避免費形式上傳於網絡被捕。
  • 2013年1月自殺身亡。
Aaron Swartz

天才都有早逝的歸途(又是一位猶太人)。函數

Markdown的用途

  • 論壇或博客
  • gitbook
  • 郵件
  • 學術論文
  • 等等

Markdown能用在哪些地方

  • GitHub
  • 簡書
  • Stack Overflow
  • Apollo
  • Moodle
  • Reddit
  • 等等

Markdown語法詳解

標題:使用 # 標記標題

使用 # 號可標記1 - 6級標題,一級標題對應 1 個 # 號,二級標題對應 2 個 # 號,以此類推。

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題
複製代碼

顯示效果以下:

一級標題

二級標題

三級標題

四級標題

五級標題
六級標題

段落格式及字體

段內換行和段落之間

段落內的換行使用 2 個以上空格加上回車;也能夠在段落後面使用一個空行來表示從新開始一個段落。

這是第一段的第1行    <--末尾添加至少2個空格
這是第一段的第2行
(空行)
這是第二段
(空行)
這是第三段
複製代碼

顯示效果以下: 這是第一段的第1行
這是第一段的第2行

這是第二段

這是第三段

字體

*斜體文本*
_斜體文本_
**粗體文本**
__粗體文本__
***粗斜體文本***
___粗斜體文本___
複製代碼

顯示效果以下:

斜體文本
斜體文本
粗體文本
粗體文本
粗斜體文本
粗斜體文本

字號及顏色

<font size=1>大小爲1的字體</font>
<font size=6>大小爲6的字體</font>

<font color=gray size=4>gray顏色的字</font>
<font color=green size=4>green顏色的字</font>
<font color=hotpink size=4>hotpink顏色的字</font>
<font color=LightCoral size=4>LightCoral顏色的字</font>
<font color=LightSlateGray size=4>LightSlateGray顏色的字</font>
<font color=orangered size=4>orangered顏色的字</font>
<font color=red size=4>red顏色的字</font>
<font color=springgreen size=4>springgreen顏色的字</font>
<font color=Turquoise size=4>Turquoise顏色的字</font>
複製代碼

顯示效果以下:(如這裏看不到效果,說明此網站Markdown實現不支持插入HTML標籤)

大小爲1的字體
大小爲6的字體
gray顏色的字
green顏色的字
hotpink顏色的字
LightCoral顏色的字
LightSlateGray顏色的字
orangered顏色的字
red顏色的字
springgreen顏色的字
Turquoise顏色的字

分隔線

有多種方法均可以創建分隔線:3個以上的星號,3個以上的減號,3個以上的下劃線,也能夠在星號、減號、下劃線中間插入空格,這幾種方式均可以創建分隔線。

***
* * *
******
- - -
_ _ _
複製代碼

顯示效果以下:






刪除線

我沒有刪除線
我也沒有刪除線
~~我有刪除線~~
複製代碼

顯示效果以下:

我沒有刪除線
我也沒有刪除線
我有刪除線

下劃線

Markdown中並沒有下劃線的原生語法,能夠經過HTML的<u>標籤來實現。

<u>我帶下劃線</u>
複製代碼

顯示效果以下:

我帶下劃線

腳註

腳註是對文本的補充說明。

[^要註明的文本]
複製代碼

示例:

建立腳註格式相似這樣 [^Markdown]。
[^Markdown]: 這是一個腳註
複製代碼

顯示效果以下:

建立腳註格式相似這樣[1]

Markdown列表

無序列表

無序列表使用星號,加號或是減號做爲標記。

* 列表項1
* 列表項2

+ 列表項1
+ 列表項2

- 列表項1
- 列表項2
複製代碼

顯示效果以下:

  • 列表項1
  • 列表項2
  • 列表項1
  • 列表項2
  • 列表項1
  • 列表項2

有序列表

有序列表使用數字加上 . 號來表示,注意 . 號和實際內容之間須要加一個空格。

1. 有序列表項1
2. 有序列表項2
複製代碼

顯示效果以下:

  1. 有序列表項1
  2. 有序列表項2

列表嵌套

列表嵌套只須要在子列表選項的前面添加 4 個空格便可。

* 無序列表1
    1. 有序列表1.1
    2. 有序列表1.2
* 無序列表2
    - 無序列表2.1
    - 無序列表2.2
複製代碼
  • 無序列表1
    1. 有序列表1.1
    2. 有序列表1.2
  • 無序列表2
    • 無序列表2.1
    • 無序列表2.2

Markdown區塊

區塊使用 > 符號,後面加上一個空格。

> 區塊
> Markdown
> 用Markdown寫文章,爽!
複製代碼

顯示效果以下:

區塊 Markdown 用Markdown寫文章,爽!

區塊嵌套:每一層嵌套加上 > 符號和空格

> 區塊
> > 嵌套1
> > > 嵌套2
複製代碼

顯示效果以下:

區塊

嵌套1

嵌套2

Markdown代碼

行內函數或代碼片斷,直接使用反引號便可。注意這裏的反引號是鍵盤左上角的那個鍵,通常在esc鍵下面。

`print("hello, world")`函數
複製代碼

顯示效果以下:

print("hello, world")函數

代碼區塊1

代碼區塊使用 4 個空格或 1 個製表符(Tab)

<?php
      function test() {
        echo 'hello, world';
      }
      test()
    ?>          
複製代碼

顯示效果以下:

<?php
    function test() {
        echo 'hello, world';
    }
    test()
?>
複製代碼

代碼區塊2

也可使用```包裹一段代碼,並指定一種語言(也能夠不指定)。

​```java
public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("hello, world");
	}
}
​```
複製代碼

顯示效果以下:

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("hello, world");
	}
}
複製代碼

連接

連接的使用方法:

[連接名稱][連接地址]

或者

<連接地址>
複製代碼

例如:

[SanFeng的網絡日誌](http://blog.kfzhang.cn)
或
<http://blog.kfzhang.cn>
複製代碼

顯示效果以下:

SanFeng的網絡日誌

或者直接使用連接地址:

blog.kfzhang.cn

高級用法

連接也能夠用變量來替代,文檔末尾附帶變量地址(下面的blog和home都是變量):

[訪問博客請點擊][blog]
[訪問首頁請點擊][home]
[blog]: http://blog.kfzhang.cn
[home]: http://www.kfzhang.cn
複製代碼

顯示效果以下:
訪問博客請點擊
訪問首頁請點擊

圖片

Markdown圖片語法格式以下:

開頭一個感嘆號!
接着一個方括號,裏面放上圖片的替代文字
接着一個普通括號裏面放上圖片的地址,最後還能夠用引號包住並加上選擇性的'title'屬性的文字

![alt 屬性文本](圖片地址)
![alt 屬性文本](圖片地址 "可選標題")
複製代碼

例:

![logo](https://user-gold-cdn.xitu.io/2019/12/24/16f36a2574c9899c?w=180&h=180&f=png&s=28216)
![logo](https://user-gold-cdn.xitu.io/2019/12/24/16f36a2574c9899c?w=180&h=180&f=png&s=28216 logo)
複製代碼

logo

logo
logo

高級用法

跟連接的用法相似,也能夠像網址那樣對圖片地址使用變量。

連接也能夠用變量來替代,文檔末尾附帶變量地址:

![logo][1]
[1]: https://user-gold-cdn.xitu.io/2019/12/24/16f36a2574c9899c?w=180&h=180&f=png&s=28216
複製代碼

logo

擴展用法

原生Markdown不支持調整圖片的高度、寬度等參數,可使用<img>標籤,固然並非全部的Markdown實現都支持這種用法,實測爲準。

<img src="https://user-gold-cdn.xitu.io/2019/12/24/16f36a2574c9899c?w=180&h=180&f=png&s=28216" width=10%>
複製代碼

顯示效果以下:(如這裏看不到效果,說明此網站Markdown實現不支持插入HTML標籤)

表格

Markdown表格使用 | 來分隔單元格,使用 - 來分隔表頭和其它行。

| 表頭 | 表頭 |
| --- | --- |
| 單元格 | 單元格 |
| 單元格 | 單元格 |
複製代碼

顯示效果以下:

表頭 表頭
單元格 單元格
單元格 單元格

對齊方式

能夠設置表格的對齊方式:

-: 設置內容和標題欄右對齊
:- 設置內容和標題欄左對齊
:-: 設置內容和標題欄居中對齊
複製代碼

示例:

| 左對齊 | 右對齊 | 居中對齊 |
| :---- | ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |
複製代碼

顯示效果以下:

左對齊 右對齊 居中對齊
單元格 單元格 單元格
單元格 單元格 單元格

高級技巧 - HTML元素

支持HTML元素

不在 Markdown 涵蓋範圍以內的標籤,均可以直接在文檔裏面用 HTML 撰寫。 目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等。 示例:

使用 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> 來重啓電腦   
<b>加粗的字體</b>   
<i>斜體字</i>
<em>強調文本</em>
這個文本包含<sup>上標</sup>文本
這個文本包含<sub>下標</sub>文本
使用 br 元素<br>在文本中<br>換行
複製代碼

顯示效果以下:(如這裏看不到效果,說明此網站Markdown實現不支持插入HTML標籤)
使用 Ctrl + Alt + Del 來重啓電腦
加粗的字體
斜體字
強調文本
這個文本包含上標文本
這個文本包含下標文本
使用 br 元素
在文本中
換行

高級技巧 - 轉義

Markdown 使用了不少特殊符號來表示特定的意義,若是須要顯示特定的符號則須要使用轉義字符,Markdown 使用反斜槓轉義特殊字符。 Markdown支持對如下特殊符號的轉義:

\   反斜線
`   反引號
*   星號
_   下劃線
{}  花括號
[]  方括號
()  小括號
#   井字號
+   加號
-   減號
.   英文句點
!   感嘆號
複製代碼

示例:

**文本加粗** 
\*\* 正常顯示星號 \*\*
複製代碼

顯示效果以下:
文本加粗
** 正常顯示星號 **

高級技巧 - 數學公式

當你須要在編輯器中插入數學公式時,可使用兩個美圓符 $$ 包裹 TeX 或 LaTeX 格式的數學公式來實現。提交後,問答和文章頁會根據須要加載 Mathjax 對數學公式進行渲染。 示例:

$$
\mathbf{V}_1 \times \mathbf{V}_2 = 
\begin{vmatrix} 
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$
複製代碼

顯示效果以下:

\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
\mathbf{i} & \mathbf{j} & \mathbf{k} \\\\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}

更詳細的數學公式請參考Markdown中Latex數學公式基本語法

常見的Markdown軟件

本文主要關注Markdown的使用,對常見的Markdown工具及軟件就不詳細描述了,若有興趣請參見:簡單易懂Markdown工具篇

就我的的喜愛和使用經驗來說,強烈推薦Typora,支持多平臺包括Win,Mac,Linux,真的很是好用。


參考文獻:

標題 地址
Markdown教程 www.runoob.com/markdown/md…
讓文檔迴歸本質,爲何應該用Markdown jolestar.com/markdown-to…
Markdown語法全解 blog.csdn.net/jk_chen_acm…
Markdown中Latex數學公式基本語法 blog.csdn.net/u014630987/…

  1. 這是一個腳註 ↩︎

相關文章
相關標籤/搜索