Github – How to add color to Github’s README.md file

colorsgithubgithub-pagesmarkdownreadme

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 repo):

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>

Best Answer

It's worth mentioning that you can add some colour in a README using a placeholder image service. For example if you wanted to provide a list of colours for reference:

- ![#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`

Produces:

#f03c15
#c5f015
#1589F0

Related Solutions

Git – How to determine the URL that a local Git repository was originally cloned from

If you want only the remote URL, or if your are not connected to a network that can reach the remote repo:

git config --get remote.origin.url

If you require full output and you are on a network that can reach the remote repo where the origin resides :

git remote show origin

When using git clone (from GitHub, or any source repository for that matter) the default name for the source of the clone is "origin". Using git remote show will display the information about this remote name. The first few lines should show:

C:\Users\jaredpar\VsVim> git remote show origin
* remote origin
  Fetch URL: git@github.com:jaredpar/VsVim.git
  Push  URL: git@github.com:jaredpar/VsVim.git
  HEAD branch: master
  Remote branches:

If you want to use the value in the script, you would use the first command listed in this answer.

What file uses .md extension and how should I edit them

Markdown is a plain-text file format. The extensions .md and .markdown are just text files written in Markdown syntax. If you have a Readme.md in your repo, GitHub will show the contents on the home page of your repo. Read the documentation:

You can edit the Readme.md file in GitHub itself. Click on Readme.md, you will find an edit button. You can preview your changes and even commit them from there.

Since it is a text file, Notepad or Notepad++ (Windows), TextEdit (Mac) or any other text editor can be used to edit and modify it. Specialized editors exist that automatically parse the markdown as you type it and generate a preview, while others apply various syntax coloring and decorations to the displayed text. In both cases though, the saved file is still a readable text file.

If you want to create an md file with preview and if you prefer not to install any special editors, you can use online editors like dillinger.io and stackedit.io. They provide live preview. You can also export your files to Google Drive or Dropbox.

Best Answer

Related Solutions

Git – How to determine the URL that a local Git repository was originally cloned from

What file uses .md extension and how should I edit them

Related Topic