Markdown 格式


Posted by krebikshaw on 2020-06-11

前言

開始嘗試寫心得的時候,初次接觸到 Markdown 的語法,常常出現腦海中有畫面,但呈現不出來的窘境,因此想做了一篇專門紀錄 Markdown 格式的文章。

文章中會提到下列幾項元素在 Markdown 的表示方式:

  1. 標題
  2. 超連結
  3. 引用圖片
  4. 條列式
  5. 程式碼
  6. 引言

標題

要表示標題,就在標題的名稱前面加上這個符號,記得跟文字間要空一個空格。在標題前面放的#越多,呈現出的字體就越小,最多可以支援 6 個#

# 標題
## 副標題
### 副標題
#### 副標題
##### 副標題
###### 副標題

呈現結果:

標題

副標題

副標題

副標題

副標題
副標題

超連結

要表示超連結,要運用這個格式 [文字](網址),在中括號[]中輸入想要呈現的文字,在小括號()輸入連結的網址。

你可以去[Google](https://www.google.com/webhp?hl=zh-TW&sa=X&ved=0ahUKEwiR5frKtfnpAhUGhZQKHcoOC9AQPAgH)查查看

呈現結果:
你可以去Google查查看

引用圖片

要引用圖片,方式跟超連結很類似,![文字](網址),就只是前面再多一個驚嘆號!,在中括號[]中輸入想要呈現的文字,在小括號()輸入連結的網址。

![圖片敘述](https://spectrum.imgix.net/users/3eb70894-d32c-4832-ad83-e70c7c8a48a0/2dc682ba-602a-410b-8e46-a66811d99a1a-103606203_277701416684536_1163855114054632567_n.jpg?w=256&h=256&dpr=2&auto=compress&expires=1591920000000&ixlib=js-1.3.0&s=12189d0b444b35b4f74c98b5ea509508)

呈現結果:
圖片敘述

條列式

條列式的表示方式很容易,語法跟實際上看的的一樣1.,要記得數字跟文字之間一定要空一個空格。
若是不想用數字,可以使用*,呈現結果如下:

1. 寫作業
2. 寫完要交作業之前,觀看當週的「自我檢討」
3. 根據自我檢討的內容修改作業
4. 繳交作業
5. 交完作業以後觀看「參考解答」來學習我的解法
* 不斷努力
* 日新月異
* 突破自己

呈現結果:

  1. 寫作業
  2. 寫完要交作業之前,觀看當週的「自我檢討」
  3. 根據自我檢討的內容修改作業
  4. 繳交作業
  5. 交完作業以後觀看「參考解答」來學習我的解法
  • 不斷努力
  • 日新月異
  • 突破自己

程式碼

要表示程式碼,或者是將重要的文字 highlight 起來,有兩種方式。
若這段文字很短,不需要另外獨立出一個區壞來呈現,那就把文字夾在兩個反引號中間。

這段文字很 `重要`,要 heighlight 起來

這段文字很 重要,要 heighlight 起來

若是文字比較長需要一行甚至是多行來呈現,就把文字夾在 6 個反引號中間,左右各 3 個。前三個反引號後面,可以加上一個空格跟你目前要使用的程式語言名稱,它就會依照你寫的程式語言,做相對應的變色,更方便讀者觀看。

var box = 123
console.log(box)

引言

使用別的文章引用的敘述,或者是自己想要加個備註,都可以使用這個語法。在文字的前面加上一個大於的符號。

這段是引言

總結

這次程式導師實驗計畫,帶我們熟悉相當多好用的網站與軟體,都需要使用 Markdown 的格式,所以把這些功能都熟悉可以幫助自己寫的更好。以上所舉的例子都只是小部分,還有很多厲害的語法都沒有提到。
若是想看更多語法,可以參考HackMD 使用教學










Related Posts

[進階 js 11]  this

[進階 js 11] this

MTR04_0613

MTR04_0613

[FE101] HTML 基礎

[FE101] HTML 基礎


Comments