GitHub Markdown and colors

Question

I have a table with the following code. In the Markdown viewer and on GitHub pages, the color is shown correct. But not on GitHub.

|-   |-  |-   |-   |-   |
| <span style="font-family: Source Code Pro; padding: 20px; background-color: #000000; color: #fff;">#000000</span> |

The result on GitHub:

The result on GitHub Pages

A table has the disadvantage that it does not move downwards at smaller screen sizes, but only to the right. How can I create a kind of grid layout?

Answer 1

Within GitHub, Markdown content is somewhat restricted. After Markdown is converted to HTML

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.

(Bold added.)

The span tag is not included in the whitelist. Even if it was, the style attribute is also missing from the whitelist. The only way I know to achieve a visual similar to what's on GitHub Pages is to use an image, as you have done here.

Answer 2

The GitHub Flavored Markdown (GFM) Table Extension does not support coloring. Anything you do will be a hack that is not guaranteed to work going forward. It may be possible to accomplish this with HTML but I don't advocate mixing HTML with your Markdown. Support is sketchy and varied.