What HTML processing is used on observablehq?

user_2938364 0
Viewed 147

I just read up on the changes in d6.js version 6 and stumbled across this d3.groups() example on observablehq.com.

There, I saw the following code snippet to create an HTML table from the Map athletesBySport:

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

What kind of "markup" / HTML processing is this? Some special patterns that I can detect are

hmtl`...`

and the

$

sign which seems to allow to execute a script that generates inline html.

observablehq d3.js markup html javascript
1 Answers

The answer to this question can be found here, in Observable's standard library. This introduction also explores the standard library.

The

html`...`

part is "just" a JavaScript tagged template literal, i.e., a JavaScript template literal that is parsed with a specific method.

From Observable's documentation:

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

The documentation further states how expressions embedded with $ are handled:

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.

There are more tagged literals availabe in Observable, such as svg, md for markdown, tex for LaTex, and more.

user_29383640
Related