observablehq 上使用了哪些 HTML 处理？

如何解决observablehq 上使用了哪些 HTML 处理？

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

在那里，我看到了以下代码片段，用于从 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 的脚本的标志。

解决方法

可以在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 等。