Issue with KaTeX rendering of math expressions

[rodrigo-j-goncalves]

Below I show two Quarto files:

• The first one has only one slide, that includes the code of the XY plot from the minimal example.
• The second code has an additional slide (previous to the XY plot), to show a simple formula. Therefore, the only difference between the quarto files is this 1st slide.

The math notation of the XY plot is rendered correctly only in the second one.

What am I doing wrong?

Thanks for this plugin!

---

This is the code of the first quarto file:

---
title: "Animate-graph Example - doesn't work"
format:
  revealjs: 
    include-in-header: 
      - text: '<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>'
    html-math-method: katex

revealjs-plugins:
  - animate-graph
---
## Example
:::{.animategraph style="height:70%;width:70%;" }
[]{ .addElement type='line' var-x='quantity' var-y='supply'  }
[]{ .addElement type='line' var-x='quantity' var-y='demand' id='demand' index=0 } 
[]{ .addElement type='point' var-x='2.5' var-y='2.5' id='equilibrium' index=1   lines="true" }
[]{ .addElement type='tick' var-x='2.5' label-x="$q^\\star$" var-y='2.5' label-y="$p^\\star$"  index=2 }
[]{ .addElement type='area' var-x='quantity' var-y0='supply' var-y1='demand' index=3 id='surplus'  }
[]{ .addElement type='text' var-x='1' var-y='2.5' text="Total Surplus" index=3   }
[]{ .move var-x='quantity' var-y='demand_right' id='demand' index=4  }
[]{ .move var-x='3' var-y='3' id='equilibrium' index=5  }
[]{ .addElement type='tick' var-x='3' label-x="$q^{\\star}_{new}$" var-y='3' label-y="$p^\\star_{new}$"  index=6 }
[]{ .move id='surplus' var-x='quantity' var-y0='supply' var-y1='demand_right' index=7  }
:::

and this is the code for the 2nd file:

---
title: "KaTeX"
format:
  revealjs: 
    include-in-header: 
      - text: '<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>'
    html-math-method: katex

revealjs-plugins:
  - animate-graph
---
## First try
(if you delete this slide, the math is not rendered correctly anymore)
$$
X = \begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix}
$$

## Example
:::{.animategraph style="height:70%;width:70%;" }
[]{ .addElement type='line' var-x='quantity' var-y='supply'  }
[]{ .addElement type='line' var-x='quantity' var-y='demand' id='demand' index=0 } 
[]{ .addElement type='point' var-x='2.5' var-y='2.5' id='equilibrium' index=1   lines="true" }
[]{ .addElement type='tick' var-x='2.5' label-x="$q^\\star$" var-y='2.5' label-y="$p^\\star$"  index=2 }
[]{ .addElement type='area' var-x='quantity' var-y0='supply' var-y1='demand' index=3 id='surplus'  }
[]{ .addElement type='text' var-x='1' var-y='2.5' text="Total Surplus" index=3   }
[]{ .move var-x='quantity' var-y='demand_right' id='demand' index=4  }
[]{ .move var-x='3' var-y='3' id='equilibrium' index=5  }
[]{ .addElement type='tick' var-x='3' label-x="$q^{\\star}_{new}$" var-y='3' label-y="$p^\\star_{new}$"  index=6 }
[]{ .move id='surplus' var-x='quantity' var-y0='supply' var-y1='demand_right' index=7  }
:::

[ofkoru]

It sounds like the issue arises because Quarto doesn't automatically include the KaTeX dependency unless it detects a math environment in the slides.

To resolve the issue, you can manually add KaTeX using include-in-header:

---
title: "Animate-graph Example - doesn't work"
format:
  revealjs: 
    include-in-header: 
      - text: |
          <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
    html-math-method: katex

revealjs-plugins:
  - animate-graph
---

Please let me know if this doesn't work.

[rodrigo-j-goncalves]

Yes it works perfectly fine!!! Thanks so much :) I changed the title to make it more descriptive. Thanks for this wonderful plugin!!