using mhchem with Framework

Community Help
1

First of all, thank you for all the brilliant work your team is doing. I have been a fan (and user) since d3 and then the start of Observable. Framework is again amazing work, and I am enjoying using it.

For my question, I am creating biomedical educational material that involves some chemistry equations. When using Observable, following Mike’s mhchem example, the following worked perfectly:

tex = {
  const [katex, style] = await Promise.all([
    require("katex@0.12.0/dist/katex.min.js"),
    require.resolve("katex@0.12.0/dist/katex.min.css")
  ]);
  document.head.append(html`<link rel="stylesheet" href="${style}">`);
  await require.alias({katex})("katex@0.12.0/dist/contrib/mhchem.min.js");
  return function tex() {
    var root = document.createElement("div");
    katex.render(String.raw.apply(String, arguments), root, {trust: true});
    return root.removeChild(root.firstChild);
  };
}

How would I get this working in Framework, so I could do something like:

${tex`\ce{CO2 + H2O <-> H2CO3 <-> HCO3- + H+}`}

for example.

Thanks for any help on this.
Michael

2

This appears to work:

```js
import tex from "npm:@observablehq/tex";
import "npm:katex/contrib/mhchem/mhchem.js/+esm";
```

(You want to import tex explicitly in this case to ensure that mhchem is loaded and registered before tex expressions are evaluated.)

3

Excellent - that works. Thank you!