Markdown 魔法：讓你的部落格文章閃耀的秘訣

網路上已有很多鮮明的網站，都是使用Markdown作為他們的文章編輯工具，並呈現在我們面前，比如Github、Reddit、Stack Overflow、Medium等，因此花時間整理了 Markdown 語法，作為自己的工具百寶箱。

引言

自2004年由John Gruber和Aaron Swartz共同創建以來，已經深刻改變了數以萬計作者的寫作和格式化內容的方式。Markdown的設計宗旨是可讀性，意味著格式化文章應該盡可能易於閱讀和寫作。通過簡單的標記語法，Markdown讓作者能夠專注於內容創作，而不是被繁瑣的格式設定所困擾。

本文的目標是深入揭示Markdown的潛力，從基礎語法到進階技巧，我們將一步步探索如何充分利用Markdown讓你的部落格文章閃耀。

Markdown基礎

在這個章節中主要介紹基礎語法與使用方式建議。

標題 (Headings)

在Markdown中標題是通過使用一個或多個井字號 # 開頭來創建的，對應於HTML中的<h1>到<h6>標籤，符號後面跟著一個空格和標題的文字。

 # 標題1       //通常用於文章的主標題或最重要的標題。
 ## 標題2      //和其他較低級別的標題則用於分節標題或子標題，幫助組織內容結構。
 ### 標題3
 #### 標題4
 ##### 標題5
 ###### 標題6

標題不僅幫助讀者理解內容的結構，也使得文章在視覺上更加吸引人。適當地使用標題可以顯著提升文章或文章的整體質量。

使用適當的標題級別可以提高文章的可讀性和結構清晰度，也有利於搜索引擎優化 (SEO)

段落 (Paragraphs)

在Markdown中，創建段落的方法非常簡單，主要依賴於空白或換行來分隔內容。

1. 行末雙空格換行：

   這是第一行段落。[空格][空格]
   這是第二行段落，上一行末尾有兩個空格。 // 旨在同一段落內創建新行
   

2. 空行創建新段落：

   這是一個段落。
   
   這是另一個段落，段落之間有換行。 // 視為不同段落(會有段落間距)
   

Markdown中段落的創建和管理旨在使寫作過程盡可能簡單。
通過簡單地組織你的內容和合理地使用空白行，你可以創建出既易於閱讀又結構清晰的文章。

分隔線 (Horizontal Rules)

在Markdown中，分隔線用於在視覺上將文本內容分隔開，有助於改善內容的結構和可讀性。
分隔線通常用於區分不同的節點、更改話題或在視覺上分隔文本以增強整體布局。

創建分隔線只需連續輸入三個或更多的短劃線（hyphens），星號（asterisks），或下劃線（underscores）。

---
*** 
___

簡單說來使用分隔線可幫助結構化內容，明確顯示不同部分或章節的開始和結束，使讀者更容易跟隨和理解，以及美觀目的。

粗體 (Bold) 和斜體 (Italic)

在Markdown中，強調內容通常涉及使用粗體和斜體。這些格式化選項幫助讀者識別重要的概念或關鍵詞，並在視覺上突出顯示特定的內容片段。

1. 粗體：

   **這是粗體內容**
   __這也是粗體內容__
   

2. 斜體：

   *這是斜體內容*
   _這也是斜體內容_
   

使用建議：

• 合理使用粗體以強調重要或者必須注意的點
• 斜體則用來強調關鍵詞或概念、書名、外來語等

如果你使用粗體來標記所有的標題或關鍵詞，則應該在整篇文章中堅持這一做法，來增強你的文章或文章的表達力。

項目清單 (List)

在Markdown中，清單是組織和展示項目、步驟或想法的有效工具。清單可以是無序的 (使用符號標記) 或有序的 (使用數字標記) 。這些結構幫助於增強內容的可讀性，使信息的呈現更加清晰。

1. 無序清單 (Unordered List) ：
   通過在每個項目前使用星號(*)、加號(+)或減號(-)等來創建。
   這些符號是可互換的，但在同一清單中保持一致性是個好習慣。

   * 項目一
   * 項目二
   * 項目三
   
   - 另一項目一
   - 另一項目二
   - 另一項目三
   
   + 再一項目一
   + 再一項目二
   + 再一項目三
   

2. 有序清單 (Ordered List) ：
   通過在每個項目前放置數字和一個點 (1.) 來創建。
   數字的序列會影響HTML輸出中的順序表示，但在Markdown程式碼中，即使你使用相同的數字，清單也會自動按順序排列。

   1. 第一步
   2. 第二步
   3. 第三步
   

無論是草擬計劃清單、展示步驟指南還是簡單地將信息分類，使用清單都可以將複雜的項目拆解為小項目或步驟，以及項目中的子清單，以使內容結構清晰，易於閱讀理解。

