🌐ENZHZH-TWFRDENLBG

MDX 功能展示

展示 MDX 的各種功能，包括程式碼醒目標示、元件使用等

技術團隊

這篇文章將展示 MDX 的各種強大功能，讓你了解如何在部落格文章中使用 React 元件和進階 Markdown 語法。

程式碼醒目標示

JavaScript 程式碼

// 這是一個 JavaScript 程式碼範例
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

TypeScript 程式碼

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: '[email protected]'
};

CSS 程式碼

.blog-post {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.6;
}

.blog-post h1 {
  color: #333;
  border-bottom: 2px solid #007acc;
}

表格範例

下面展示了一個功能對比表格：

功能支援說明優先級
Markdown✅完整的 Markdown 語法支援高
React 元件✅可以在文章中使用 React 元件高
程式碼醒目標示✅支援多種程式語言的語法醒目標示中
數學公式✅支援 LaTeX 數學公式低
互動元件✅支援互動式元件高

清單範例

無序清單

  • 第一項
  • 第二項
    • 巢狀項 1
    • 巢狀項 2
  • 第三項

有序清單

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

任務清單

MDX 支援 GitHub 風格的任務清單：

  • [x] 完成基礎功能
  • [x] 新增樣式支援
  • [x] 實現響應式設計
  • [x] 修正表格支援
  • [x] 最佳化程式碼區塊主題
  • [ ] 新增數學公式支援
  • [ ] 新增留言系統
  • [ ] 新增搜尋功能

引用和強調

這是一個引用範例。你可以在這裡寫一些重要的資訊或者引用他人的話。

粗體文字 和 斜體文字 以及 粗斜體文字。

連結和圖片

這是一個 連結範例。

範例圖片

數學公式

行內公式：E = mc²

∫ e^(-x²) dx = √π

區塊級公式範例：

∫ e^(-x²) dx = √π

f(x) = Σ f⁽ⁿ⁾(a)/n! (x-a)ⁿ

註：數學公式渲染功能正在設定中。

總結

MDX 為我們提供了強大的功能，讓我們可以：

  1. 使用標準 Markdown 語法 - 簡單易學
  2. 整合 React 元件 - 功能強大
  3. 支援程式碼醒目標示 - 提升閱讀體驗
  4. 響應式設計 - 適配各種裝置

希望這個展示能幫助你更好地理解 MDX 的強大功能！

最後更新時間: 2024-01-25

← Back to Blog