Any initiative to implement columns in Marp?

[cunhapaulo]

Columns are a integral and frequent feature in slide creation. Is there a way to make slides in Marp with two or more columns?

Thanks in advance!

[yhatt]

https://twitter.com/y_hatt/status/1449951469961023488

CSS grid

---
marp: true
style: |
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
---

# Multi columns in Marp slide

<div class="columns">
<div>

## Column 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eveniet, corporis commodi vitae accusamus obcaecati dolor corrupti eaque id numquam officia velit sapiente incidunt dolores provident laboriosam praesentium nobis culpa.

</div>
<div>

## Column 2

Tempore ad exercitationem necessitatibus nulla, optio distinctio illo non similique? Laborum dolor odio, ipsam incidunt corrupti quia nemo quo exercitationem adipisci quidem nesciunt deserunt repellendus inventore deleniti reprehenderit at earum.

</div>
</div>

Use Tailwind CSS v2 utilities (obsoleted)

---
marp: true
style: @import url('https://unpkg.com/tailwindcss@^2/dist/utilities.min.css');
---

# Multi columns in Marp slide

<div class="grid grid-cols-2 gap-4">
<div>

## Column 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eveniet, corporis commodi vitae accusamus obcaecati dolor corrupti eaque id numquam officia velit sapiente incidunt dolores provident laboriosam praesentium nobis culpa.

</div>
<div>

## Column 2

Tempore ad exercitationem necessitatibus nulla, optio distinctio illo non similique? Laborum dolor odio, ipsam incidunt corrupti quia nemo quo exercitationem adipisci quidem nesciunt deserunt repellendus inventore deleniti reprehenderit at earum.

</div>
</div>

I think using Tailwind CSS is a good choice only in PDF conversion because it has no solutions to apply optimizations for now. Tailwind CSS does not recommend using CSS through CDN in standard use due to a huge filesize (about 3MB in raw). If hosted presentation HTML on the Web, the score of page speed will be decrease, so should be better to use an inline style instead.

Of course, it is still a tempting option if you does not mind this fact and like to utility-based CSS rather than the classic inline style.

For developers, marp(it)-tailwind may become a potentially plugin idea for Marp, to make deep integration with optimized Tailwind CSS.

Past discussion is available in marp-team/marpit#137.

[lpinilla]

I've been trying this answer but it doesn't work for me.

I'm using marp v2.2.0

What I've done:

---
marp: true
style: |
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
---

At the top of the md file.

My last slide is:

---

# Multi columns in Marp slide

<div class="columns">
<div>

## Column 1

Content 1

</div>
<div>

## Column 2

Content2

</div>
</div>
---

This is the result:

I'll also take the chance to ask: what if I wanted 3 divisions instead of 2?

[codingluke]

@lpinilla are you sure you enabled HTML with --html or in vs-code like @yhatt already stated?

To have 3 columns just change grid-template-columns: repeat(2, minmax(0, 1fr)); to grid-template-columns: repeat(3, minmax(0, 1fr)); and add another </div><div>

[lpinilla]

🤦‍♂️ I didn't add the --html flag, I was confused because I wanted to export it to pdf so I didn't use that flag. Thanks for the quick reply!

[lpinilla]

and what about giving each column a different background color / outline ? is that possible?

[yhatt]

and what about giving each column a different background color / outline ? is that possible?

It's very easy. Set the class to each inner <div>s for specific styles.

---
marp: true
style: |
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .columns-left {
    background: yellow;
  }
  .columns-right {
    background: beige;
  }
---

<div class="columns">
<div class="columns-left">

## Column 1

Content 1

</div>
<div class="columns-right">

## Column 2

Content2

</div>
</div>

Or you also can use :nth-child(n) pseudo-class to target the single column without setting another class name.

.columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.columns > :nth-child(1) {
  background: yellow;
}
.columns > :nth-child(2) {
  background: beige;
}

[codingluke]

