Thomas Churchman

@dobldsoft You are right.

In the current development version — not yet officially released, available for download here https://www.ads-software.com/plugins/katex/advanced/ — I’ve added a function to make this easier. You can simply call katexRender to render all as yet unrendered KaTeX.

This changes the code snippet to:

add_action( 'wp_print_footer_scripts', function() {
  if ( is_singular( 'sfwd-quiz' ) ) {
    ?>
    <script>
      (function($) {
        jQuery('.wpProQuiz_content').on('learndash-quiz-answer-response-contentchanged', function(e) {
          katexRender();
        });

        jQuery('.wpProQuiz_content').on('learndash-quiz-init', function(e) {
          katexRender();
        });
      })( jQuery );
    </script>
    <?php
  }
}, 999);

The footnotes plugin puts the content inside the title attribute of the footnote link tag. That plugin, on the browser-side, then looks for those attributes and renders them as elements into the DOM.

This interferes with KaTeX rendering, which also works on the browser-side to render things into the DOM. The two plugins do their work at the same time, which means some of the elements that should be rendered by KaTeX don’t exist yet. Why the manner in which it fails is consistent across page reloads is a bit mysterious though.

In any case, I have started work on version 2.1.2 that makes it easier for other code to render KaTeX. It’s available as the development version. You can download it here: https://www.ads-software.com/plugins/katex/advanced/

Using it, you could add e.g. to your functions.php:

add_action( 'wp_print_footer_scripts', function() {
  ?>
  <script>
    (function() {
      setInterval(katexRender, 500);
    })();
  </script>
  <?php
}, 999);

The katexRender function (currently only available in the development version) looks for as yet unrendered KaTeX, and renders it. So this will render all new, non-rendered KaTeX every 0.5 seconds.

Unfortunately this will not be possible. KaTeX is not LaTeX: it is a different implementation of TeX, and focuses specifically on math and rendering performance. You can continue using this KaTeX plugin and plugins that support LaTeX side-by-side, however!

This is intentional: the KaTeX CSS styles .katex-display .katex to white-space: nowrap. You can override this if you wish, e.g.

.katex-display .katex !important {
  white-space: inherit;
}

Instead of this, though, I prefer to set it to be horizontally scrollable (overflow-x: auto).

I’m not sure I understand what you mean by your second question. Are you asking why you cannot write full LaTeX documents in KaTeX blocks?

I’m not entirely sure what you mean. In general, it is advisable to put display-style TeX into KaTeX blocks instead of shortcodes. Then your TeX works fine for me.

Alternatively, you can set the display parameter in the shortcode as [katex display=true].

There has been an issue with multi-line shortcodes in the past, where <br> was added to the output by WordPress. I’ve just now released version 2.1.1 that fixes this.

• This reply was modified 4 years ago by Thomas Churchman.

Hi Steeven,

The issue is your theme styles the overlay class, which is a class KaTeX also uses. By disabling your theme’s .overlay CSS, the vector symbol displays correctly.

You could rename the overlay class name to something else in your theme, or use a more specific selector.

There’s a tracking issue on KaTeX for isolating their classnames better, but nothing’s happened yet: https://github.com/KaTeX/KaTeX/issues/1456

Unfortunately this is not supported.

For security and code maintainability considerations, the plugin intentionally uses only WordPress shortcodes and WordPress blocks, such that WordPress decides which parts should be rendered by KaTeX. In contrast, the MathJax plugin does a site-wide search for $...$ on the browser. This would actually have created a vulnerability in older versions: https://snyk.io/vuln/SNYK-JS-MATHJAX-451470.

Also note that in a default WordPress installation, shortcodes are not supported in comments (again due to security considerations, as well as performance). That means this plugin cannot be used as-is to support TeX rendering in comments.

You could enable shortcodes in comments by registering the right filters in functions.php (but be careful).

Hi,

This is slightly dirty, but does adding this to functions.php work?

add_action( 'wp_print_footer_scripts', function() {
  if ( is_singular( 'sfwd-quiz' ) ) {
    ?>
    <script>
      (function($) {
        renderKatex = function() {
          const eles = document.querySelectorAll(".katex-eq");
          for(let idx=0; idx < eles.length; idx++) {
             const ele = eles[idx];
             try {
               katex.render(
                 ele.textContent,
                 ele,
                 {
                   displayMode: ele.getAttribute("data-katex-display") === 'true',
                   throwOnError: false
                 }
               );
             } catch(n) {
               ele.style.color = "red";
               ele.textContent = n.message;
            }
          }
        };

        jQuery('.wpProQuiz_content').on('learndash-quiz-answer-response-contentchanged', function(e) {
          renderKatex();
        });

        jQuery('.wpProQuiz_content').on('learndash-quiz-init', function(e) {
          renderKatex();
        });
      })( jQuery );
    </script>
    <?php
  }
}, 999);

Thank you!

This is difficult to solve. AMP severely limits JavaScript to ensure performant pages. However, KaTeX uses JavaScript to render TeX math. That is why it does not work out-of-the-box.

You might want to use MathML instead of TeX for your math markup: AMP has support for MathML blocks.

It might be possible to get AMP and this plugin to play nicely together through implementing amp-script, but I do not have the time to implement this, and I would rather not start on having to maintain bindings to other plugins. Would you like to pick this up and provide some code for review?

I’m glad to hear. Thank you for the confirmation!

I believe all that’s necessary is wp_head() in the head section and wp_footer() before the closing tags.

Glad to hear!

Thank you for testing. I’ve now released version 2.1.0.

Your WordPress install might not notify you automatically of the update, because you’ve installed the development version of the plugin. If so, you need to install this release manually e.g. by removing the plugin and reinstalling.

Thank you for testing!

I accidentally only exempted [katex] from being texturized by WordPress. I’ll add [latex] in the next few days.

I think if you try with [katex] you should see the issue is fixed. If so, I can release the fix (with [latex] also exempted) soon.