如何在 Markdown 中使用 CSS？

在 Markdown 中使用 CSS 的方法

Markdown 本身不支持直接编写 CSS，但你可以通过 嵌入 HTML 的方式实现样式控制。具体方法取决于你的使用场景。

方法一：内联 HTML 样式（通用）

大多数 Markdown 解析器支持直接插入 HTML 标签，包括 <style> 和带 style 属性的标签。

1. 内联样式

直接在 HTML 标签中使用 style 属性：

# 普通标题

<p style="color: #e74c3c; font-size: 1.2em; font-weight: bold;">
  这是一段红色、加粗的文本
</p>

2. 嵌入 `<style>` 块

在文档顶部或任何位置插入 CSS 代码块：

<style>
  .highlight {
    background-color: #f1c40f;
    padding: 5px 10px;
    border-radius: 3px;
  }
  #custom-title {
    color: #3498db;
    border-bottom: 3px solid #2c3e50;
  }
</style>

# 普通标题

<h1 id="custom-title">这是一个自定义样式的标题</h1>

<p class="highlight">这段文本会被高亮显示</p>

方法二：完整 HTML 文档（独立文件）

如果你的 Markdown 文件会被转换为完整 HTML 页面，可以包含完整的 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的文档</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    body { font-family: 'Segoe UI', sans-serif; }
    h1 { color: #2c3e50; }
  </style>
</head>
<body>

# 这里是 Markdown 内容

- 列表项 1
- 列表项 2

<p class="custom-class">自定义段落</p>

</body>
</html>

方法三：使用平台特定功能

GitHub/GitLab

不支持自定义 CSS（安全原因）。你只能使用：

基础的 HTML 标签
内联 style 属性（部分支持）
GitHub 支持的自定义容器（如警告框）

> [!NOTE]
> 这是一个 GitHub 风格的提示框

VS Code / Typora 等编辑器

完全支持 HTML 和 CSS。可以在设置中添加自定义 CSS：

VS Code: 修改 markdown.styles 设置
```
"markdown.styles": ["style.css"]
```

Jekyll / Hugo 等静态网站生成器

在模板文件中添加 CSS 链接：

---
title: 我的文章
custom_css: /assets/css/post.css
---

# 文章内容

方法四：Markdown 扩展语法

某些解析器支持通过扩展添加类名：

Python-Markdown

# 我的标题 { #id .class }

Pandoc

pandoc input.md -o output.html --css=style.css

MDX（React 环境）

import styles from './styles.module.css'

# 标题

<div className={styles.custom}>
  自定义样式的 div
</div>

兼容性说明

场景	`<style>` 标签	内联 `style`	外部 CSS	备注
GitHub/GitLab	❌ 被过滤	⚠️ 部分支持	❌	安全限制
VS Code 预览	✅	✅	✅	需配置
Typora	✅	✅	✅	支持完整
Hugo/Jekyll	✅	✅	✅	模板控制
自定义解析	✅	✅	✅	取决于配置

最佳实践建议

优先使用内联样式：如果需要在多个平台使用
保持简单：避免过度设计，Markdown 的优势是简洁
测试兼容性：在不同平台预览效果
考虑替代方案：对于复杂排版，直接用 HTML 或专业工具

对于特定平台需求，建议查看其官方文档确认 CSS 支持情况。