@yhatt I just had an idea about this topic. I understand that it ist not easy compatible with common markdown to implement multi column natively. Then it came to my mind, what if there is a page derictive multi-slide: number, which will render the current slide on the left and the next n slides to the right. So the two columns would be just slides rendered next to each other? this would be compatible with common markdown and also extendable with additional layouts. What do you think about it?

[yhatt]

We do never want to force Marp specific syntax for the layout. Marp team prefer using combination of Web standards, HTML + CSS, than adding Marp-specific directive and usage.

[codingluke]

I totally get this, and your columns class example ist just fine for me. Thanks! 🙇

However, what is your opinion about conventions like ![bg right](image-path), which I loved since Deckset. Isn't this somehow a specific syntax for the layout? 😝

[yhatt]

A former Marp app had designed as an open-source and cross-platform version of Deckset, so left and right keyword for the image syntax had been implemented to Marp as a compatible syntax/feature with Deckset as a result. Actually these keywords are proven effective for making a slide by Deckset.

Similarly, Marp requires to confirm proved effectivity of the new syntax, through third-party Marp/Marpit plugin and several use cases in a real world, for adding syntax as a built-in feature. See also our contributing guideline.

[codingluke]

I cust did a little "hack" with the proposed columns class and the markdown-it-container plugin.

// engine.js
const markdownItContainer = require('markdown-it-container');

module.exports = ({ marp }) => marp
  .use(markdownItContainer, 'columns', {
    render: function (tokens, idx) {
      if (tokens[idx].nesting === 1) {
        return '<div class="columns"><div>\n';
      } else {
        return '</div></div>\n';
      }
    }
  })
  .use(markdownItContainer, 'split', {
    render: function (tokens, idx) {
      if (tokens[idx].nesting === 1) {
        return '</div><div>\n';
      } else {
        return '</div></div>\n';
      }
    }
  })

With this engine it is possible to write columns like this.

# Heading

:::columns

left content

:::split

right content

:::

it will be rendered to

<h1>Heading</h1>
<div class="columns"><div>

left content

</div><div>

right content

</div></div>

[kazumatu981]

FYI: I've been build short cut as plugin!
please enjoy!

@kazumatu981/markdown-it-nested-container

[roland-KA]

I would like to see a solution as suggested in marp-team/marpit#137 using just a *** separator in Markdown and no additional HTML directives.

One reason for this is the following: I'm using Typora for editing Markdown and apart from creating slides with marp I'm using also Typoras export feature for creating PDFs (in A4 format). I've noticed that when I use HTML <div ..>in my Markdown documents (for creating columns), the PDF export of Typora gets distorted (the different heading levels get wrong formatting).

[drbeco]

I say go for it.... It is a great solution, simple and easy, to a problem that needs addressing.

[drbeco]

Is there a way to end the slide in a single column again, after bifurcating? Sometimes it is so useful to write a sentence or a note that is independent of the columns.

Example (using tables, but consider columns):

---

Header single column

text single column

col1	col2	col3
data	date	dati
dota	dute	deto

text single column

---

[yhatt]

I have no idea. Even if defined a columns ending syntax from CommonMark compliant syntax, I think that would become not intuitive as Markdown/Marp document.

Using HTML within Markdown is CommonMark compliant way. As I said earlier, <div class="columns"> should be working for that advanced case.

---
marp: true
style: |
  .columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
---

# Header single column

text single column

<div class="columns">
<div>

## Column 1

</div>
<div>

## Column 2

</div>
<div>

## Column 3

</div>
</div>

text single column

---

...

[thomaseizinger]

I've found the following to work really well for me:

<style scoped>
section {
    columns: 2;
}

h1 {
    column-span: all;
}

h2 {
    break-before: column;
}
</style>

Paste this at the top of a slide you want to have columns in. This assumes that each columns has an h2 heading and all content after it will be in that column. On the next h2 element, a new column will be created. You will need to also specify the number of columns you want to have.

[thomaseizinger]

You may need a block element as column content. I only tested it with a list, i.e. <ul>.

[vfrolov]

Nope, this doesn’t seem to work with any elements.

[yhatt]

The columns property requires the applied container element to be a block layout. If the applied section uses Flexbox layout or Grid layout, the columns property will not work.

