observablehq 上使用了什么 HTML 处理？答案

【问题标题】：What HTML processing is used on observablehq?observablehq 上使用了什么 HTML 处理？
【发布时间】：2024-04-22 08:40:01
【问题描述】：

我刚刚阅读了the changes in d6.js version 6 并偶然发现了this d3.groups() example on observablehq.com。

在那里，我看到了以下代码 sn -p 从Map athletesBySport 创建一个 HTML 表：

html`<table>
  <thead>
    <tr><th>Sport</th><th>Athletes</th></tr>
  </thead>
  <tbody>${Array.from(athletesBySport, ([key, values]) => html`
    <tr>
      <td>${key}</td>
      <td>${values.map(d => d.name).join(", ")}</td>
    </tr>`)}</tbody>
</table>`

这是一种什么样的“标记”/HTML 处理？我可以检测到的一些特殊模式是

hmtl`...`

和

似乎允许执行生成内联 html 的脚本的标志。

【问题讨论】：

标签： javascript html d3.js markup observablehq

【解决方案1】：

这个问题的答案可以在here, in Observable's standard library找到。 This introduction 也探索标准库。

html`...`

part“只是”JavaScript tagged template literal，即用特定方法解析的 JavaScript 模板字面量。

来自 Observable 的文档：

html`字符串`

返回由指定的 HTML 字符串文字表示的 HTML 元素。此函数旨在用作标记模板文字。前导和尾随空格会自动修剪。例如，要创建一个内容为“Hello, world!”的 H1 元素： html`

你好，世界！`

文档进一步说明了如何处理嵌入 $ 的表达式：

如果嵌入的表达式是 DOM 元素，它会嵌入到生成的 HTML 中。例如，在 HTML 中嵌入 TeX：

html`我喜欢 ${tex`\KaTeX`} 用于数学。`

如果嵌入的表达式是一个数组，则该数组的元素会嵌入到生成的 HTML 中。

在 Observable 中有更多可用的标记文字，例如 svg、md 用于降价、tex 用于 LaTex 等等。

【讨论】：