Katex: Fail to render simple code in Auto-render Extension

Created on 18 Jul 2019 · 8Comments · Source: KaTeX/KaTeX

Before reporting a bug

[X] Check common issues.

[X] Check the bug is reproducible in the demo. If not, check KaTeX is up-to-date and installed correctly.

[X] 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/[email protected]/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

question

Source

Harrypotterrrr

Most helpful comment

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.

kevinbarabash on 18 Jul 2019

👍2

All 8 comments

kevinbarabash on 18 Jul 2019

👍2

@kevinbarabash Thank you for your help sincerely! I have worked it out in HTML, but I still found some bugs when I use my Jekyll-based website, concretely speaking, some default settings of delimiters couldn't be detected when markdown files are converted into HTML, such as \\[ ... \\].
I tried several times but still can't figure it out, so I use third-party Jekyll-katex to solve this problem.
However, it is a bit complicated to add liquid tag katex for each time, so do you have any better ideas?

Harrypotterrrr on 19 Jul 2019

My hunch is that the markdown parser that jekyll uses would have to be modified in some way to support a more convenient syntax.

kevinbarabash on 19 Jul 2019

@Harrypotterrrr Instead of Jekyll-katex, you should be able to use a plugin specific to the Markdown renderer you use. Jekyll supports multiple Markdown renderers. If you're using Kramdown, you could try this gem, though I don't know offhand how to get Jekyll to use it. (I have experience using Jekyll but not together with KaTeX.) Actually, Jekyll's markdown configuration mentions math_engine, so maybe you just need to set that appropriately.

edemaine on 19 Jul 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.

edemaine on 19 Jul 2019

👍1

@edemaine wow, thank you for your patient help! I use jekyll-katex now and find {% katexmm %} ... {% endkatexmm %} is pretty easy to use.
However, I met a tricky problem and didn't know how to solve it. The same problem I issued here
I am not sure whether the math_engine of Github is different from the one I specified in my code (using KaTeX instead of original MathJax). So I am much confused now. 😭

Harrypotterrrr on 21 Jul 2019

@Harrypotterrrr Maybe try posting an issue on jekyll-katex? It explicitly mentions Github Pages support, and I don't think I can be of any more help (at least not without seeing an actual example of the input and resulting deployed page).

edemaine on 22 Jul 2019

@edemaine Sure, I will try to find the reason on my own. Appreciate your reply sincerely anyway!

Harrypotterrrr on 22 Jul 2019

Was this page helpful?

0 / 5 - 0 ratings