githubcolorsmarkdowngithub-pagesreadme

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>
Solution

  • References

    refer to Supported color models in GitHub models as they clearly stated that:

    Notes:

    • A supported color model cannot have any leading or trailing spaces within the backticks.

    • The visualization of the color is only supported in issues, pull requests, and discussions.

    so they aren't supported through GitHub markdown language, but if you refer to Writing mathematical expressions in GitHub docs, they stated that :

    To enable clear communication of mathematical expressions, GitHub supports LaTeX formatted math within Markdown. For more information, see LaTeX/Mathematics in Wikibooks.

    which means that GitHub doesn't support color models in README.md files but it supports LaTeX/Mathematics which in turn supports color models in README.md.

    so if you refer to this website provided by LaTeX/Mathematics, you will find a section called Color. which doesn't provide so much useful information, but it provides a link to LaTeX/Colors which contains all useful information about how to use latex colors.

    also to use LaTeX/Colors, you should use mathematical expressions in your GitHub README, so refer to Writing mathematical expressions in GitHub docs as before where they stated that :

    • To include a math expression inline with your text, delimit the expression with a dollar symbol $.

    • To add a math expression as a block, start a new line and delimit the expression with two dollar symbols $$.

    so for example, if you find an expression in LaTeX/Colors like this :

    \textcolor{declared-color}{text}

    in order to do it in GitHub according to GitHub docs, you should do it for example:

    $\color{green}{test}$

    and this is the output:

    enter image description here

    Examples

    by referring to LaTeX/Colors, here are some examples with their output as images on GitHub:

    Entering colored text

    code in README.md file, where \ is used to skip backspace:

    ## $\textcolor{yellow}{This\ is\ a\ Big\ Title}$

    output in GitHub:

    enter image description here

    Entering colored background for the text

    code in README.md file, where \ is used to skip backspace:

    ## $\colorbox{green}{{\color{white}{This\ is\ a\ Big\ Title}}}$

    output in GitHub:

    enter image description here

    change color for only part of the text

    code in README.md file, where \ is used to skip backspace:

    # ${This\ is\ a\ {\color{red}Big}}\ Title$

    output in GitHub:

    enter image description here

    and so on, you can try the rest by yourself.

    also, they stated that :

    The predefined color names are

    black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow.

    and you can define your colors, refer to the LaTeX/Colors as stated above and try it by yourself 😊.