在observablehq上使用了什么HTML处理?

Question

我刚刚阅读了d6.js版本6的变化，并在observablehq.com上偶然发现了这个d3.groups()示例。

在这里，我看到了以下代码片段，用于从MapathletesBySport创建一个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的脚本。

Answer 1

这个问题的答案可以在Observable的标准库中找到。本介绍还探讨了标准库。

---

html`...`

part is "just"一个JavaScript标记的模板文字，也就是说，一个JavaScript模板文字被一个特定的方法解析。

来自Observable的文档:

html 'string '

返回由指定的HTML字符串字面值表示的HTML元素。这个函数被用作带标签的模板文字。自动修剪前导和尾随的空白。例如，要创建内容为"Hello, world!"：html的& lt; h1>你好,世界!'

---

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

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

html ' i like ${tex ' KaTeX '} for math. '

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

---

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