我的博客

Markdown 引用渲染测试

这个页面用于测试 Markdown 引用（blockquote）的 CallOut 风格渲染效果。

基本引用

这是一个基本的引用块，现在具有 CallOut 风格的视觉效果。

多行引用

这是一个多行引用块。 可以包含多行内容。 每一行都以 > 开头。

嵌套引用

这是第一层引用

这是第二层引用

这是第三层引用

引用中包含其他元素

这是一个包含其他 Markdown 元素的引用：

引用中的代码块

引用中也可以包含代码块：

function hello() {
  console.log("Hello from blockquote!");
}

引用中的列表

引用中的列表：

  1. 第一项
  2. 第二项
    • 嵌套项
    • 另一个嵌套项
  3. 第三项

长引用示例

这是一个很长的引用，用来测试长文本在引用块中的显示效果。现在引用块具有 CallOut 风格的样式，包括背景色、边框、圆角和阴影效果，看起来更加现代化和突出。

引用通常用于：

  • 引用他人的话
  • 突出重要信息
  • 添加注释或说明
  • 强调关键概念

不同类型的引用

信息提示

💡 提示: 这是一个信息提示类型的引用，用于提供有用的信息和建议。

警告信息

⚠️ 警告: 这是一个警告类型的引用，用于提醒用户注意某些重要事项。

成功信息

✅ 成功: 这是一个成功类型的引用，用于展示操作成功或完成的信息。

错误信息

❌ 错误: 这是一个错误类型的引用，用于展示错误信息或问题。

引用样式分析

根据更新后的 mdx-components.tsx 中的配置，引用块现在使用以下样式：

blockquote: ({ className, ...props }: React.ComponentProps<"blockquote">) => (
  <blockquote
    className={cn(
      "bg-surface text-surface-foreground mt-6 w-auto border-none md:-mx-4 rounded-lg border p-4 shadow-sm",
      className
    )}
    {...props}
  />
),

这意味着引用块现在具有：

  • bg-surface: 表面背景色
  • text-surface-foreground: 表面前景色（文字颜色）
  • mt-6: 上边距 1.5rem
  • w-auto: 自动宽度
  • border-none: 无边框
  • md:-mx-4: 中等屏幕以上时左右负边距
  • rounded-lg: 大圆角
  • border: 边框
  • p-4: 内边距 1rem
  • shadow-sm: 小阴影

与之前样式的对比

之前的样式

  • 左边框 + 左内边距
  • 斜体文字
  • 简单的线条样式

现在的样式

  • 完整的卡片式设计
  • 背景色和阴影
  • 圆角边框
  • 更现代的视觉效果

自定义样式测试

如果您想进一步自定义引用样式，可以修改 mdx-components.tsx 中的 blockquote 组件配置，例如添加不同的颜色主题或图标。