How to Render Multiple Columns with Markdown in Github Readme

How to render multiple columns with Markdown in GitHub README?

GitHub-Flavored Markdown only permits certain allow-listed tags and attributes in inline HTML:

HTML

You can use a subset of HTML within your READMEs, issues, and pull requests.

A full list of our supported tags and attributes can be found in the README for github/markup.

Regarding <div> tags, that README says that only the itemscope and itemtype attributes are allow-listed, in addition to the general attribute allowlist:

abbr, accept, accept-charset, accesskey, action, align, alt, axis, border, cellpadding, cellspacing, char, charoff, charset, checked, cite, clear, cols, colspan, color, compact, coords, datetime, dir, disabled, enctype, for, frame, headers, height, hreflang, hspace, ismap, label, lang, longdesc, maxlength, media, method, multiple, name, nohref, noshade, nowrap, prompt, readonly, rel, rev, rows, rowspan, rules, scope, selected, shape, size, span, start, summary, tabindex, target, title, type, usemap, valign, value, vspace, width, itemprop

No tags support the style attribute.

Unless you can hack something together with the tags and attributes listed in that README I think you'll find that you're out of luck.

An alternative would be to put together a GitHub Pages site, which seems to be much more flexible.

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.

How to display Table in README.md file in Github?

You need to see documentation again. You can see this cheatsheet

In your case you need to make second line like in example below:

Attempt | #1 | #2 | #3 | #4 | #5 | #6 | #7 | #8 | #9 | #10 | #11
--- | --- | --- | --- |--- |--- |--- |--- |--- |--- |--- |---
Seconds | 301 | 283 | 290 | 286 | 289 | 285 | 287 | 287 | 272 | 276 | 269

difference between this code and your code in repo is that second line with separator has same columns as header. After that this table will be shown

Is there something like CSS columns in Markdown?

is there something like css-columns in markdown?

No. Presenting content in multiple columns is a presentation concern, but Markdown is all about content:

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. 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.

You've tagged several Markdown processors in your question. Some of them may support columnar output, but others don't (GitHub Flavored Markdown certainly doesn't, for example).

You'll have to specify the processor you're using if you want to talk about columns.

How can one display images side by side in a GitHub README.md?

The easiest way I can think of solving this is using the tables included in GitHub's flavored markdown.

To your specific example it would look something like this:

Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png)  |  ![](https://...Ocean.png)

This creates a table with Solarized Dark and Ocean as headers and then contains the images in the first row. Obviously you would replace the ... with the real link. The :s are optional (They just center the content in the cells, which is kinda unnecessary in this case). Also you might want to downsize the images so they will display better side-by-side.

How can one display tables side by side in Github Markdown?

Space between text marks the beginning and end of particular types of content. Try this:

<table>
<tr><th>Table 1 Heading 1 </th><th>Table 1 Heading 2</th></tr>
<tr><td>

|Table 1| Middle | Table 2|
|--|--|--|
|a| not b|and c |

</td><td>

|b|1|2|3| 
|--|--|--|--|
|a|s|d|f|

</td></tr> </table>

It will look like this:

---

Related Topics