Search code examples
layoutmarkdownreveal.js

How can I fix the reveal-md rendering of this two-column slide (code+image)?

I am using reveal-md to render a two-column slide with code and an image, taking inspiration from How to use two-column layout with reveal.js?.

A reproducible example is:

---
title: "Bad two-columns rendering"
author: "Yours truly"
---

![tux](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png) <!-- .element: style="float: right; width: 50%" -->

```python

print("Is the rendering bad?")
print("Yeah!")
print("How can you be sure?")
print("Look at the beak of Tux")

```
<!-- .element: style="width: 50%" -->

Once rendered, I get

enter image description here

If you look attentively, you can see that the "code box" overextends to the right and overlaps with the image (see the red highlighting)

enter image description here

Does anyone know how to fix this directly in the source (markdown) code? It's a not-so-minor annoyance. I tried fiddling with the markdown above but to no avail.

Solution

  • Another way to do it by using a little more modern CSS attribute called flex. I think your problems resulting in some wired template settings of the environment you are using. So here is my second go:

    --
title: "Bad two-columns rendering"
author: "Yours truly"
---
<style>
.container{
    display: flex;
}
.col{
    flex: 1;
}
</style>

<div class="container">

<div class="col">

```python

print("Is the rendering bad?")
print("Yeah!")
print("How can you be sure?")
print("Look at the beak of Tux")

```
<!-- .element: style="width: 100%;" -->

</div>

<div class="col">

![tux](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Tux-simple.svg/768px-Tux-simple.svg.png)

</div>

</div>

    Here I'm using classes to set the CSS attributes.

    example screenshot