How to create tables in a marp slide deck?

[hiraditya]

I want to add image to the slide. And I run into formatting issues because the image prevents rendering of text from left to right. If I can create tables I can do something like this:

----------------------------
     Title of the slide deck
----------------------------
- some text here |            |
- some text here |  image  |
- some text here |            |
----------------------------

However currently it doesn't render like this. See the image attached where title is pushed to the left side.

[yhatt]

It seems to use the split background through ![bg right](), but it would not suit to your case because of making a reserved area for background image.

Marp basically leaves the advanced layout to CSS styling because Markdown syntax has not designed for layout. So you have to use CSS Grid Layout in the inline <style> or custom theme if you wish to make the table layout.

You also can use the interactive generator of CSS Grid like https://grid.layoutit.com/?id=qAgdFLX if you've not familiar with CSS Grid.

There is a similar solution in marp-team/marpit#137 (comment).

Alternative solutions

• Use Flexbox to make 2 columns in your contents. Exactly same solution as reveal.js that is explained at https://stackoverflow.com/questions/30861845/how-to-use-two-column-layout-with-reveal-js also should work in Marp by enabling HTML.
• Use the classic float style to the image. float should work as you've expected if you're using Gaia theme.
  • For example, <img src="" align="right" width="300" /> will apply float: right style to the image. It may be the simplest way to achieve your expected layout.
  • Some themes may require override container display style to make working float elements. See also How should I use floating elements? #50.

[hiraditya]

enabling html worked. So i followed the following steps.

1. enable html in VSCode (https://github.com/marp-team/marp-vscode#enable-html-in-marp-markdown)
2. add custom style

<style>
div.twocols {
  margin-top: 35px;
  column-count: 2;
}
div.twocols p:first-child,
div.twocols h1:first-child,
div.twocols h2:first-child,
div.twocols ul:first-child,
div.twocols ul li:first-child,
div.twocols ul li p:first-child {
  margin-top: 0 !important;
}
div.twocols p.break {
  break-before: column;
  margin-top: 0;
}
</style>

3. slide code

---
# Tiling can improve the access pattern

<div class="twocols">

## LHS Title
- item

<p class="break"></p>

![right height:350px](tiling-good-access.png)
</div>

---

And it renders as desired. Thanks!

[hiraditya]

Similarly for two rows, for example:

div.tworows {
  margin-top: 10px;
  column-count: 1;
}
div.tworows p:first-child,
div.tworows h1:first-child,
div.tworows h2:first-child,
div.tworows ul:first-child,
div.tworows ul li:first-child,
div.tworows ul li p:first-child {
  margin-top: 0 !important;
}
div.tworows p.break {
  break-before: row;
  margin-top: 0;
}