Have two columns in Markdown
You can't, at least not with pure Markdown as it doesn't have any concept of columns. As explained in the rules:
The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.
In fact, the best way would be to have each code block wrapped in a <div>
with the appropriate class assigned to each div. However, most Markdown parsers do not parse Markdown inside a raw HTML block. Therefore, you may need to also define the code block in raw HTML as well. Check your parser's list of features to find out. In the event you are not able to define your own CSS to use separately from the Markdown (to style the HTML), you will also need to define the styles inline in the HTML. This question includes a nice sample of what that might look like. Just replace the comments with the appropriate code blocks. If you have to define your code blocks in raw HTML, they would look like this:
<pre><code class="language-c">int foo (void)
{
int i;
}
</code></pre>
So, the final document that is sure to work in all (most?) Markdown parsers would look like this:
# Rule 1
Description for rule 1.
<div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;">
<div style="display: inline-block;">
<h2>Good</h2>
<pre><code class="language-c">int foo (void)
{
int i;
}
</code></pre>
</div>
<div style="display: inline-block;">
<h2>Bad</h2>
<pre><code class="language-c">int foo (void) {
int i;
}
</code></pre>
</div>
</div>
Note that that uses one of many different ways of defining columns in CSS. Different methods may or may not work in different browsers. YMMV.
While this doesn't work for all markdown's, I got this to work with GitLab, Github, and mdBook. I thought I'd share this answer.
Basically, you create the table via HTML. Markdown and HTML don't mix well, but if you surround the markdown with white-space, 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>