# ConTeXt to HTML conversion for multiple math-heavy documents

My primary goal is to convert my extremely math-heavy writings in ConTeXt to HTML so that I can put them up on the internet. I followed this answer by @Marco, but all my mathematics comes up as plain text, rendering them unreadable.

@Aditya commented below the answer to include the MathJax JS library. Can someone explain how to do it?

From what I understood, I have to include a link to the JS library in each header file. Is there an automated way to do it? I have a lot of files, so adding a header in each file, especially after each update of the file, seems infeasible.

Also, can I use KaTeX instead of MathJax? If so, how?

P.S.

1. I have a project structure set up, so I would ideally like to add something to my environment file to automate the process.

2. If it is relevant, I use a lot of Unicode symbols.

3. I would have liked to add a comment to the referenced answer, but unfortunately my reputation is too low. :(

• @Fran: Pandoc does not have a context reader. – Aditya May 19 at 6:58
• True, I did not remember that pandoc can write but not read context. :( – Fran May 19 at 8:03

Here is a minimal example:

\setupbackend[export=yes]

\starttext

Here is a sample of a math document which has some random $x = a + \sqrt{\frac{1}{2}}$ inline math and some random display math
\startformula
A = B + C + \frac{A}{B} + \binom{C}{D}
\stopformula

\stoptext

Let's say this is called test.tex. When you run context test.tex, you will get a directory test-export with the following content:

test-export
├── images
├── styles
│   ├── test-defaults.css
│   ├── test-images.css
│   ├── test-styles.css
│   └── test-templates.css
├── test-div.html
├── test-pub.lua
├── test-raw.xml
└── test-tag.xhtml

2 directories, 8 files

The file test-div.html looks as follows:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<!--

input filename   : test
processing date  : 2020-05-19T02:34:41-04:00
context version  : 2020.05.09 15:37
exporter version : 0.35

-->

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:math="http://www.w3.org/1998/Math/MathML">

<meta charset="utf-8"/>

<title>test</title>

<body>

<div class="warning">Rendering can be suboptimal because there is no default/fallback css loaded.</div>

<div>

Here is a sample of a math document which has some random <m:math display="inline" xmlns:m="http://www.w3.org/1998/Math/MathML"><m:mrow><m:mi>𝑥</m:mi><m:mo>=</m:mo><m:mi>𝑎</m:mi><m:mo>+</m:mo><m:msqrt><m:mfrac><m:mn>1</m:mn><m:mn>2</m:mn></m:mfrac></m:msqrt></m:mrow></m:math> inline math and some random display math
<div class="formula">
<div class="formulacontent n-1">
<m:math display="block" xmlns:m="http://www.w3.org/1998/Math/MathML">
<m:mrow>
<m:mi>𝐴</m:mi>
<m:mo>=</m:mo>
<m:mi>𝐵</m:mi>
<m:mo>+</m:mo>
<m:mi>𝐶</m:mi>
<m:mo>+</m:mo>
<m:mfrac>
<m:mi>𝐴</m:mi>
<m:mi>𝐵</m:mi>
</m:mfrac>
<m:mo>+</m:mo>
<m:mrow>
<m:mo>(</m:mo>
<m:mfrac>
<m:mi>𝐶</m:mi>
<m:mi>𝐷</m:mi>
</m:mfrac>
<m:mo>)</m:mo>
</m:mrow>
</m:mrow>
</m:math>
</div>
</div>
</div>

</div>
</body>
</html>

A couple of things to note:

• The math content is tagged using m:math, m:mi, etc. This m prefix is hard-coded into the exporter and there is no way to avoid it. In principle, it should be possible to configure mathjax or katex to parse the elements inside m:math as math, but I don't know them well enough to know how to do that. So, for the time being, I am removing all the m: prefixes using sed:

sed --in-place --expression='s/<m:/</g;s/<\/m:/<\//g' test-export/test-div.html

• The MathML export uses unicode math symbols.

• There are some bugs in the export. For example, the export of \binom should use <mfrac linethickness="0"> rather than <mfrac>. These are relatively easy to fix but it also shows that mathml export is not used commonly enough for all these minor bugs to have been caught so far.

Currently, there is no interface for adding js files to the export. So, you either have to add that manually, or via a command line script. For mathjax, I added

<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

between the <head> ... </head> tags. The output on Firefox (on Linux) looks as follows: