博客内容排版指南：如何插入视频、图片、代码与更多

本博客的文章内容使用 MDX 格式编写，支持 Markdown 的全部语法，并扩展了视频嵌入、Mermaid 图表、数学公式等能力。本文将逐一演示每种内容的插入方式。

超链接

外部链接

使用标准 Markdown 语法即可插入外部链接，点击后会在新标签页中打开：

MDN Web Docs

语法：[链接文字](https://example.com)

站内链接

链接到本站其他文章时，使用相对路径，会自动启用客户端导航（无刷新跳转）：

回到首页

也可以链接到站内的其他文章：

[另一篇文章](/posts/your-post-slug)

图片

使用标准 Markdown 图片语法插入图片，所有图片会自动变为可点击放大的图片（点击后支持缩放查看）：

语法：![替代文字](图片URL)

提示： 在后台编辑器中，可以直接点击上传按钮插入图片，系统会自动处理上传并生成正确的 Markdown 语法。

视频嵌入

支持 YouTube 和 Bilibili 视频的自动嵌入。只需在单独一行粘贴视频链接，无需任何额外语法。

YouTube

在下方单独一行粘贴 YouTube 链接即可自动渲染为播放器：

支持的 YouTube 链接格式：

https://www.youtube.com/watch?v=...
https://youtu.be/...
https://www.youtube.com/embed/...
https://www.youtube.com/shorts/...

Bilibili

同样支持 Bilibili 视频，粘贴链接即可：

支持的 Bilibili 链接格式：

https://www.bilibili.com/video/BV...
https://player.bilibili.com/...
https://b23.tv/...

代码块

使用三个反引号包裹代码，并在开头指定语言名称，即可获得带语法高亮的代码块。

基本用法

typescript

function greet(name: string): string {
  return `Hello, ${name}!`;
}

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

带文件名的代码块

在语言名称后面加上 filename="文件名"，代码块顶部会显示文件名：

src/components/Button.tsxtsx

export function Button({ children }: { children: React.ReactNode }) {
  return (
    <button className="px-4 py-2 rounded bg-blue-500 text-white">
      {children}
    </button>
  );
}

Shell 命令

terminal.shbash

# 安装依赖
npm install

# 启动开发服务器
npm run dev

JSON 配置

config.jsonjson

{
  "name": "my-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  }
}

行内代码

使用单个反引号包裹行内代码：使用 npm install 安装依赖。

Mermaid 图表

使用 ```mermaid 代码块即可插入流程图、时序图、甘特图等各类图表，图表会自动适配深色/浅色主题。

流程图

时序图

数学公式

支持 LaTeX 数学公式语法，使用 KaTeX 渲染。

行内公式

质能方程 $E = mc^2$ 描述了质量与能量的关系。

欧拉公式 $e^{i\pi} + 1 = 0$ 被誉为最美的数学公式。

块级公式

二次方程的求根公式：

$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

高斯积分：

$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$

GitHub 风格提示框

支持五种样式的提示框，用于标注不同类型的信息。

NOTE

这是一个注意提示框，用于补充说明信息。

TIP

这是一个提示提示框，用于分享有用的技巧。

WARNING

这是一个警告提示框，用于提醒潜在的问题。

CAUTION

这是一个注意提示框，用于强调可能造成损害的操作。

IMPORTANT

这是一个重要提示框，用于强调关键信息。

表格

支持 GitHub 风格的表格语法：

语言	用途	难度
TypeScript	全栈开发	中等
Python	数据科学	简单
Rust	系统编程	较难
Go	后端服务	中等

任务列表

学习 Markdown 基础语法
了解 MDX 扩展功能
编写第一篇博客文章
尝试嵌入视频和图表

文字样式

粗体文本 使用双星号包裹
斜体文本 使用单星号包裹
~~删除线~~ 使用双波浪号包裹
行内代码 code 使用反引号包裹

引用

千里之行，始于足下。

—— 老子《道德经》

嵌套引用也是支持的：

外层引用

内层引用

总结

以上就是本博客支持的所有内容排版方式。简要回顾：

功能	语法
超链接	`[文字](URL)`
图片	`![alt](URL)`
视频	单独一行粘贴 YouTube / Bilibili 链接
代码块	```语言 filename="文件名"
Mermaid 图表	```mermaid
数学公式	$...$ 或 `$$...$$`
提示框	`> [!NOTE/TIP/WARNING/CAUTION/IMPORTANT]`
表格	GitHub 风格表格语法
任务列表	`- [ ]` 或 `- [x]`

如有任何问题，欢迎在评论区留言。

相关推荐

评论