OB
Back to Blog

增强型 MDX 组件展示

本文展示了在 MDX 中使用的各种增强型组件的效果。

1 min read教程
增强型 MDX 组件展示

增强型 MDX 组件展示

在这篇博客文章中，我将展示如何在 MDX 内容中使用我们新添加的各种增强型组件，包括图片、视频、音频、代码块和提示框。

图片组件

增强型图片组件支持点击放大、懒加载和自定义样式，让你的内容更加生动。

示例图片

视频组件

视频组件支持多种视频来源，包括本地视频、YouTube、Bilibili 和 Vimeo。

YouTube 视频示例

Bilibili 视频示例

音频组件

音频组件支持本地音频文件和 Spotify 嵌入播放。

Spotify 嵌入示例

代码块组件

代码块组件支持语法高亮、行号、特定行高亮和文件名显示。

基本代码高亮

// 这是一段 JavaScript 代码
function greeting() {
  console.log("Hello, world!");
  return "你好，世界！";
}
 
// 调用函数
greeting();

特定行高亮

example.js
javascript
1
2
3
4
5
6
7
8
// 这是一段 JavaScript 代码
function highlightDemo() {
  // 普通行
  console.log("这行会被高亮显示");
  return "这行也会被高亮";
  // 普通行
}

提示框组件

提示框组件可以用来突出显示重要信息，支持多种类型。

信息提示框

信息

这是一个信息提示框，用于显示一般的提示和说明。

警告提示框

警告

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

错误提示框

错误

这是一个错误提示框，显示重要的错误信息或提醒用户避免某些操作。

成功提示框

成功

这是一个成功提示框，表示操作已经成功完成。

小技巧提示框

小技巧

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

自定义 Emoji 提示框

🚀快速入门

你可以使用自定义 emoji 来替代默认图标，使提示框更加个性化。

组合使用

这些组件可以灵活组合使用，例如在提示框中嵌入代码块：

代码示例

下面是一个在提示框中嵌入代码块的例子：

css
1
2
3
4
5
6
7
8
9
.advanced-component {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: var(--bg-color);
}

这种组合方式可以让你的内容更加丰富多样。

结论

通过使用这些增强型 MDX 组件，你可以创建更加丰富、交互性更强的内容，提升读者的阅读体验。这些组件都是经过精心设计的，既美观又实用，适合各种内容场景。

希望这篇文章对你了解如何使用这些组件有所帮助！如果你有任何问题或建议，欢迎在评论区留言。

Tags

MDX组件教程

Share