如何为Markdown块引用添加元数据并渲染为带data属性的HTML？

以下是各类内容的Markdown格式规则及示例：

• 标题：使用井号（#）定义，#的数量对应标题层级（1-6个分别对应一级到六级标题）
  示例：

  # 一级标题
  ## 二级标题
  

• 列表项：以短横线（-）开头创建无序列表，支持嵌套
  示例：

  - 主列表项1
  - 主列表项2
    - 嵌套列表项
  

• 文本强调：用单星号（*）包裹实现斜体，双星号（**）包裹实现粗体
  示例：

  *这是斜体文本*
  **这是粗体文本**
  

• 代码/命令：单行代码用反引号（`）包裹，多行代码块用三个反引号（```）包裹，还可指定语言类型
  示例：

  `npm install`
  

  多行代码示例：

  function add(a, b) {
    return a + b;
  }
  

• 引用文本：使用大于号（>）标记引用，多层引用可叠加多个>
  示例：

  > 这是一段基础引用
  >> 这是嵌套的二级引用
  

• 链接：格式为 [链接显示文本](目标URL)
  示例：

  [Markdown 基础教程](https://example.com/markdown-guide)
  

• 图片：格式为 [图片替代文本](图片URL)，替代文本会在图片无法加载时显示
  示例：

  [风景图片](https://example.com/scenery.jpg)
  

内容的提问来源于stack exchange，提问作者Dennis Hackethal