MDX 资源示例

这篇文章整理了可直接复制的 MDX 资源模板。 本地文件建议统一放在 public 目录下，并通过 /path/to/file 进行引用。

1) Local Image (Markdown)

2) Remote Image (Markdown)

3) Figure + Caption (JSX)

4) Clickable Image

5) Local Video (MP4/WebM)

6) Embedded Video (iframe)

7) Audio

8) Download/File Link

• Download PDF
• Download ZIP Assets

9) Code Block (TypeScript)

import { gsap } from "gsap";

const tl = gsap.timeline({ defaults: { duration: 0.45, ease: "power2.out" } });

tl.addLabel("enter")
  .from(".card-title", { y: 30, autoAlpha: 0 }, "enter")
  .from(".card-meta", { y: 20, autoAlpha: 0 }, "enter+=0.08");

10) Code Block (Bash)

npm install gsap
npm run dev -- --port 3002

11) Inline Code

Use timeline.addLabel() to keep motion sequence readable.

12) Table (remark-gfm)

Resource	Local Path Example	Remote Support
Image	/posts/img1.jpg	Yes
Video	/videos/demo.mp4	Via iframe or direct URL
Audio	/audio/demo.mp3	Direct URL
PDF	/docs/file.pdf	Yes

13) Task List (remark-gfm)

• Article metadata in frontmatter
• Code highlighting enabled
• Add real media files in /public

14) Blockquote / Callout

Keep media paths stable after publish to avoid broken embeds.

15) Details / Summary

Click to expand advanced note

A single MDX file can mix Markdown, JSX, code blocks, and rich embeds.

16) Raw HTML Block