KhanAcademy latex markups

Question

Main question: How KhanAcademy formats latex inside HTML pages?

It means: How can I write \LaTex like code (per example inside the HTML annotation tag below) inside regular HTML pages and it be correctly displayed by browsers. Also how can I extend the latex macros as made below using the \blueE and \redE macros inside the tex-html environment.

Checking the HTML source code from Khan's Academy: Curl in 2 dimensions I came to notice it uses a syntax like:

<math>
<semantics>
<annotation encoding="application/x-tex">
\begin{aligned}
  \text{div}\, \blueE{\textbf{F}}\goldE{(x, y)} = 
  \lim_{\left|\redE{A}_{\goldE{(x, y)}}\right| \to 0}
  \underbrace{
      \dfrac{1}{\left|\redE{A}_{\goldE{(x, y)}}\right|}
      \overbrace{
          \oint_{\redE{C}} \blueE{\textbf{F}} \cdot \greenE{\hat{\textbf{n}}}\;\redE{ds}
      }^{\text{2d-flux through $\redE{C}$}}
  }_{\text{Flux per unit area}}
\end{aligned}
</annotation>
</semantics>
</math>

I know this isn't a pure \LaTeX question, but also isn't a pure HTML5 or CSS3 question, we are here in the grey areas of multi-disciplinarity and I have really high hopes about the higher level of knowledge of \LaTeX community.

Extra question: Where is that \redE came from? I would love to colorize my math in educational papers.