超連結 (Links) 和圖片 (Images)

在Markdown中，連結和圖片是豐富文章內容和提高可讀性的重要元素。它們可以引導讀者訪問相關資源或增強信息的視覺表達。

1. 超連結：
   創建連結使用方括號[連結文字]來包裹連結文字，後跟著半形括號 ((URL)) 包裹住URL。
   在URL後面用雙引號包裹的替代內容((URL "替代文字"))，這個標題在鼠標懸停時會顯示。

   [OpenAI](https://www.openai.com)
   [OpenAI官網](https://www.openai.com "訪問OpenAI")
   

   請將鼠標懸停在這裡以查看替代文字

2. 圖片：
   圖片的語法與連結類似，但在方括號前加一個驚嘆號(!)，表示這是一個圖片。方括號內是圖片的替代內容 (alt text) ，用於描述圖片內容，這對於視覺障礙人士和圖片無法加載時特別重要。

   ![Logo](https://example.com/logo.png "Alt Text")
   

   

使用建議：

• 對於所有圖片務必填寫替代文字(alt text)，這不僅有利於搜索引擎優化 (SEO) ，也確保了內容的無障礙訪問。
• 使用有意義的連結文字使讀者即使不點擊連結也能理解其指向的內容。
• 使用適當圖片大小，以加快頁面加載速度並提升用戶體驗。

通過恰當使用連結和圖片，你可以創建出更加豐富、互動和有吸引力的Markdown文章，有效地引導讀者並增強信息傳達的效果。

引用 (Blockquotes)

在Markdown中，引用 (blockquote) 用於將內容從其餘內容中視覺上區分開來，常用於引用來源、突出顯示重要內容或模擬對話內容。
使用引用可以增加文章的可讀性和權威性，尤其是在提供證據或解釋引用材料時。

引用在Markdown中通過在內容行或段落前加上大於>來創建。如果你想創建多段引用，每段的開頭都需要加上大於號，或者在段落之間插入一個包含大於號的空白行。

> 這是一段引用文字內容。
>
> 這是相同引用區塊中的另一段文字內容。

使用方式：

1. 當需要引用他人的創作或言論，來增強文章的可讀性和權威性時，要確保來源準確。
2. 引用可以與其他Markdown元素結合使用，如清單、程式區塊或甚至其他引用，以創建結構豐富且吸引人的內容。

通過遵循這些使用建議，引用不僅能增加你Markdown文章的專業度和深度，還能幫助讀者更好地理解和跟隨你的論點。

程式區塊 (Code Blocks)

使用三個反引號 (```) 或三個波浪號 (~~~) 在程式區塊的開頭和結尾。
這種方式可指定一種程式語言，使支持語法高亮的渲染器可為程式區塊提供適當的語法高亮。

def say_hello():
    print("Hello, Markdown!")

使用建議：

1. 保持清晰：確保程式清晰、易讀，並添加註解來解釋程式的功能或特定部分。
2. 避免過長的程式：如果程式過長考慮只包含最關鍵的部分，或提供一個鏈接到完整程式。

程式區塊是Markdown文章中展示程式的強大工具，正確使用可以大大增強技術內容的清晰度和可讀性。

Markdown進階技巧

表格 (Tables)

在Markdown中，創建表格非常直接。你可以使用簡單的語法以表格格式組織數據。表格非常適合清晰、簡潔地顯示一組信息。

• 基本語法 (Basic Syntax )
  由列和行組成，分別由豎線(|)和連字符(-)表示。第一行通常是表頭，其後是分隔線，然後是表格行。

  | 城市 | 最高溫度 (°C) | 人口  |
  | ---- | ------------- | ----- |
  | 台北 | 32            | 267萬 |
  | 高雄 | 33            | 277萬 |
  | 台中 | 31            | 281萬 |
  

• 內容對齊(Alignment)
  可以通過在分隔線上添加冒號(:)來實現列中內容的左、右或居中對齊。

  | 產品 | 數量  |  單價 |
  | :--- | :---: | ----: |
  | 蘋果 |  100  |    $1 |
  | 香蕉 |  50   |    $2 |
  | 橙子 |  75   | $1.50 |
  

腳註 (Footnotes)

Markdown的腳註功能允許你在文章中添加註解和引用，而不會干擾正文的流暢閱讀。
腳註對於提供額外資訊、解釋或參考文獻特別有用。

腳註標記由方括號包裹的腳註名稱或編號，後跟一個冒號和實際的腳註內容組成。
腳註的具體內容通常放在文章的底部。

這是一段文字[^1]，需要進一步解釋。

[^1]: 這是一個腳註的範例，提供額外的資訊或解釋。

實際範例：
這是一段文字¹，需要進一步解釋。

定義清單 (Definition Lists)

Markdown標準語法中沒有直接支持定義清單，但一些擴展的Markdown版本 (如GitHub Flavored Markdown) 和一些Markdown處理器支持這一功能。在這些系統中，你可以使用冒號 (:) 來創建定義清單。

在支持定義清單的Markdown處理器中，定義清單通常由三個部分組成：術語 (term) 、定義者 (classifier，可選) 、和定義 (definition)。
以下是一個如何創建定義清單的例子：

術語1
:   定義1

術語2 : 定義者
:   定義2

實際範例:

Markdown

一種輕量級的標記語言，它允許人們使用易讀易寫的純文字格式編寫內容，然後轉換成結構化的HTML。

GitHub : PJ Hyett

一個支持Git程式儲存和版本控制功能的平台，同時提供了協作功能如議題(Issue)追蹤、功能請求、任務管理和維基(Wiki)等項目。

定義清單適用於解釋術語、列出一組規則或指南、或提供問題和答案。
在這些場景下使用定義清單可以使信息的組織更加清晰。

請注意，由於不是所有的Markdown解析器都支持定義清單，所以在使用前最好確認你的目標平台或處理器是否支持這一功能。如果不支持，你可能需要使用其他方法 (如使用引用或清單) 來模擬定義清單的效果。

內嵌HTML

元素

直接在Markdown文章中使用HTML元素，例如 <div>, <span>, <p>, <h1>, 等等。

<div class="container">
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</div>

屬性

直接在Markdown文章中使用HTML屬性，例如 class, id, style 等。

<p style="color: red;">This paragraph is red.</p>

連結

使用 <a> 標記來創建外部連結。

<a href="https://example.com">Visit our website</a>

請注意，雖然Markdown支持HTML的嵌入，但它的主要目的是提供一種更簡潔、易讀的標記語言。因此，盡可能在撰寫Markdown文章時保持簡潔，只在必要時才使用HTML來實現更高級的樣式和結構。

自定義CSS樣式與JS

在Markdown文件的開頭或任何其他地方使用HTML的<style>標籤來添加自定義CSS樣式。

<style>
  .custom-class {
    color: blue;
    font-size: 18px;
  }
</style>

使用自定義樣式的文字：

<span class="custom-class">這是自定義樣式的文字。</span>

可以使用HTML的<script>標籤來添加腳本或工具。

<script>
  console.log("這是一個JavaScript腳本範例。");
</script>

請注意，某些部落格平台可能會限制JavaScript程式的使用。

靜態網站生成器

靜態網站生成器是一種工具，它允許開發者和作者使用純內容，通常是Markdown格式，來創建網站內容。這些工具將Markdown文件轉換成HTML，並自動應用布局和樣式，生成可以直接部署到任何標準網絡服務器上的靜態網站。

Markdown在靜態網站生成中的作用

Markdown因其簡潔和易於閱讀/寫作的語法，成為創建和管理網站內容的理想選擇。在靜態網站生成過程中，Markdown文件被轉換為網站的各個頁面。這種方式使得內容創作和維護變得更加高效和直接。

使用靜態網站生成器的好處

• 性能優越：靜態網站加載速度快，因為它們不需要服務器端的動態處理。
• 安全性高：缺少數據庫和動態內容處理降低了安全風險。
• 易於部署：靜態網站可以托管在包括GitHub Pages和Netlify在內的多種服務上。
• 版本控制友好：整個網站可以用版本控制系統管理，便於協作和更改追蹤。

流行的靜態網站生成器

• Jekyll：與GitHub Pages緊密集成，非常適合個人部落格和項目網站。
• Hugo：以其構建速度快而聞名，適用於各種規模的項目。
• Gatsby：利用React技術棧，適合現代網絡應用。

實現範例

以Jekyll為例，創建一個簡單的網站只需要以下幾步：

1. 安裝Jekyll並創建新的項目。
2. 將待發布的“{新文章.md}”添加到項目的_posts目錄。
3. 使用Jekyll提供的命令生成網站。

   gem install jekyll
   jekyll new my-awesome-site
   cd my-awesome-site
   jekyll serve
   

靜態網站生成器與Markdown結合使用，為網站開發和內容管理提供了一種高效、安全且易於使用的解決方案。
無論是個人部落格、項目文章還是企業網站，都可以從這種方法中受益。

數學公式

在Markdown中撰寫數學公式通常使用LaTeX語法。
以下是一些常見的Markdown語法和LaTeX語法範例：

嵌入行內數學公式

您可以使用單或雙個美元符號 $$ 將數學公式嵌入到行內內容中。

例如，公式 $$E=mc^2$$ 是著名的相對論方程。

\[E=mc^2\]

嵌入獨立段落數學公式

如果您需要一個獨立段落來顯示數學公式，您可以使用兩個美元符號 $$ 將數學公式包裹起來。

例如，我們可以使用以下方程來描述一個球體的體積：

$$
V = \frac{4}{3}\pi r^3
$$

\(V = \frac{4}{3}\pi r^3\)

常見的LaTeX語法

以下是一些常見的LaTeX數學語法範例，您可以在Markdown中使用它們：

• 上標：x^{2} = \(x^{2}\)
• 下標：x_{1} = \(x_{1}\)
• 分數：\frac{a}{b} = \(\frac{a}{b}\)
• 開方：\sqrt{x} = \(\sqrt{x}\)
• 求和：\sum_{i=1}^{n} i = \(\sum_{i=1}^{n} i\)
• 積分：\int_{a}^{b} f(x) dx = \(\int_{a}^{b} f(x) dx\)
• 矩陣：\begin{matrix} a & b \\ c & d \end{matrix} = \(\begin{matrix} a & b \\ c & d \end{matrix}\)

• 函數：

  \sin(x) = \(\sin(x)\),

  \cos(x) = \(\cos(x)\),

  \log(x) = \(\log(x)\)等

請注意，在使用LaTeX語法時，需確保MarkDown編輯器有支援LaTeX數學公式語法，因此需要額外引用相關套件如MathJax²或KaTeX。

Markdown學習資源

以下是一些學習 Markdown 的學習資源：

1. 網站：
   • Markdown 教程 - Markdown Guide：提供了詳細的 Markdown 教程，從基礎到進階的各個方面都有涵蓋。
   • Mastering Markdown - GitHub Guides：GitHub 提供的 Markdown 教程，介紹了如何在 GitHub 上編寫 Markdown 文件。
   • GitHub Skills：使用 Markdown 進行溝通。
   • Jekyll官方文章：瞭解更多有關Jekyll靜態網站生成器的信息。
2. 書籍：
   • 《The Markdown Guide》：由 Matt Cone 撰寫，是一本全面介紹 Markdown 的書籍，包含了豐富的範例和實用技巧。
   • 《GitHub For Dummies》：由 Sarah Guthals、Phil Haack 和 Tom Preston-Werner 合著，是一本針對 GitHub 的入門書籍，其中包括了 Markdown 的相關章節。
3. 其他教學：
   • Markdown 教學 - Codecademy：Codecademy 提供的 Markdown 在線教程，通過互動式的方式來學習 Markdown。
   • Markdown 教學 - YouTube：YouTube 上有許多 Markdown 的教學視頻，這是其中一個範例。
4. 工具：
   1. MarkdownLint：
      • 功能：MarkdownLint 是一個用於檢查Markdown文章中語法錯誤的工具，它可以幫助您確保Markdown文件的格式正確。
      • 建議：在提交Markdown文件之前運行MarkdownLint來檢查文件中的潛在問題，如標題格式、鏈接格式等。
   2. LinkChecker：
      • 功能：LinkChecker 是一個用於檢查鏈接有效性的工具，它可以自動檢測Markdown文件中的鏈接是否有效。
      • 建議：運行LinkChecker來檢查Markdown文件中的鏈接是否有效，以確保用戶能夠正確訪問到連接的內容。

這些資源都可以幫助您學習 Markdown，從基礎到進階的各個方面都有涵蓋。希望能有所幫助！

結論

隨著我們一步步深入探索Markdown的迷人世界，我們發現它不只是一種標記語言。Markdown是一種魔法，能將我們的內容轉化為結構清晰、外觀吸引人的網頁內容。從基本格式化技巧到進階的圖片和表格插入，Markdown提供了一個簡單而強大的工具集，讓撰寫網頁內容變得輕鬆而高效。

通過本文，我們學會了如何使用Markdown來豐富我們的部落格文章，發現了透過簡化格式設置和版面設計的複雜性，我們可以更專注於內容本身。Markdown的魔法在於它的簡潔與效率，讓我們的創意迅速轉化為引人入勝的文章。

記住，掌握Markdown魔法的關鍵在於實踐。隨著你越來越多地使用它，你將發現更多隱藏的技巧和技術，讓你的文章不僅閃耀，更能脫穎而出。

未來展望

開始你的Markdown之旅，讓你的創意無限放大，為讀者帶來難忘的閱讀體驗。每一篇文章都是與讀者的獨特對話，Markdown是讓這場對話更加生動的魔杖。

在Markdown的世界裡，每個人都可以成為魔法師。拿起你的魔杖 (鍵盤) ，開始創造屬於你的魔法吧！

---

腳註

1. 這是一個腳註的範例，提供額外的資訊或解釋。 ↩︎

2. MathJax預設配置為置中對齊，需通過在引入cdn前修改配置，使其預設顯示實現靠左對齊以及指定縮排。 ↩︎