ConTeXt to HTML conversion for multiple math-heavy documents

Question

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.

I have a project structure set up, so I would ideally like to add something to my environment file to automate the process.
If it is relevant, I use a lot of Unicode symbols.
I would have liked to add a comment to the referenced answer, but unfortunately my reputation is too low. :(

True, I did not remember that pandoc can write but not read context. :( — Fran, May 19 '20 at 08:03

score 6 · Accepted Answer · answered May 19 '20 at 06:58

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">

    <head>

        <meta charset="utf-8"/>

        <title>test</title>

<link type="text/css" rel="stylesheet" href="styles/test-defaults.css" />
<link type="text/css" rel="stylesheet" href="styles/test-images.css" />
<link type="text/css" rel="stylesheet" href="styles/test-styles.css" />


    </head>
    <body>
        <div class="document" xmlns="http://www.pragma-ade.com/context/export">

<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:

For KaTeX, add the following lines (instead of the mathjax code)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

The output on Firefox looks as follows:

To my eyes, the mathjax output looks significantly nicer. But test around with your documents and see what you get.

That clarifies a lot.
In theory, I feel that I can write a wrapper script to run context, remove the m:s, and add the math typesetting library (MathJax/KaTeX), but all this seems too much hassle. The overall process still seems very inconvenient for a large project (the kind I have now).

In any case, thanks a lot! :) — Sudip Sinha, May 20 '20 at 22:06

ConTeXt to HTML conversion for multiple math-heavy documents

1 Answers1

Linked