A Scripter's Notes ❚
Emacs, scripting and anything text oriented.

LaTeX in HTML

[Mon Feb 12, 2018]
— Kaushal Modi
<2018-02-12>
Add the MathJax method.
Table of Contents

Ever wondered how to show LaTeX in HTML or a Hugo blog post exported from Org?

There are 2 ways to do this:

  1. Using MathJax – \(\LaTeX\).
  2. Using HTML + CSS – LaTeX.

1 Using MathJax #

If you don’t mind including the MathJax script, it’s as simple as typing $\LaTeX$ in Org, which results in \(\LaTeX\).

Similarly \(\TeX\) ($\TeX$) also works, though not $\XeTeX$.

2 Using HTML + CSS #

And here’s another way if you don’t want to include MathJax.

Define these macros in Org #

#+macro: tex @@html:<span class="tex">T<sub>e</sub>X</span>@@
#+macro: latex @@html:<span class="latex">L<sup>a</sup>T<sub>e</sub>X</span>@@
#+macro: xetex @@html:<span class="xetex">X<sub>&#398;</sub>T<sub>E</sub>X</span>@@

CSS #

Add this CSS directly in the page within a #+begin_export html / #+end_export block, or add that CSS your site’s stylesheet.

<style>
.tex, .latex, .tex sub, .latex sub, .xetex sub {
  font-size: 1em;
}

.tex sub, .latex sub, .latex sup, .xetex sub {
  text-transform: uppercase;
}

.tex sub, .latex sub, .xetex sub {
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
}

.latex sup {
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
}
</style>

Use the Org macros #

- {{{tex}}}
- {{{latex}}}
- {{{xetex}}}

Export that from Org to HTML or Hugo, and you get:

  • TeX
  • LaTeX
  • XƎTEX

References #