Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render multiple columns with Markdown in GitHub README?

To render items in three columns, I attempted to add the following CSS3 directives to my project's README.md file, but the styling was stripped out:

<div style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;">
    <div style="display: inline-block;">
        <!-- first column's content -->
    </div>
    <div style="display: inline-block;">
        <!-- second column's content -->
    </div>
    <div style="display: inline-block;">
        <!-- third column's content -->
    </div>
</div>

This styling works correctly outside of GitHub's processing of Markdown. How can I put data into multiple columns in a Markdown document? Note that I am not concerned about support for IE browsers and don't care if IE renders a single column (my software project does not work on Windows clients, anyway).

like image 288
Alex Reynolds Avatar asked Jan 28 '15 20:01

Alex Reynolds


People also ask

Can you do columns in Markdown?

To add a table, use three or more hyphens ( --- ) to create each column's header, and use pipes ( | ) to separate each column. For compatibility, you should also add a pipe on either end of the row. Cell widths can vary, as shown below. The rendered output will look the same.

How do I make columns README in GitHub?

You can create tables with pipes | and hyphens - . Hyphens are used to create each column's header, while pipes separate each column. You must include a blank line before your table in order for it to correctly render. The pipes on either end of the table are optional.


1 Answers

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.

like image 93
Chris Avatar answered Sep 28 '22 09:09

Chris