说明目录
Garden 使用说明内置组件garden html

嵌入网页片段(html)

在沙盒 iframe 中运行独立的 HTML、CSS 与 JavaScript 演示片段。

```garden html
title: 字符长度与预计阅读耗时小工具
height: 156
code: |
  <!doctype html>
  <html lang="zh-CN">
  <head><meta charset="utf-8" /></head>
  <body>
    <input id="txt" value="把文章放在自己的 Git 仓库里,推送后自动构建。" />
    <div>当前字符数:<strong id="count">23</strong> 字</div>
    <script>
      const input = document.getElementById("txt");
      const count = document.getElementById("count");
      input.addEventListener("input", () => { count.textContent = String(input.value.length); });
    </script>
  </body>
  </html>
```
  • 用:需要运行自定义 DOM 脚本、Canvas 绘图或独立 HTML 页面片段时(支持 code 内联或 src 引用文章同名目录下的 .html 文件)。
  • 别用:只需要滑杆调参数算公式时用 interactive;静态结构图用 figure。
字段必填类型说明
src与 code 二选一相对路径字符串引用与当前 Markdown 同目录(或同名子目录)下的 .html 文件
code与 src 二选一多行字符串直接内联编写的 HTML 源码(也可用别名 html)
title建议字符串卡片顶部栏标题及 iframe 的无障碍标题
height否数字初始高度(像素,默认 260;加载后也会随内容高度自动调整)
caption否字符串底部的图注说明