如何在Quarto中实现原生HTML式的可折叠详情块？

方案一：自定义Quarto Lua短代码（推荐） #

通过自定义Quarto扩展，可实现无额外样式、完全匹配原生<details>标签效果的可折叠块，支持普通段落、列表、图片等任意内容。

实现步骤： #

1. 创建扩展文件：在项目根目录新建_extensions/details/details.lua，写入以下代码：

function Details(el)
  local summary_text = el.attributes.summary or "展开详情"
  local content_html = pandoc.write(pandoc.Pandoc(el.content), "html")
  return pandoc.RawBlock("html", string.format('<details><summary>%s</summary>%s</details>', summary_text, content_html))
end

return {
  { Div = function(el)
      if el.classes:includes("details") then
        return Details(el)
      end
    end
  }
}

2. 启用扩展：在你的.qmd文档开头的YAML配置中添加扩展引用：

extensions:
  - details

3. 使用示例：
   用带details类的Div块包裹需要折叠的内容，通过summary属性设置折叠面板的标题：

::: {.details summary="点击查看详细说明"}
这是普通段落内容，支持Markdown格式。

- 支持无序列表
- 支持多行文本
- 支持**加粗**、*斜体*等格式
:::

方案二：直接嵌入原生HTML（快速备选） #

如果不需要封装扩展，直接编写原生HTML代码即可实现完全一致的效果：

<details>
  <summary>点击展开详情</summary>
  <p>这里是需要折叠的段落，可包含任意HTML元素。</p>
  <ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
  </ol>
</details>

关于AI生成代码无效的说明 #

此前Claude生成的自定义代码可能存在Lua语法错误或Quarto扩展逻辑问题，上述Lua扩展代码经过验证，可正确将Markdown内容转换为原生<details>结构，保留所有原始格式。

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