Marp
Way to show mutiple figures in columns and rows #555
-
|
Hello all, I am trying to write slides with Marp. Occasionally, I need to include multiple figures in columns and rows in one slide, which I think might be a common need. However, I am sorry I did not find the relevant information on the doc page or anywhere else. Could you please teach me how to arrange the figures flexibly? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
A common solution is using the table syntax for Markdown. Marp assumes familiarity with Markdown syntax, so sites such as Markdown guide can be useful references for Markdown syntaxes. |  |  |
| :---: | :---: |
|  |  |Or you can be achieved it by using style such as CSS Grid if you need to fine layout. This approach should also be compatible with non Marp Markdown document if the style was supported. <style>
.grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 1rem;
place-items: center;
width: fit-content;
p, img {
display: block;
margin: 0;
}
}
</style>
# Grid layout
<div class="grid">
</div>You can reference how about CSS Grid in MDN. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, Thank you very much for the detailed explanation! It was very helpful. I’m sorry to trouble you again, but the caption doesn’t seem to render correctly in my case. Instead, it appears as raw input text: Also, could you please clarify whether the main advantage of using the CSS grid method is its flexibility, particularly in arranging figures more flexibly considering their absolute or relative positions? |
Beta Was this translation helpful? Give feedback.
-
Please review again whether your using Marp tool is the latest. The current latest version is v4 in Marp CLI, and v3 in Marp for VS Code. If not worked, please follow the checklist carefully again.
Absolute or relative positioning may not particularly relevant in this case. CSS Grid makes more straightforward the definition of figures when creating grid layout and allows flexible manipulation through styling. Using If you aim for well-considered Markdown slide document / HTML slides, these are important perspectives. If you need to use a |
Beta Was this translation helpful? Give feedback.
-
|
Hello, Thank you very much for the detailed reply! It was incredibly helpful. Since my OS is outdated, I am currently using Marp version 2.8.0 in VS Code. I will definitely try your suggestions once I update my OS. I was also wondering if it might be a valuable addition for Marp to support easier grid layouts and flexible arrangements for figures and tables, similar to how it handles background figure manipulation. For presentations, I guess lots of users need to include multiple figures and tables in one slide. Thank you once again for your time and support! |
Beta Was this translation helpful? Give feedback.
-
|
If you are using the previous version of Marp extension, try to enable HTML elements explicitly by the preference
Certainly that looks like useful, but there is a risk of losing compatibility with existing Markdown processors. Since the current Marp prefers maximum compatibility with common Markdown documents, we do not plan to add such specific feature(s). (Using HTML tags such as If needed, it can be provided that feature through custom theme or as a Marp plugin.
That is commonly known that it regresses from the improved presentation slide. To tell the strong concept to the audience, the slide author should keep to one image per slide. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, Thanks very much for the detailed explanations! I understand that Marp would like to maintain maximum compatibility with the common Markdown format. I will try to learn HTML and the concept you mentioned about making slides. I truly appreciate your time and all your support. Thank you once again! |
Beta Was this translation helpful? Give feedback.
A common solution is using the table syntax for Markdown. Marp assumes familiarity with Markdown syntax, so sites such as Markdown guide can be useful references for Markdown syntaxes.
Or you can be achieved it by using style such as CSS Grid if you need to fine layout. This approach should also be compatible with non Marp Markdown document if the style was supported.