使用 CSS 美化 Markdown

Markdown 提供了簡潔的語法來格式化文字，但使用 CSS 樣式可以讓你的文檔更加美觀和專業。本指南將教你如何有效地為 Markdown 內容添加樣式。

基礎樣式

內聯樣式

你可以在 Markdown 文檔中直接使用 HTML 和內聯 CSS：

markdown

# 我的文檔

<style>
.highlight {
  background-color: #fff3cd;
  padding: 10px;
  border-left: 4px solid #ffc107;
}
</style>

<div class="highlight">
這是一個高亮顯示的重要段落。
</div>

外部樣式表

引用外部 CSS 文件以獲得更好的可維護性：

markdown

<link rel="stylesheet" href="styles/markdown-custom.css">

# 我的樣式化文檔

這段內容將使用外部樣式表進行樣式化。

常見 Markdown 元素樣式

標題樣式

css

/* 所有標題的基礎樣式 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* 特定標題樣式 */
h1 {
  font-size: 2.5em;
  border-bottom: 2px solid #eaecef;
  padding-bottom: 10px;
}

h2 {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 8px;
}

h3 {
  font-size: 1.5em;
  color: #0366d6;
}

段落和文字樣式

css

/* 段落 */
p {
  line-height: 1.6;
  margin-bottom: 16px;
  color: #333;
}

/* 強調文字 */
strong {
  font-weight: 700;
  color: #000;
}

em {
  font-style: italic;
  color: #555;
}

/* 刪除線 */
del {
  text-decoration: line-through;
  color: #888;
}

連結樣式

css

/* 基礎連結 */
a {
  color: #0366d6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

a:hover {
  border-bottom: 1px solid #0366d6;
}

a:visited {
  color: #6f42c1;
}

/* 外部連結圖標 */
a[href^="http"]:after {
  content: " ↗";
  font-size: 0.8em;
  vertical-align: super;
}

代碼樣式

css

/* 行內代碼 */
code {
  background-color: #f6f8fa;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  color: #d73a49;
}

/* 代碼塊 */
pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  line-height: 1.45;
}

pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

結論

通過精心設計的 CSS，你可以將簡單的 Markdown 文檔轉變為美觀、專業的網頁內容。關鍵是保持簡潔、可讀性和響應式設計的平衡。

使用 CSS 美化 Markdown ​

基礎樣式 ​

內聯樣式 ​

外部樣式表 ​

常見 Markdown 元素樣式 ​

標題樣式 ​

段落和文字樣式 ​

連結樣式 ​

代碼樣式 ​

結論 ​

其他資源 ​