使用 CSS 美化 Markdown

Markdown 提供了简洁的语法来格式化文本，但使用 CSS 样式可以让你的文档更加美观和专业。本指南将教你如何有效地为 Markdown 内容添加样式。

基础样式

内联样式

你可以在 Markdown 文档中直接使用 HTML 和内联 CSS：

# 我的文档

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

<div class="highlight">
这是一个高亮显示的重要段落。
</div>

外部样式表

引用外部 CSS 文件以获得更好的可维护性：

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

# 我的样式化文档

这段内容将使用外部样式表进行样式化。

常见 Markdown 元素样式

标题样式

/* 所有标题的基础样式 */
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;
}

段落和文本样式

/* 段落 */
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;
}

链接样式

/* 基础链接 */
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;
}

代码样式

/* 行内代码 */
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;
}

列表样式

/* 无序列表 */
ul {
  list-style-type: disc;
  padding-left: 2em;
  margin-bottom: 16px;
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

/* 有序列表 */
ol {
  list-style-type: decimal;
  padding-left: 2em;
  margin-bottom: 16px;
}

/* 列表项 */
li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 任务列表 */
input[type="checkbox"] {
  margin-right: 8px;
}

引用样式

blockquote {
  margin: 20px 0;
  padding: 10px 20px;
  border-left: 4px solid #dfe2e5;
  background-color: #f6f8fa;
  color: #6a737d;
}

blockquote p {
  margin: 0;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* 嵌套引用 */
blockquote blockquote {
  margin: 10px 0;
  border-left-color: #c8ccd0;
}

表格样式

/* 表格 */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  overflow-x: auto;
  display: block;
}

thead {
  background-color: #f6f8fa;
}

th, td {
  border: 1px solid #dfe2e5;
  padding: 12px 16px;
  text-align: left;
}

th {
  font-weight: 600;
  color: #24292e;
}

tbody tr:nth-child(even) {
  background-color: #f6f8fa;
}

tbody tr:hover {
  background-color: #e1e4e8;
  transition: background-color 0.2s ease;
}

图片样式

/* 基础图片 */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 响应式图片 */
@media (max-width: 768px) {
  img {
    width: 100%;
  }
}

/* 图片标题 */
img + em {
  display: block;
  text-align: center;
  font-size: 0.9em;
  color: #6a737d;
  margin-top: -15px;
  margin-bottom: 20px;
}

水平分割线

hr {
  border: none;
  border-top: 2px solid #eaecef;
  margin: 40px 0;
}

/* 装饰性分割线 */
hr.fancy {
  border-top: 3px double #dfe2e5;
  text-align: center;
  overflow: visible;
}

hr.fancy:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -15px;
  padding: 0 10px;
  background: white;
  color: #dfe2e5;
  font-size: 18px;
}

高级样式技术

暗黑模式

/* 暗黑模式变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #24292e;
  --code-bg: #f6f8fa;
  --border-color: #dfe2e5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #e1e4e8;
    --code-bg: #2d2d2d;
    --border-color: #444d56;
  }
}

/* 应用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

code {
  background-color: var(--code-bg);
}

table, th, td {
  border-color: var(--border-color);
}

打印样式

@media print {
  /* 移除背景色 */
  * {
    background-color: white !important;
    color: black !important;
  }
  
  /* 优化页面断行 */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  pre, blockquote, img {
    page-break-inside: avoid;
  }
  
  /* 显示链接 URL */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  /* 隐藏不必要的元素 */
  nav, aside, .no-print {
    display: none;
  }
}

响应式设计

/* 容器 */
.markdown-body {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px;
}

/* 平板 */
@media (max-width: 768px) {
  .markdown-body {
    padding: 15px;
  }
  
  h1 {
    font-size: 2em;
  }
  
  h2 {
    font-size: 1.5em;
  }
  
  table {
    font-size: 0.9em;
  }
}

/* 手机 */
@media (max-width: 480px) {
  .markdown-body {
    padding: 10px;
  }
  
  pre {
    padding: 10px;
    font-size: 0.85em;
  }
  
  table {
    font-size: 0.8em;
  }
  
  th, td {
    padding: 8px;
  }
}

代码语法高亮

/* 使用 Prism.js 配色方案 */
.token.comment {
  color: #6a737d;
  font-style: italic;
}

.token.keyword {
  color: #d73a49;
  font-weight: bold;
}

.token.string {
  color: #032f62;
}

.token.function {
  color: #6f42c1;
}

.token.number {
  color: #005cc5;
}

.token.operator {
  color: #d73a49;
}

/* 行号 */
.line-numbers {
  position: relative;
  padding-left: 3.8em;
}

.line-numbers-rows {
  position: absolute;
  left: 0;
  width: 3em;
  user-select: none;
  counter-reset: linenumber;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  text-align: right;
  padding-right: 0.8em;
}

CSS 框架集成

GitHub Markdown CSS

使用 GitHub 的官方 Markdown 样式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css">

<div class="markdown-body">
  <!-- 你的 Markdown 内容转换的 HTML -->
</div>

Tailwind CSS

使用 Tailwind 的排版插件：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2/dist/tailwind.min.css" rel="stylesheet">

<article class="prose lg:prose-xl">
  <!-- 你的 Markdown 内容 -->
</article>

Bootstrap

Bootstrap 也可以很好地美化 Markdown：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <!-- 你的 Markdown 内容 -->
    </div>
  </div>
</div>

最佳实践

1. 使用变量：定义 CSS 变量以便于主题化
2. 移动优先：从移动样式开始，逐步增强
3. 可访问性：确保足够的对比度和可读性
4. 性能：最小化 CSS，使用 CDN
5. 一致性：保持整个文档的样式一致
6. 命名空间：使用类名避免样式冲突

完整示例

/* 完整的 Markdown 样式表 */
:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --monospace-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --primary-color: #0366d6;
  --bg-color: #ffffff;
  --text-color: #24292e;
  --border-color: #e1e4e8;
  --code-bg: #f6f8fa;
}

.markdown-body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--bg-color);
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}

/* 这里添加上面所有的样式规则... */

工具推荐

样式生成器

• GitHub Markdown CSS：https://github.com/sindresorhus/github-markdown-css
• Markdown CSS：https://markdowncss.github.io/
• Splendid：https://splendid.markdown.style/

语法高亮

• Prism.js：https://prismjs.com/
• Highlight.js：https://highlightjs.org/
• Shiki：https://github.com/shikijs/shiki

开发工具

• Stylelint：CSS 代码检查工具
• PostCSS：CSS 转换工具
• PurgeCSS：移除未使用的 CSS

结论

通过精心设计的 CSS，你可以将简单的 Markdown 文档转变为美观、专业的网页内容。关键是保持简洁、可读性和响应式设计的平衡。

其他资源

• MDN CSS 文档
• CSS Tricks
• Can I Use - CSS 兼容性查询
• GitHub Markdown 指南