Marp
Autonumbering <figcaption> #587
-
|
Hello and thanks in advance. I've been trying to create an autoincrement caption tag for figures and tables in MARP using counters in CSS. ---
# Figures and caption in multicolumn
<div class="multicolumn" align="center">
<span class="figcaption">God Zeus</span>
<span class="highlight">Afrodite</span>
<span class="figcaption">Dionísio</span>
<span class="figcaption">Era</span>
</div>
---It produces a slide like this: 
I tried this in MARP: <style>
body {
counter-reset: figure_cnt;
counter-reset: table_cnt;
}
:root{
--marpx-theme-color: #3e6ceb;
--marpx-theme-color-alt: #fa002aff;
--code-bg: #006eff1e;
--text-highlight: #ffef0878;
--figure-captiontext: "Fig. ";
--table-captiontext: "Table ";
}
figcaption,
.figcaption,
tabcaption,
.tabcaption{
font-size: 16.5pt;
font-weight: 100;
color: black;
font-style:
}
figcaption::before{
counter-increment: figure_cnt;
font-weight: bold;
color: var(--marpx-theme-color);
content: var(--figure-captiontext) counter(figure_cnt) ": ";
}
.figcaption::before{
counter-increment: figure_cnt;
font-weight: bold;
color: var(--marpx-theme-color);
content: var(--figure-captiontext) counter(figure_cnt) ": ";
}
tabcaption::before{
counter-increment: table_cnt;
font-weight: bold;
color: var(--marpx-theme-color);
content: var(--table-captiontext) counter(table_cnt) ": "
}
.tabcaption::before{
font-weight: bold;
color: var(--marpx-theme-color);
content: var(--table-captiontext);
}
.highlight{
padding: 0.2em 0.3em;
background-color: var(--text-highlight);
}
code{
background-color: var(--code-bg);
}
</style>
Everything was fine until I tried to make the counter increment. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test of Automatic Numbering of Figures</title>
<style>
/*
===================================================================
P R O B L E M H E R E !
Here lies the problem. How do I use MARP to reproduce
the <body> field and insert the counter-reset: fig-counter
command?
===================================================================
/* 1. Sets and resets the counter called "fig-counter" at the beginning of the body */
body {
counter-reset: fig-counter;
font-family: sans-serif;
max-width: 600px;
margin: 2em auto;
}
/* 2. styling of the <figure> tag */
figure {
margin: 2em 0;
padding: 1em;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
figure img {
max-width: 50%;
display: block;
margin: 0 auto 0.5em auto;
}
/* 3. caption style with automatic numbering */
figcaption::before {
counter-increment: fig-counter;
content: "Figure " counter(fig-counter) ": ";
font-weight: bold;
color: #2a2a2a;
}
figcaption {
text-align: center;
font-style: italic;
color: #555;
}
</style>
</head>
<body>
<h1>Example of Automatic Figure Numbering with CSS</h1>
<figure>
<img
src="https://www.philosophy-foundation.org/files/assets/350x232/734827343.png"
alt="Imagem 1"
/>
<figcaption>Description of the first image.</figcaption> /* ---- HERE IS THE AUTOINCREMENT CAPTION TAG ----*/
</figure>
<figure>
<img
src="https://www.philosophy-foundation.org/files/assets/350x232/734827343.png"
alt="Imagem 2"
/>
<figcaption>Description of the second image.</figcaption> /* ---- HERE IS THE AUTOINCREMENT CAPTION TAG ----*/
</figure>
<figure>
<img
src="https://www.philosophy-foundation.org/files/assets/350x232/734827343.png"
alt="Imagem 3"
/>
<figcaption>Description of the third image.</figcaption> /* ---- HERE IS THE AUTOINCREMENT CAPTION TAG ----*/
</figure>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 9 replies
-
Marp generally cannot define the style for If that were allowed, it would mean being able to modify styles for the outside of the slide deck, which could potentially break the website or application where Marp is embedded. |
Beta Was this translation helpful? Give feedback.
-
Yes, your understanding is correct. Marp is carefully designed so that the content of each slide does not depend too much on the global context. For example, if a tool using Marp displays only a specific single page, or if multiple instances of the same slide deck are placed to the same web page, the global CSS counter may not number elements as the author intended. This is also a reason why Marp does not use For proper numbering, a Marp(Marpit) plugin would need to be created that can analyse Markdown statically and perform numbering. |
Beta Was this translation helpful? Give feedback.
-
|
I thought about the possibility of using the page number to differentiate the caption of the pictures on different slides. When I tried to use figcaption::before{
counter-increment: figure_cnt;
font-weight: bold;
color: var(--marpx-theme-color);
content: var(--figure-captiontext) attr(data-marpit-pagination) '.' counter(figure_cnt) ": ";
} |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
...but the latest Chrome browser supports a re-designed ---
# Enabling "paginate" global directive is required to assign data-marpit-pagination attribute
paginate: true
---
<style>
section {
--page-number: attr(data-marpit-pagination);
}
figcaption::before {
content: var(--page-number) '.' counter(figure_cnt) ": ";
}
</style>
<figcaption>figcaption</figcaption>Please note that |
Beta Was this translation helpful? Give feedback.
-
|
Yhatt, |
Beta Was this translation helpful? Give feedback.
Marp generally cannot define the style for
<body>directly from Marp's Markdown or CSS.If that were allowed, it would mean being able to modify styles for the outside of the slide deck, which could potentially break the website or application where Marp is embedded.