Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Fail to render simple code in Auto-render Extension

See original GitHub issue

Before reporting a bug

Check common issues.
Check the bug is reproducible in the demo. If not, check KaTeX is up-to-date and installed correctly.
Search for existing issues.

Describe the bug: I am a freshman in front-end techniques, I write a simple code to test KateX but it still failed to render on Chrome. This must be my fault, but I couldn’t find anyway, could you help me to figure it out? Thank you in advance!

To Reproduce:

Simple html code as follows:

<head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
        <script>
            renderMathInElement(document.body,
           {
                      delimiters: [
                          {left: "$$", right: "$$", display: true},
                          {left: "$", right: "$", display: false}
                      ]
                  }
          );
        </script>
</head>

<body>
        $$ K_{2} $$
</body>
</html>

run it and then fail…😭

There is no error in console, and all js/css loaded successfully.

Environment (please complete the following information):

KaTeX Version: detail in code
Device: Desktop
OS: Windows10
Browser: Chrome
Version: latest maybe

Additional context: Before testing this code, I intend to use KaTeX on my jekyll-based personal website, but I failed to render the formula by appending the scripts in head.html of include directory in my jekyll project)

It is not a bug indeed, but how can I change the label of this issue? Appreciate your help.

Issue Analytics

State:
Created 4 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

2reactions

kevinbarabashcommented, Jul 18, 2019

You need to wait for the content in document.body to finish loading before running renderMathInElement. This can be accomplished by moving the script tag to the end of body or by adding an event listener for DOMContentLoaded. See https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event for the details on the latter approach.

1reaction

edemainecommented, Jul 19, 2019

@Harrypotterrrr Looking at various pages about Jekyll + KaTeX, it looks like math_engine is designed for MathJax, but you could then use mathtex-script-type to render the <script type="math/tex"> tags.

Alternatively, jekyll-katex suggests you can wrap your entire page in {% katexmm %} ... {% endkatexmm %} and then use $...$ as in LaTeX.