Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add color to GitHub's README.md file

I have a README.md file for my project underscore-cli, and I want to document the --color flag.

Currently, the only way to do this is with a screenshot (which can be stored in the project repository):

example.png

But screenshots aren't text, preventing readers from copy/pasting the command in the screenshot. They're also a pain to create / edit / maintain, and are slower for browsers to load. The modern web uses text styles, not a bunch of rendered images of text.

While some Markdown parsers support inline HTML styling, GitHub doesn't; this doesn't work:

<span style="color: green"> Some green text </span> 

This doesn't work:

<font color="green"> Some green text </font> 
like image 363
Dave Dopson Avatar asked Jul 16 '12 17:07

Dave Dopson


People also ask

Can you add color to markdown?

Markdown doesn't support color but you can inline HTML inside Markdown, e.g.: <span style="color:blue">some *blue* text</span>. As the original/official syntax rules state (emphasis added): Markdown's syntax is intended for one purpose: to be used as a format for writing for the web.

How do you color text in Markdown?

The Markdown syntax has no built-in method for changing text colors. We can use HTML and LaTeX syntax to change the formatting of words: For HTML, we can wrap the text in the <span> tag and set color with CSS, e.g., <span style="color: red;">text</span> . For PDF, we can use the LaTeX command \textcolor{}{} .

Does GitHub markdown support color?

According to GitHub, colors are allowed.

How do I color text in GitHub?

You can however add color to code samples in your GitHub README.md file with the tags below. To do this, just add tags, such as these samples, to your README.md file: ```json // Code for coloring ``` ```html // Code for coloring ``` ```js // Code for coloring ``` ```css // Code for coloring ``` // etc.


1 Answers

One way to add color to a README is by utilising a service that provides placeholder images.

For example this Markdown can be used:

- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `#f03c15` - ![#c5f015](https://via.placeholder.com/15/c5f015/000000?text=+) `#c5f015` - ![#1589F0](https://via.placeholder.com/15/1589F0/000000?text=+) `#1589F0` 

To create a list of any colors you like:

  • #f03c15#f03c15
  • #c5f015#c5f015
  • #1589F0#1589F0
like image 83
AlecRust Avatar answered Sep 17 '22 15:09

AlecRust