The default theme of Marp applies display: flex to the section element in order to achieve vertical center alignment of contents using Flexbox. Therefore, to make the columns property work correctly, you should either apply display: block to the section to disable Flexbox or use a theme that doesn't use Flexbox, such as the gaia theme.

 <style scoped>
 section {
   columns: 2;
+  display: block;
 }
 
 h1 {
   column-span: all;
 }
 
 h2 {
   break-before: column;
 }
 </style>

Tip

Baseline 2024 browsers allow centering contents vertically within the block layout. In new Marp Core v4, the default style of slide containers will be display: block, that is compatible with columns CSS property + vertical centering behavior.

• Changes in new Marp Core v4 🚀 #533

[thomaseizinger]

Ah yes, I am using gaia as my theme :)

[drbeco]

This is such a nice solution!

[DylanRJohnston-FZ]

I ended up just using CSS Grid

  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
  }

  marp-pre {
    margin: 0px
  }

[codingluke]

The problem with the grid on the section element is, that every html child tag of it is a grid item. This make it possible to do two column, but only with two elements.

For me also the flex solution is not working always as expected with images on the right side.

For the meantime the original solution with the additional <div class="columns"> is maybe polluting the markdown but is at the end the best predictable.

[thomaseizinger]

Yes. What is nice about the CSS columns is that you can declare your content top to bottom and each new h2 is a new column.

But, I also just realized this isn't supported in Firefox & Safari yet so you'll have to use a Chromium based browser for viewing the presentation.

[codingluke]

and to fix Typora what about my solution here? is it somehow possible to disable some elements starting with ::: in the pdf creation? There is also nota.md, which does not reformat and destory html in md files.

[JIMMYGENN]

I have known how to split two and three columns by <div class="columns">. I still wanna know how to split multiple columns with different widths. The default setting of the width of two columns is 1:1, but I want to set it to 7:3. How can I do that? @yhatt

[yhatt]

display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);

Learn about fr unit in CSS grid: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#flexible_grids_with_the_fr_unit

[JIMMYGENN]

It works! Thanks @yhatt.

[phifuh]

@yhatt I totaly disagree with your stance on other issue that this feature is pure styling and everyone needs to figure out a style via css.

Marp (also known as the Markdown Presentation Ecosystem) provides >>an intuitive<< experience for creating beautiful slide decks.

Most people will use some standart layouts and this breaks totaly the intuitive approch. I am very happy with the framework and html/css is a huge toolbox, but predetermined layouts should be a core thing. This might look like a minor thing but I realy believe this would open up for more people to use the framework. I cant go to a college and explain him "ye you can use markdown and make slides very easy buuuuuut you have to play around with very basic styling and waste your time on that"

[yhatt]

Originally, Markdown does not have the concept of "columns". Is it really intuitive for those who write Markdown to provide some concept that does not exist in original Markdown?

The required slide design and layout is different depending on the presentation scene. So it's not good practice for Marp to arbitrarily define layouts like columns.

The theme system allows to predefine the design system of the slides according to the scene, including columns. The presentation author simply uses the theme as the theme author intended. There is no need to know the details of the style, and no time is wasted on it. :)

[theluke]

How do I change the number of columns for each slide instead of the beginning of the file?

[yhatt]

Following is another example of columns by using Flexbox instead of CSS Grid. The count of columns is changed dynamically by changing the number of div elements in the columns container.

---
style: |
  .columns {
    display: flex;
    gap: 1rem;
  }
  .columns > div {
    flex: 1 1 0;
  }
---

# 2 Columns

<div class="columns">
<div>

## Column 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam placeat debitis labore quidem exercitationem architecto.

</div>
<div>

## Column 2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam placeat debitis labore quidem exercitationem architecto.

</div>
</div>

---

# 3 Columns

<div class="columns">
<div>

## Column 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam placeat debitis labore quidem exercitationem architecto.

</div>
<div>

## Column 2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam placeat debitis labore quidem exercitationem architecto.

</div>
<div>

## Column 3

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam placeat debitis labore quidem exercitationem architecto.

</div>
</div>