Markdown 功能展示

展示各種 Markdown 功能和語法高亮

約 1 分鐘
#markdown #程式碼 #教學

Markdown 功能展示

這篇文章展示了各種 Markdown 功能和語法高亮的功能。

基本格式

以下是一些基本的文字格式：

  • 粗體文字 使用 **星號**
  • 斜體文字 使用 *星號*
  • 刪除線 使用 ~~波浪號~~
  • 行內程式碼 使用反引號

列表

無序列表

  • 第一項
  • 第二項
    • 巢狀項目
    • 另一個巢狀項目
  • 第三項

有序列表

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

引用區塊

這是一個引用區塊。你可以用它來強調文字或顯示引用。

如果在段落之間的空行上加上 >，它可以跨越多個段落。

程式碼區塊

以下是不同程式語言的程式碼範例：

JavaScript

// React 元件範例，包含一個很長的程式碼行來測試自動換行
function Counter() {
  const [count, setCount] = useState(0);
  const veryLongVariableName = "這是一個非常長的字串，用來展示程式碼區塊如何處理長行的自動換行。它應該能夠漂亮地換行，而不會產生水平捲軸。這樣的設計可以確保程式碼在各種螢幕尺寸下都能正常顯示。";
 
  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
    console.log(`目前計數：${count}。${veryLongVariableName}`);
  };
 
  return (
    <div className="counter flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
      <p className="text-lg font-semibold">目前計數：{count}</p>
      <button 
        onClick={handleClick}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-400"
      >
        增加
      </button>
    </div>
  );
}

Python

# Python 類別範例
class Person:
    def __init__(self, name: str, age: int):
        self.name = name
        self.age = age
    
    def greet(self) -> str:
        return f"你好，我是 {self.name}，今年 {self.age} 歲！"
 
# 建立新的人物
person = Person("小翔", 34)
print(person.greet())

Swift

// Swift 結構體範例
struct BlogPost {
    let title: String
    let content: String
    let publishDate: Date
    
    var preview: String {
        String(content.prefix(100)) + "..."
    }
}
 
// 使用結構體
let post = BlogPost(
    title: "我的第一篇文章",
    content: "這是我第一篇部落格文章的內容...",
    publishDate: Date()
)
print(post.preview)

提示區塊

:::note 這是一個筆記提示區塊。用於提供額外資訊。 :::

:::tip 這是一個技巧提示區塊。用於分享有用的技巧和訣竅。 :::

:::warning 這是一個警告提示區塊。用於警告使用者可能遇到的問題。 :::

:::danger 這是一個危險提示區塊。用於重要警告。 :::

表格

功能說明支援
表格以行和列組織資料✅
程式碼區塊顯示格式化的程式碼並支援語法高亮✅
提示區塊添加特殊提示區塊✅
數學公式顯示數學方程式✅

任務列表

  • 撰寫介紹
  • 添加程式碼範例
  • 包含數學公式
  • 添加更多功能
  • 校對

連結和圖片

你可以連結到其他頁面或About, Blog,顯示圖片：

範例圖片

註腳

這裡有一個帶註腳的句子1。

結論

這篇文章展示了這個部落格中可用的各種 Markdown 功能。歡迎將此文章作為寫作參考！

Footnotes

  1. 這是註腳的內容。 ↩