LaTex equation cannot count number automatically cross pages

[jxpeng98]

Describe the bug If I have various equations in multi pages. The equation number will always start from (1) for every page. For example, In the first page, I have

$$
\begin{equation}
  {\mathcal{R}}(x)\approx65\ 600\ 000\times(1\pm0.002)\approx[65\ 500\ 000,\ 65\ 800\,000]
\end{equation}
$$

On the next page,

$$
\begin{equation}
x_i, \quad i=1,\ldots,n
\end{equation}
$$
are understood to be instantiations of random variables
$$
\begin{equation}  
  X_i \sim \pi(\theta_i), \quad i=1,\ldots,n
\end{equation}  
$$

To Reproduce Steps to reproduce the behavior: add any two equations on different pages by using

$$
\begin{equation}
 X \sim B(n,p)
\end{equation}
$$

And render the file. The bug will appear.

Desktop (please complete the following information):

• OS: macOS and Windows
• Browser: Firefox and Chrome
• Slidev version: 0.43.7

[twitwi]

This might be related https://github.com/KaTeX/KaTeX/issues/2380

It probably comes from the fact that previous slides are hidden (not in the DOM), so CSS numbering is offset. Currently, I guess slidev would need to :

• get the (cumulated) count of equations
• inject some css counter-reset: katexEqnNo 42 in every slide

[jxpeng98]

I try to add

<style>
  body{
    counter-reset: katexEqnNo 42;
  }
</style>

to each page. But it did not work.

It can only have

If add a number after counter-increment: katexEqnNo, it can change the equation number. For example, I add 5:

I also found that the equation number is correct in the preview:

But if you click the specific page, the equation will be reset to 1:

[twitwi]

Nice, I did not though this could be a workaround (especially if there are not too many slides).

You need to put the reset on the slide for it to take precedence :

<style>
  .slidev-layout, .slide-container {
    counter-reset: katexEqnNo 42;
  }
</style>

(for some reason I need to restart slidev to get it to take inline style at the moment)

[twitwi]

that being said, the subject of your slides seem to be very interesting!

[jxpeng98]

@twitwi

Thanks for your reply. This is the introduction to statistics.

Yes, your method works. However, it is inconvenient to set for each page if you build the project as a static page.

PDF version and HTML preview can work well since the project is rendered as a single page. However, the web will be refreshed when you jump to the next page. \

May I know if there is a way to store the equation number from the previous slide and continue the equation number on the current page?

Many thanks!

[aeudes]

Found a workaround... The difficulty lies in the fact that we cannot read the css counter and it's not trivial to reset it from vue variable. But if you add the following global-top.vue component in your project, it should correct the equation number. Their also a trick to have correct number in overview.

global-top.vue

<script setup>
import {ref, watch} from 'vue'
import {showOverview} from "@slidev/client/state/index.ts"
let neq = ref(0)
let pages = undefined

function update_value()
{
     let p = $slidev.nav.currentPage
     // trick to have counter at zero at the end of the slide in overview mode
     neq.value = showOverview.value ? -(pages[p+1] -pages[p])  ?? 0 : pages[p];
}

function update()
{
   pages = {}
   let nbeq = 0
   for (const i of Array($slidev?.nav?.total ?? 0).keys())
   {
      pages[i] = nbeq;
      nbeq += (document.getElementsByClassName("slidev-page-"+i)[0]?.getElementsByClassName("eqn-num") ?? []).length
   }
   pages[$slidev?.nav?.total ?? 0] = nbeq;

   update_value()
}
update()

watch([$page,showOverview], (a) => {
  update_value()
} )
</script>
<template>
  <component :is="'style'" type="text/css"><!-- v-if="!showOverview"-->
#page-root .slidev-page {
    --eqn-val: {{neq}};
    counter-set: katexEqnNo var(--eqn-val);
  }
</component>
  <!--component :is="'style'" type="text/css" v-if="showOverview">
/* alternative overview reset, but overview did not have any id to reset on but grid... */
.grid {
    counter-reset: katexEqnNo 0;
  }
</component-->
</template>