Markdown 语法速查

技术笔记 #Markdown #教程 约 3 分钟 · 875 字

Markdown 语法速查

标题与强调

Markdown 支持 加粗、斜体、删除线、行内代码 以及 KBD 键盘键样式。

三级标题

四级标题

五级标题
六级标题

列表

无序列表

  • 苹果
  • 香蕉
  • 橘子

有序列表

  1. 第一步：收集
  2. 第二步：整理
  3. 第三步：输出

任务列表

引用

好看的样式可以提升写作体验。

—— Phycat 主题标语

表格

语法 作用 示例
# 标题 # 标题
** 加粗 **重要**
` 行内代码 `code`
[文本](url) 链接 [Phycat](url)

代码块

def hello(name: str) -> str:
    """问候函数"""
    greeting = f"Hello, {name}!"
    print(greeting)
    return greeting
 
if __name__ == "__main__":
    hello("Phycat")
 
// JavaScript 示例
const themes = ['forest', 'vampire', 'sakura'];
themes.forEach((t) => console.log(`theme: ${t}`));
 
npm run build      # 构建静态站点
npm run serve      # 本地预览 http://localhost:8765

提示块

支持 GitHub 风格的提示块语法 > [!NOTE]、> [!TIP]、> [!IMPORTANT]、> [!WARNING]、> [!CAUTION]，也也支持容器语法 :::note、:::tip、:::important、:::warning、:::caution。

:::note
[!TIP]
[!IMPORTANT]
[!WARNING]
[!CAUTION]
:::
 
:::note
文本
:::
 
:::tip
文本
:::
 
:::important
文本
:::
 
:::warning
文本
:::
 
:::caution
文本
:::

NOTE

[!TIP] [!IMPORTANT] [!WARNING] [!CAUTION]

NOTE

备注：这是一个备注。

TIP

提示：这是一个提示。

IMPORTANT

重要：这是一个重要提示。

WARNING

警告：这是一个警告。

CAUTION

小心：这是一个提示警告。

图片插入

本站支持两种图片插入方式：Markdown 标准语法（简单快捷）和 HTML img 标签（可精确控制大小与位置）。插入后点击图片即可打开灯箱，支持缩放、平移查看。

基本语法（Markdown 标准）

![替代文字](图片路径)
  • 图片路径：相对路径，从当前文章所在目录出发。文章图片统一放在 images/文章名/ 下，例如图片文件位于 content/posts/images/我的文章/架构图.png，则路径写作 images/我的文章/架构图.png。
  • 替代文字（alt）：图片无法加载时显示的文字，也用于无障碍阅读，建议填写图片内容简述。
  • 图片单独占一段时，本站会自动水平居中，宽度默认占满正文列宽（max-width: 100%），高度按比例自适应。
![替代文字](images/我的文章/示例图片.png)

控制宽度与居中（HTML img 标签）

需要缩放图片大小（不希望占满整行）时，改用 HTML img 标签：

<img src="图片路径" alt="替代文字" width="75%" style="display:block;margin:0 auto">

各属性含义：

属性 作用 示例
src 图片路径（与第 1 节一致） src="images/我的文章/示例图片.png"
alt 替代文字 alt="架构图"
width 显示宽度：百分比（相对正文宽度）或固定像素 width="75%"、width="480px"
style="display:block;margin:0 auto" 把图片改为块级元素并水平居中 固定写法
  • 只修改 width 即可调整大小，如 60%、80%、90%，高度会自动等比缩放。
  • 若不希望居中，去掉 style="display:block;margin:0 auto" 即可。

常见写法速查

需求 写法
默认全宽居中 ![替代文字](images/文章名/图片.png)
缩放到 75% 并居中 <img src="images/文章名/图片.png" alt="替代文字" width="75%" style="display:block;margin:0 auto">
缩放到 60% 并居中 同上，width="60%"
缩放到固定像素 <img src="..." width="480px" style="display:block;margin:0 auto">
靠左显示、不居中 <img src="..." width="60%">
用容器整体居中（可选） <div align="center"><img src="..." width="60%"></div>

注意事项

  • 支持常见图片格式：png、jpg / jpeg、gif、webp、svg 等。
  • 图片路径写错时，页面会显示替代文字（alt），可据此排查路径问题。
  • 同一篇文章的多张图片建议放在 images/文章名/ 下，便于管理。
  • 点击任意图片可打开灯箱放大，放大后支持拖动、双指捏合缩放、滚轮缩放。

脚注

脚注示例[^1]
[^1]: 脚注内容

这里是一个脚注示例[1]，点击可跳转到文末。

  1. 这是脚注内容，Typora 导出的 HTML 同样支持脚注样式。 ↩︎