Markdown 從零開始 基本文法篇

要寫好一篇漂亮的Blog文章,就從認識Markdown開始,本篇使用Visual studio code 開發 (關於VSCode開發Markdown文件請參考Markdown 從零開始 開發工具篇),在開始之前先讓我們一起認識Markdown的基本文法有哪些吧!


套件安裝

本篇使用的是 Markdown All in One 套件。


文法介紹

Setp1. 標題表示法

支援六個層級的標題表示法,透過 # 符號,符號越多代表層級越低,結構以HTML的 <h1> ~ <h6> 表示。

標題一

標題二

標題三

標題四

標題五
標題六
# 標題一
## 標題二
###  標題三
#### 標題四
##### 標題五
###### 標題六

Setp2. 項目清單表示法

項目清單表示法有三種:【*】【-】【+】, 可透過Markdown All in One提供的 Toggle list快速產生項目清單清單功能

產生項目符號清單

Markdown_list

產生項目編號清單

Markdown_numberlist


Setp3. 檢查清單

快速實現檢查清單功能,透過Visual Studio Code 快速選取首字快速鍵 Ctrl + Alt + 上下鍵 直接於首字前面輸入 -[ ] 符號,即可快速產生檢查清單功能,並且可透過快速鍵 Alt + C 實現快速勾選檢查清單功能 。

  • 汽車
  • 機車
  • 電動車
  • 腳踏車

方法

-[ ] 汽車 
-[x] 機車 
-[ ] 電動車
-[ ] 腳踏車

Setp4. 字型

粗體 斜體 刪除線

**粗體**
_斜體_
~~刪除線~~

Setp5. 分隔線

可透過以下符號:星號、減號、底線來建立一個分隔線

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

Setp6. 引言

若要特別引用或是標籤式概念,可在字首透過 > 符號產生區塊引言,支援多個層級的寫法

測試測試測試測試

測試測試測試測試

測試測試測試測試

測試測試測試測試

測試測試測試測試

> 測試測試測試測試
>> 測試測試測試測試
>>> 測試測試測試測試
>>>> 測試測試測試測試
>>>>> 測試測試測試測試

Setp7. 行內程式碼

在一個段落的句子中間,可以將程式碼內容前後加上反引號【`】,我們就可以在一個段落中穿插程式碼語言囉。

前後包夾文字 var a = 1前後包夾文字

前後包夾文字`var a = 1`前後包夾文字

Setp8. 程式碼區塊

使用三個連續的反引號【`】作為開頭與結尾,即可展示區塊程式碼,並且於首行加上特定程式碼語言名稱,該區塊就可使用特定語言的 Highlight,可參考 Highlight Supported Languages

c#

public class MyClass{}
public void Run{}
```cs
public class MyClass{}
public void Run{}
```

Json

{"name":"Vivi", "age":32, "phone":null}
```json
{"name":"Vivi", "age":32, "phone":null}
```

HTML

<script type="text/javascript">  
    alert("Hello");  
</script>  
```html
<script type="text/javascript">  
    alert("Hello");  
</script>  
```

JavaScript

$(document).ready(function() {  
    alert("Hello");  
});  
```js
$(document).ready(function() {  
    alert("Hello");  
});  
```

SQL

select * from mytable
```sql
select * from mytable
```

Setp9. 超連結與圖片

一般文字超連結

選取文字反白後,將已經複製的連結 Ctrl + v 貼上即可產生文字超連結

Markdown_Link

載入圖片

選取文字反白後,將已經複製的圖片連結 Ctrl + v 貼上即可產生文字超連結

Markdown_LinkImage

載入圖片(GitHub)

套過GitHub Issue,可直接截圖後將圖片貼上產生圖片連結

GitHubIssue

將GitHub Issue產生的圖片連結,直接複製貼回Markdown,即可產生圖片顯示

Markdown_GitHubImage


Setp10. 跳脫字元

Markdown中使用了非常多常用的符號,若想在文件當中插入普通的符號需透過跳脫字源反斜線 \ 來幫助。


Setp11. 大綱產生方法

透過Markdown All in One提供的 Create Table of Contents 快速產生整份文件大綱 image


  • 參考文章

Will 保哥的技術交流中心 - 你一定不能不知道的 Markdown 寫作技巧

Markdown All in One

Markdown Extension Pack


留言板
歷史留言

標籤