how could i use it render Katex?

[leoluu]

Hi, any help?

when i use it render markdown editor pre-View HTML to canvas,and found latex expression，has not convert into canvas correctly，just look like this，

here is my code,

1.markdown editor is mavonEditor,https://github.com/hinesboy/mavonEditor 2. var input = document.getElementById("preview_switch"),//get the markdown editor preView html canvas = document.getElementById("canvas"), oldText = input.innerHTML;

            var draw = function () {
                rasterizeHTML.drawHTML(input.innerHTML, canvas).then(function (result) {
                    console.log(result);
                }, function (e) {
                    console.log('An error occured:', e);
                });
            };
            input.onkeyup = function () {
                if (input.value !== oldText) {
                    oldText = input.value;
                    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

                    draw();
                }
            };
            draw();

how Could I render latex correctly into canvas ?

THK!

[cburgmer]

This example is hard to debug for me: you have an external dependency to another logic that produces HTML (from markdown), but only provide the mimimal code of rasterizeHTML to help reproduce.

From a quick glimpse using the hosted version of your markdown dependency, I can see the non-standard markdown formula being translated into both MathML and a duplicate HTML structure rendering the same contents. The latter comes with CSS references to an external stylesheet. The MathML and duplicate HTML version might explain why your screenshot shows two occurrences of the formula.

The styling could be broken if the stylesheet couldn't be loaded. You might want to check for resources not loaded properly (see errors in https://github.com/cburgmer/rasterizeHTML.js/wiki/API#on-success).

There might be a different error altogether as your screenshot shows a reference to \color{red}, yet this doesn't show up in the preview when I use the hosted markdown dependency.

For proper debugging you probably want to make the whole setup smaller to be able to track down the problem.

[leoluu]

AHA,thank you,ths very much,and here is all the code,https://github.com/leoluu/mavonEditor-rasterizeHTML.git could you mind have a check. after clone, run npm install and npm run dev,it will open in http://localhost:9090/

[cburgmer]

Here's a minimal example. Please debug with this: https://codesandbox.io/s/infallible-drake-z6s6o?file=/src/index.js. See the console.log for the SVG that's generated internally. This should give you an idea what's being rendered.

[cburgmer]

As suggested in https://github.com/waylonflinn/markdown-it-katex you might want to add <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css"> as well.

[leoluu]

Aha，Ths，ths again，this is help/use full for me. And now follow your suggest I have rendered letax with rasterizeHTML correctly.

[cburgmer]

Great. Please do close this issue if your questions have been answered!