observablehq 上使用了什么 HTML 处理？

Question

我刚刚阅读了 the changes in d6.js version 6 and stumbled across this d3.groups() example on observablehq.com。

在那里，我看到了以下代码片段，它从 Map athletesBySport:

创建了一个 HTML table

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`...`

和

sign 似乎允许执行生成内联 html.

的脚本

Answer 1

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

html`...`

部分“只是”一个 JavaScript tagged template literal，即用特定方法解析的 JavaScript 模板文字。

来自 Observable 的文档：

html`string`

Returns the HTML element represented by the specified HTML string literal. This function is intended to be used as a tagged template literal. Leading and trailing whitespace is automatically trimmed. For example, to create an H1 element whose content is “Hello, world!”: html`<h1>Hello, world!`

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

If an embedded expression is a DOM element, it is embedded in generated HTML. For example, to embed TeX within HTML:

html`I like ${tex`\KaTeX`} for math.`

If an embedded expression is an array, the elements of the array are embedded in the generated HTML.

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

observablehq 上使用了什么 HTML 处理？

What HTML processing is used on observablehq?

html

javascript

markup

d3.js

observablehq