How to add total # pages with paginate:true

[hiraditya]

When i add paginate: true, it only prints the page number on the bottom right side of the slide deck. Can we have the facility to add total page as well. like 1/10, 2/10 etc.

[yhatt]

Please follow our support guideline. Recommend to post at Marp discussions for asking a question about Marp and related tools/libraries. I've tried to transfer this issue into Marp discussions but the ability of transfer seems to be disabled temporarily: https://github.com/github/feedback/discussions/2924#discussioncomment-254592.

Check out https://marpit.marp.app/theme-css?id=customize-content. The content of pagination can customize through CSS theme and inline <style> can tweak theme to add the total page number.

---
paginate: true
---

<style>
section::after {
  content: attr(data-marpit-pagination) '/' attr(data-marpit-pagination-total);
}
</style>

# example

[hiraditya]

Thanks a lot for suggesting the fix.

[hiraditya]

In case someone has issue with the code above, the quotes around '/' is necessary. So the following code won't work.

<style>
section::after {
  content: attr(data-marpit-pagination) / attr(data-marpit-pagination-total);
}
</style>

I ran into this issue when I forgot to add quotes.

[Naereen]

The content of pagination can customize through CSS theme and inline <style> can tweak theme to add the total page number.

Hello there, Using this CSS in the theme and not inline is impossible? (it doesn't work for me) I aim at keeping the Markdown files as simple as possible, and all the CSS in the theme. Thanks!

[yhatt]

@Naereen Of course you can. section::after can predefine in your CSS theme because CSS theme and <style> tag has the same context within Marpit.

/* @theme your-theme */

@import 'default';

section::after {
  content: attr(data-marpit-pagination) '/' attr(data-marpit-pagination-total);
}

---
paginate: true
theme: your-theme
---

...

[Naereen]

Hi @yhatt, Thanks, yes I managed to obtain this working, but at first it was just doing nonsense.

I'm a long time user of Marp, and since 2019 I hadn't tried the new Marp. I must say :clap: bravo for the solid work on the new Marp.app websites, frameworks etc. It's indeed smarter to integrate in VSCode (or Atom, I don't know if you were aware of this non official plugin), than rewrite an editor from scratch.

[calidion]

how to ignore the cover page? and start pagination from the second page?

[yhatt]

Did you have read a documentation of Marpit framework? It has been mentioned at https://marpit.marp.app/directives?id=skip-pagination-on-title-slide.