Math is not being rendered correctly.

[guihcs]

I have tried to display the following markdown text with latex equations and some are not being displayed:

Efficient training is therefore possible by optimizing random terms of $L$ with stochastic gradient descent. Further improvements come from variance reduction by rewriting $L$ (3) as:

$$\mathbb{E}_q \left [ D_{KL}(q(x_T|x_0) \| p(x_T)) + \sum_{t>1} D_{KL}(q(x_{t-1}|x_t, x_0) \| p_\theta (x_{t-1}|x_t)) - \log p\theta (x_0|x_1) \right ]$$

(See Appendix A for details. The labels on the terms are used in Section 3.) Equation (5) uses KL divergence to directly compare $p_\theta(x_{t-1}|x_t)$ against forward process posteriors, which are tractable when conditioned on $x_0$:

$$q(x_{t-1}|x_t, x_0) = \mathcal{N}(x_{t-1};  \bar{\mu}_t(x_t, x_0), \bar{\beta}_t\textbf{I}),$$ 

$$\text{where} \hspace{5mm} \bar{\mu}_t(x_t, x_0) := \frac{\sqrt{\bar{\alpha}_{t-1}}\beta_t}{1 - \bar{\alpha}_t} x_0 + \frac{\sqrt{\alpha_t}(1 - \bar{\alpha}_{t-1})}{ 1 - \bar{\alpha}_t}  x_t \hspace{5mm} \text{and} \hspace{5mm}  \bar{\beta}_t := \frac{1 - \bar{\alpha}_{t-1}}{1 - \bar{\alpha}_t} \beta_t$$

Here is a print of how it's being rendered on my application:

This is a bug or I'm missing some configuration?

[BlvckBytes]

Hey there, @guihcs!

Are you still facing the problem, or have you found a way to resolve it in the mean time? I've found the underlying cause, and could most definitely whip up a band-aid solution, but I'm really speechless on how everybody else managed to not run into this exact same unexpected behaviour.

When adding a markdown component to my page, as follows

<markdown
  katex
  [src]="'...'"
>
</markdown>

the calls seem to be as follows (paraphrased):

MarkdownComponent -> constructor -> this.handleSrc() -> this.render() -> this.parse() -> markdownService.render()

Where parse() trims, decodes html (if applicable), parses emojis, parses markdown, and sanitizes (if applicable). markdownService.render() then renders Clipboard, Katex and Mermaid. Nowhere in this chain could I locate any TeX marker detection, as in the $-symbols, so markdown did what one would expect markdown to do. Here's a simple example:

$V = \frac{1}{3}*\pi*h*r_1^2*(3-3*\frac{h}{h + h_s} + (\frac{h}{h + h_s})^2)$

becomes

<p>$V = \frac{1}{3}<em>\pi</em>h<em>r_1^2</em>(3-3*\frac{h}{h + h_s} + (\frac{h}{h + h_s})^2)$</p>

facepalm

Katex is rendered by calling window.renderMathInElement() on the root element, which then searches recursively for any math that's to be rendered. Of course, it won't render the mess from above, and the expression will stay visible as is.

The same holds true for your example:

$$\mathbb{E}_q \left [ D_{KL}(q(x_T|x_0) \| p(x_T)) + \sum_{t>1} D_{KL}(q(x_{t-1}|x_t, x_0) \| p_\theta (x_{t-1}|x_t)) - \log p\theta (x_0|x_1) \right ]$$

becomes

<p>$$\mathbb{E}<em>q \left [ D</em>{KL}(q(x_T|x_0) | p(x_T)) + \sum_{t&gt;1} D_{KL}(q(x_{t-1}|x_t, x_0) | p_\theta (x_{t-1}|x_t)) - \log p\theta (x_0|x_1) \right ]$$</p>

One trick to solve this is to pad symbols which could be interpreted as formatting by the markdown renderer (*, _) with a space, but that's unacceptable in my opinion...

[lsonnenschein]

/**
 * Custom Marked extensions for LaTeX math expressions
 * 
 * This module provides tokenizer extensions for Marked.js that protect
 * math expressions from being processed as Markdown.
 */

export const mathExtensions = [
  // Display math ($$...$$)
  {
    name: 'mathDisplay',
    level: 'block',
    start(src: string) { 
      return src.indexOf('$$'); 
    },
    tokenizer(src: string) {
      const rule = /^\$\$([\s\S]+?)\$\$/;
      const match = rule.exec(src);
      if (match) {
        return {
          type: 'mathDisplay',
          raw: match[0],
          text: match[1].trim(),
          tokens: []
        };
      }
      return undefined;
    },
    renderer(token: any) {
      return `\n$$${token.text}$$\n`;
    }
  },
  
  // Inline math ($...$)
  {
    name: 'mathInline',
    level: 'inline',
    start(src: string) { 
      // Find potential inline math delimiter - exclude escaped \$
      const match = /(?<!\\\$)\$/.exec(src);
      return match ? match.index : -1;
    },
    tokenizer(src: string) {
      // Match inline math, making sure not to match escaped dollar signs (\$)
      // and ensuring we have a closing delimiter that's not escaped
      const rule = /^(?<!\\\$)\$([^\$]+?)(?<!\\\$)\$/;
      const match = rule.exec(src);
      if (match) {
        return {
          type: 'mathInline',
          raw: match[0],
          text: match[1].trim(),
          tokens: []
        };
      }
      return undefined;
    },
    renderer(token: any) {
      return `$${token.text}$`;
    }
  }
];

I solved the issue by using a custom extension that protects math expressions during parsing.

Mind that I had chatty generate the regexp so I give no guarantee as to performance or correctness, but it works good enough in my case.

At any rate moving towards an extension for katex seems to be the idiomatic way of solving the problem.