Have two columns in Markdown

While this doesn't work for all dialects of Markdown, I got this to work with GitLab, GitHub, and mdBook.

Basically, you create the table via HTML. Markdown and HTML don't mix well, but if you surround the Markdown with whitespace, sometimes the Markdown can be recognized.

https://docs.gitlab.com/ee/user/markdown.html#inline-html

<table> <tr> <th> Good </th> <th> Bad </th> </tr> <tr> <td> ```c++ int foo() { int result = 4; return result; } ``` </td> <td> ```c++ int foo() { int x = 4; return x; } ``` </td> </tr> </table> 

This is an old question but in case people come here from Google, the above answer is correct for plain true Markdown, but if you're looking to do this with or through something that's implementing kramdown, kramdown does support mixed HTML and Markdown syntaxes by its usage of PHP Markdown Extra as noted in kramdown docs here. kramdown just requires that in your markdown page where you intend to use said HTML, you add an attribute to the wrapping HTML element of markdown="1".

As an example (and direct solution to two-column markdown), this results in two columns for content. I did this using Bootstrap to handle both column width and image centering, but you could take any approach for those topics.

<div class="row"> <div class="col-md-8" markdown="1"> Some text. </div> <div class="col-md-4" markdown="1"> <!-- ![Alt Text](../img/folder/blah.jpg) --> <img height="600px" class="center-block" src="../img/folder/blah.jpg"> </div> </div> 

Be wary of indents. I specifically didn't indent more than one level in the above code. I believe kramdown by default will interpret doubly-indented code as a quote block (and if I recall correctly, that's standard for Markdown in general).

Also note that I chose to use the html img tag instead of the markdown image link. You may choose to do the same since you gain a bit of extra control.

And, if you're new or unfamiliar with/to Bootstrap, you can change the relative column widths by changing the 8 and/or 4 shown in the code above, just make sure the sum of those two numbers is always 12.

As mentioned above, this only works for markdown consumers implementing the kramdown engine (and that's great for Jekyll users).

A non HTML approach using Latex multicol is as follows (inspired by this answer)

 --- header-includes: - \usepackage{multicol} - \newcommand{\hideFromPandoc}[1]{#1} - \hideFromPandoc{ \let\Begin\begin \let\End\end } --- # Rule 1 Description for rule 1. \Begin{multicols}{2} ## Good ```c int foo (void) { int i; } ``` ## Bad ```c int foo (void) { int i; } ``` \End{multicols} 

which exports correctly with pandoc

Additionally, you may need to use \Begin{minipage} and \End{minipage} if you multicols doesn't divide the columns correctly (can happen if there are nested subheaders)

With HTML and ```, you can do use the power of both columns and syntax coloring:

<div style="text-align: center; display: grid; grid-template-columns: 1fr 1fr;"> <div>parent ```html <component>content</component> ``` </div> <div> child ```html <slot>fallback content</slot> ``` </div> </div> 

Depending on what flavour of markdown you're using, if you're using R Markdown at least, you can use the ::: format to create multi-column layouts. Much simpler than embedding HTML etc..

The ::: is shorthand for a tag, but unlike adding a raw HTML, the ::: can wrap code blocks etc. to keep everything in the R markdown framework.

The ::: must be followed by {} containing any declarations you would put inside the opening tag, or empty if there are none, but it must be there (ie :::{}).

Here, you can add any css styling or classes, even bootstrap to make your markdown responsive:

::: {.row} ::: {.col-md-4} table ... ::: ::: {.col-md-8} graph ... ::: ::: 

You can find more detail at https://enzedonline.com/en/tech-blog/adding-multi-column-formats-to-r-markdown-documents/

Example:

```{r, fig.height=4, fig.width=5, warning=FALSE, message=FALSE} library(ggthemes) library(kableExtra) library(ggplot2) library(dplyr) data("mtcars") ``` :::::::::::::: {.columns} ::: {.column width="30%"} ```{r} mtcars %>% select(disp, mpg) %>% sample_n(10) %>% kbl() %>% kable_styling() ``` ::: ::: {.column width="5%"} \ ::: ::: {.column width="65%"} \ ```{r, fig.height=4, fig.width=7} mtcars %>% ggplot(aes(x=disp, y=mpg)) + geom_point() + theme_excel_new() ``` ::: :::::::::::::: 

Gives the following output:

I don't know who else wanders here after so much time but heres an idea I used. Just simply set the parent element's display to grid.

setting parent style to:

 width: 100%; display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; 

will make your Markdown loader fill the grids on order.

Loading this:

# Some title Some text here. [image] More text. 

Fill in like this:

 _______________________________ | Some title | Some text here.| _______________________________ | image | More text. | _______________________________ 

It might be useful to use   for example leaving 1-1 grid empty.

And now that you have a parent component you can style it's children to a certain extent.

Although originally intended to show the difference between two code blocks, given its green and red highlighting Markdown diff can be used also to show good and bad coding examples. For example the following code:

```diff + int foo (void) + { + int i; + } - int foo (void) { - int i; - } ``` 

would show up as: