Hugo 內容文件中使用基本 Markdown 語法,還額外支援由 Hugo 所提供的加強語法(也支援基本 HTML 元素)。

標題 (Headings)

要建立標題,請在文字前添加井字符號 #(請注意井字符號後要加入一個空格)。使用的井字符號的數量應與標題級別相對應。例如,要建立三級標題 (<h3>),請使用三個井字符號(例如,### My Header)。

image

image

段落 (Paragraphs)

一個 Markdown 段落是由一個或多個連續的文字行組成,它的前後要有一個以上的空行。

文字區塊引用 (Blockquotes)

在段落的第一行最前面加">"

未註明出處的文字區塊引用 (Blockquote without attribution)

image

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

註明出處的文字區塊引用 (Blockquote with attribution)

image

Don’t communicate by sharing memory, share memory by communicating.

Rob Pike1

斷行 (Line Breaks)

要建立換行符號 (<br>),請以兩個或多個空格結束一行,然後鍵入 return 鍵。

表格 (Tables)

表格功能並不是 Markdown 規格, 不過 Hugo 支援這個好用的功能.

image

Name Age
Bob 27
Alice 23

表格內支援內嵌 Markdown 語法

image

Italics Bold Code
italics bold code

表格內的對齊功能

image

Number Next number Previous number
Five Six Four
Ten Eleven Nine
Seven Eight Six
Two Three One

程式碼區塊 (Code Blocks)

使用 ‘反引號’ 的程式碼區塊

image

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

使用 ‘四個空格’ 的程式碼區塊

image

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

使用 Hugo 內部支援 highlight shortcode 的程式碼區塊

image

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

使用 Gist 的程式區塊

image

<script src="https://gist.github.com/spf13/7896402.js"></script>

清單

有序清單

image

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

無序清單

image

  • List item
  • Another item
  • And another item

巢狀清單

image

  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese

image

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

以數字開頭的無序清單

image

將’段落’加入清單中

image

  • 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.

將’文字區塊引用’加入清單中

image

  • 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.

將’程式區塊’加入清單中

image

  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.

將’圖檔’加入清單中

image

  1. Open the file containing the Linux mascot.

  2. Marvel at its beauty.

    Tux, the Linux mascot

  3. Close the file.

Task List

image

image

反引號的使用

image

image

水平線 (Horizontal Rules)

image

Try to put a blank line before…


…and after a horizontal rule.

image

My favorite search engine is Duck Duck Go.

image

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

斜體 & 強調

使用 * 符號套用在文字的前後方,即可將文字改為斜體字;而使用連續兩個*加在文字的前後方則會是強調文字。

有時候,你得停一下腳步,等一等 心靈,讓心情平和,想一想自己生活中擁有的所有 美好 的東西。

使用跳脫字元

要顯示原本用於格式化 Markdown 文件中的文字字元,請在該字符前添加反斜線 (\)。

其他元素的使用 — abbr, sub, sup, kbd, mark

image

GIF is a bitmap image format.

H2O

Xn + Yn = Zn

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.


  1. The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩︎