How do I use the Katex math renderer?

[ajtaylor]

Hi I'm trying to use the Katex math renderer in my HyperMD editor, but I must be missing something.

I've imported the powerpack:

import * as katex from 'hypermd/powerpack/fold-math-with-katex';

and I'm instantiating my editor as follows:

          var editor = hyp.fromTextArea(el, {
            mode: {
              name: "hypermd",
              theme: "hypermd-light"
            },
            foldGutter: false,
            lineNumbers: false,
            hmdFold: {
              image: false,
              link: false,
              math: true
            },
            hmdHideToken: true,
            hmdCursorDebounce: true,
            hmdClick: true,
            hmdHover: true,
            hmdModeLoader: false
          });

If I then type

$\Gamma^2 = \Alpha^2+\Beta^2$

in my editor, I get the uppercase Gamma, but neither of the uppercase Alpha nor Beta.

How do I force the editor to use Katex rather than the default math renderer?

Thanks Tony

[laobubu]

Hello. Just tested this code with Parcel and everything works well.

If you are using webpack, make sure that file-loader is configured properly so that KaTeX can load its font files (the files' suffix can be .woff, .woff2 or .ttf)

[ajtaylor]

Thanks for the quick response.

I've added the webpack file-loader with a test for .woff, .woff2 and .ttf, but no luck.

The webpack build didn't error before I added the test for the font files, so I don't think it's trying to include any fonts.

Although I've got the import for the KaTeX powerpack, there is nowhere in my code where I actually reference it, so I'm guessing the build won't actually include it. Also, the webpack output doesn't show any fonts being included.

[laobubu]

Maybe webpack optimized and removed the imported powerpack because of no reference. Try:

-import * as katex from 'hypermd/powerpack/fold-math-with-katex';
+import 'hypermd/powerpack/fold-math-with-katex';

[ajtaylor]

Yes, that worked! Thank you very much for your (v quick) help, and also for HyperMD.