Update 07/2020:
The code bellow is not needed anymore. TeX4ht has now full support for the MathJax output. The equivalent of the code bellow is this:
make4ht filename.tex "mathml,mathjax"
If you want to keep your LaTeX math as plain text, use just:
make4ht filename.tex "mathjax"
make4ht
is replacement for htlatex
that converts to HTML5 and UTF-8 by default, so no special configurations as in the old answer are necessary.
Original answer:
You can use TeX4ht
. It can output math as mathml
which can be then displayed with mathjax
. You can also configure html
header to load mathjax
script from mathjax's cdn
:
\Preamble{xhtml,mathml}
\Configure{VERSION}{}
\Configure{DOCTYPE}{\HCode{<!DOCTYPE html>\Hnewline}}
\Configure{HTML}{\HCode{<html>\Hnewline}}{\HCode{\Hnewline</html>}}
\Configure{@HEAD}{}
\Configure{@HEAD}{\HCode{<meta charset="UTF-8" />\Hnewline}}
\Configure{@HEAD}{\HCode{<meta name="generator" content="TeX4ht
(http://www.cse.ohio-state.edu/\string~gurari/TeX4ht/)" />\Hnewline}}
\Configure{@HEAD}{\HCode{<link
rel="stylesheet" type="text/css"
href="\expandafter\csname aa:CssFile\endcsname" />\Hnewline}}
\Configure{@HEAD}{\HCode{<script type="text/javascript"\Hnewline
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"\Hnewline
></script>\Hnewline}}
\Configure{@HEAD}{\HCode{<style type="text/css">\Hnewline
.MathJax_MathML {text-indent: 0;}\Hnewline
</style>\Hnewline}}
\begin{document}
\EndPreamble
With this config file, we request to output math as mathml
, then configure html
header so resulting file is html5
. Save it as for example ht5mjlatex.cfg
and then call from command line:
htlatex filename.tex "ht5mjlatex.cfg, charset=utf-8" " -cunihtf -utf8"
or you can use William F. Hammond's script (at bottom of the page)
The main problem is that tex4ht has been configured to use a precomposed accented x for \dot{x}
which is the wrong translation, and produces incorrect output as you show. The generated MathML should use the <mover>
form as for the dotted x.
(1) is your original
<!DOCTYPE html>
<html>
<head> <title></title>
<meta charset="UTF-8" />
<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" />
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>
<style type="text/css">
.MathJax_MathML {text-indent: 0;}
</style>
</head><body
>
<!--l. 4--><p class="noindent" ><!--l. 4--><math
xmlns="http://www.w3.org/1998/Math/MathML"
display="inline" ><mover
accent="true"><mrow
><mi
>α</mi></mrow><mo
class="MathClass-op">̇</mo></mover></math>
<!--l. 5--><math
xmlns="http://www.w3.org/1998/Math/MathML"
display="inline" ><mi
>x</mi><mi
>ẋ</mi></math>
</p>
</body>
</html>
(2) is this fixed to use a real x, note you then get math italic x as intended.
<!DOCTYPE html>
<html>
<head> <title></title>
<meta charset="UTF-8" />
<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" />
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>
<style type="text/css">
.MathJax_MathML {text-indent: 0;}
</style>
</head><body
>
<!--l. 4--><p class="noindent" ><!--l. 4--><math
xmlns="http://www.w3.org/1998/Math/MathML"
display="inline" ><mover
accent="true"><mrow
><mi
>α</mi></mrow><mo
class="MathClass-op">̇</mo></mover></math>
<!--l. 5--><math
xmlns="http://www.w3.org/1998/Math/MathML"
display="inline" ><mi
>x</mi><mover
accent="true"><mrow
><mi
>x</mi></mrow><mo
class="MathClass-op">̇</mo></mover></math>
</p>
</body>
</html>
However since you are using MathJax anyway, you could just give it the TeX fragments and let it translate them (3)
<!DOCTYPE html>
<html>
<head> <title></title>
<meta charset="UTF-8" />
<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" />
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>
<style type="text/css">
.MathJax_MathML {text-indent: 0;}
</style>
</head><body
>
<!--l. 4--><p class="noindent" >
$\dot{\alpha}$
$x \dot{x}$
</p>
</body>
</html>
Best Answer
I'm trying to answer it in a simple way utilizing Wikipedia:
That means that MathJax is a software that works in your browser on some text which is marked up using different techniques. One of them is a LaTeX-like notation. In general it is independent of usual LaTeX binaries and the most part of the markup LaTeX provides.
LaTeX on the other hand is referred to as document preparation system. It is also used as term for the markup language that's used to write the document. In general LaTeX is a) a TeX format (so the markup language) and b) an executable that processes documents in (a) into the DVI format.