Trouble generating chtml output using "markdown-it-mathjax3": "4.3.2",

[oakisneat]

Here is the code:

import MarkdownIt from 'markdown-it';
import mdMathjax from 'markdown-it-mathjax3';
import mdKbd from 'markdown-it-kbd';
import mdAttrs from 'markdown-it-attrs';
import mdSup from 'markdown-it-sup';
import mdSub from 'markdown-it-sub';

const md = new MarkdownIt({
    html: true,
    linkify: true,
    breaks: true,
});

const options = {
    startup: {
        output: 'output/chtml',
    },
};
md.use(mdMathjax, options);
const md1 = `
# formula
$x$
# formula end
`;
console.log(md.render(md1));

Here is the output, which is still SVG.

<h1>formula</h1>
<p><mjx-container class="MathJax" jax="SVG" style="direction: ltr; position: relative;"><svg style="overflow: visible; min-height: 1px; min-width: 1px; vertical-align: -0.025ex;" xmlns="http://www.w3.org/2000/svg" width="1.294ex" height="1.025ex" role="img" focusable="false" viewBox="0 -442 572 453" aria-hidden="true"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><path data-c="1D465" d="M52 289Q59 331 106 386T222 442Q257 442 286 424T329 379Q371 442 430 442Q467 442 494 420T522 361Q522 332 508 314T481 292T458 288Q439 288 427 299T415 328Q415 374 465 391Q454 404 425 404Q412 404 406 402Q368 386 350 336Q290 115 290 78Q290 50 306 38T341 26Q378 26 414 59T463 140Q466 150 469 151T485 153H489Q504 153 504 145Q504 144 502 134Q486 77 440 33T333 -11Q263 -11 227 52Q186 -10 133 -10H127Q78 -10 57 16T35 71Q35 103 54 123T99 143Q142 143 142 101Q142 81 130 66T107 46T94 41L91 40Q91 39 97 36T113 29T132 26Q168 26 194 71Q203 87 217 139T245 247T261 313Q266 340 266 352Q266 380 251 392T217 404Q177 404 142 372T93 290Q91 281 88 280T72 278H58Q52 284 52 289Z" style="stroke-width: 3;"/></g></g></g></svg><mjx-assistive-mml unselectable="on" display="inline" style="top: 0px; left: 0px; clip: rect(1px, 1px, 1px, 1px); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; padding: 1px 0px 0px 0px; border: 0px; display: block; width: auto; overflow: hidden;"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>x</mi></math></mjx-assistive-mml></mjx-container></p>
<h1>formula end</h1>

I am not sure what I am missing? Could you provide an example that generates 'output/chtml'? Or better yet, I would like to just load this config: "https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml-full.js"

Thanks,

Alan

[oakisneat]

I have also tried these options:

import MarkdownIt from 'markdown-it';
import mdMathjax from 'markdown-it-mathjax3';
import mdKbd from 'markdown-it-kbd';
import mdAttrs from 'markdown-it-attrs';
import mdSup from 'markdown-it-sup';
import mdSub from 'markdown-it-sub';

const md = new MarkdownIt({
    html: true,
    linkify: true,
    breaks: true,
});

const options = {
    loader: {
        load: 'output/chtml',
    },
    startup: {
        output: 'output/chtml',
    },
};
// const options = {
//  startup: {
//      output: 'output/chtml',
//  },
// };
md.use(mdMathjax, options);
const md1 = `
# formula
$x$
# formula end
`;
console.log(md.render(md1));

Output is still SVG. Please help. SVGs look awful on Safari. Thanks,

Alan

[bill-ion]

https://github.com/tani/markdown-it-mathjax3/issues/58#issuecomment-1176093213 https://github.com/AustenLamacraft/markdown-it-mathjax3