HTML inside LaTeX formulas

[Giuseppe499]

Is your feature request related to a problem? Please describe. I would like to use the amazing rough marker feature inside latex formulas. Currently, HTML inside LaTeX is rendered as math by KaTex. For example this

$$
a + b = <span v-mark.red.circle> c </span>
$$

is rendered as

Describe the solution you'd like I would like a way to add styling to HTML elements generated by KaTeX or some sort of workaround to achieve the same effect (maybe a way to escape KaTeX renderer?).

Describe alternatives you've considered I have used the line highlighting feature, but it is not as precise and visually appealing as the rough markers.

[cben]

The KaTeX \html* syntaxes https://katex.org/docs/supported.html#html can be enabled via config:

  return {
    trust: true,
    /* ... */
  }

but they don't seem enough. E.g. I tried:

<span v-mark.green.circle> c </span>

$$
a + b = \htmlData{v-mark=v-mark}{\htmlClass{rough-annotation text-red}{c}}
$$

So the relevant part of formula does get wrapped in <span class="enclosing rough-annotation text-red"> and it did happen make it red (though using \htmlStyle{color: red;} would be more robust). But setting classes is not enough; even if I could make KaTeX assign a v-mark DOM attribute (closest I got is data-v-mark="v-mark"), I don't suppose it would work after KaTeX renders, I think it needs to exist at earlier stage where Vue recognizes v-* directives?

---

Workarounds: Arrow component takes coordinates (need tuning for your slide) and can be triggered on click.

$$
a + b = c
$$

<v-click>
  <Arrow x1="530" y1="120" x2="530" y2="80" color=red width=2 /> 
</v-click>

Consider also VSwitch using KaTeX to highlight some part of the equation...