我的歌单

MDX Components Showcase

发表于
更新于
字数: 1.1k
时长: 5m
阅读: -
玉门

MDX 组件展示

本页面展示了博客系统中所有可用的自定义 MDX 组件。

1. 提示框 (Callout)

ℹ️ 信息提示

这是一条普通的信息提示。

⚠️ 注意

请注意,这是一条警告信息。

🚫 错误

操作失败,请检查配置。

💡 技巧

这是一个有用的小技巧。

2. 选项卡 (Tabs)

使用 :::tabs 创建切换面板。

React 是一个用于构建用户界面的 JavaScript 库。

Vue 是一款用于构建用户界面的渐进式框架。

Svelte 是一种构建用户界面的全新方法。

3. 按钮系统 (Buttons)

独立按钮

GitHub 文档

按钮组 (Grid)

4. 折叠框 (Folding)

点击查看详细代码
console.log("Hello World");
默认展开的折叠框

这个折叠框默认是展开状态。

5. 隐藏内容 (Hidden)

行内隐藏

这段文字包含 ,请谨慎点击。

块级隐藏

6. 时间轴 (Timeline)

2025-01-01 项目启动

项目正式立项,确定技术栈为 Astro + React。

2025-02-15 发布Beta版

完成了核心功能开发,上线测试。

2025-03-01 正式发布

修复了所有已知 Bug,向公众开放。

8. 数学公式 (Math)

行内公式:E=mc2E = mc^2

块级公式:

i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

9. 终极嵌套测试 (Deep Nesting)

这里展示组件之间的相互嵌套能力。

Step 1 基础

学习 HTML, CSS, JavaScript。

Step 2 框架

学习 React 或 Vue。

打开百宝箱

这里有一些

⚠️ Warning

请勿外传!

评论

0
QQ

加载评论中...