140

I need to document a library on GitHub that output colored text in the terminal.

I've tried both span <style="color:red"> and <font color="red">, but it seems to strip out both tags.

Is the only way to do this is with images of colored text?


I ended up adding screenshots to Git and using image links with GitHub relative URLs.

2

5 Answers 5

116

In case this may be helpful for someone who just needs to show colors rather than output, as a hackish workaround (and FYI), since GitHub supports Unicode (as Unicode, numeric character references or HTML entities), you could try colored Unicode symbols, though it depends on the font rendering them in color (as it happens to be appearing for me on Windows 10 and Mac 10.12.5, at least, though on the Mac at least, the up/down-pointing small red triangles don't show in red):

  • RED APPLE (&#x1F34E;): 🍎
  • GREEN APPLE (&#x1F34F;): 🍏
  • BLUE HEART (&#x1F499;): 💙
  • GREEN HEART (&#x1F49A;): 💚
  • YELLOW HEART (&#x1F49B;): 💛
  • PURPLE HEART (&#x1F49C;): 💜
  • GREEN BOOK (&#x1F4D7;): 📗
  • BLUE BOOK (&#x1F4D8;): 📘
  • ORANGE BOOK (&#x1F4D9;): 📙
  • LARGE RED CIRCLE (&#x1F534;): 🔴
  • LARGE BLUE CIRCLE (&#x1F535;): 🔵
  • LARGE ORANGE DIAMOND (&#x1F536;): 🔶
  • LARGE BLUE DIAMOND (&#x1F537;): 🔷
  • SMALL ORANGE DIAMOND (&#x1F538;): 🔸
  • SMALL BLUE DIAMOND (&#x1F539;): 🔹
  • UP-POINTING RED TRIANGLE (&#x1F53A;): 🔺
  • DOWN-POINTING RED TRIANGLE (&#x1F53B;): 🔻
  • UP-POINTING SMALL RED TRIANGLE (&#x1F53C;): 🔼
  • DOWN-POINTING SMALL RED TRIANGLE (&#x1F53D;): 🔽
11
  • 12
    For more symbols, see this page apps.timwhitlock.info/emoji/tables/unicode
    – M.K. Safi
    May 29, 2016 at 1:10
  • 1
    Bearing in mind that some of the colors there are just choices by the font, no? May 29, 2016 at 3:33
  • 2
    @BrettZamir I think so. The same codes in a markdown file in Atom editor using the markdown preview package show them all in grayscale. It probably depends on the implementation of the rendering engine. Oct 27, 2016 at 21:24
  • 3
    Works in a Jupyter notebook also - the large red circle is great for drawing attention to something! Nov 19, 2016 at 19:26
  • 1
    Yes, those in your answer
    – ArneHugo
    Dec 10, 2016 at 23:50
61

You cannot get green/red text, but you can get green/red highlighted text using the diff language template. Example:

```diff
+ this text is highlighted in green
- this text is highlighted in red
```
4
  • The simplest way of getting red and green. Sadly, it puts the + and - in the text.
    – zhon
    Dec 9, 2016 at 18:59
  • 4
    Correct; it is not a solution for the OP (since there is none with github's markdown). It is actually what i was looking for when I found this question. Perhaps it will helper others who see the cool diff display in github, and google red/green that lands them here. Dec 9, 2016 at 19:44
  • 1
    Still a great workaround and perhaps the best one available. Thanks! Jun 16, 2019 at 9:07
  • Thank you!!! This is just what I wanted. Apr 20, 2021 at 18:42
58

You cannot include style directives in GFM.

The most complete documentation/example is "Markdown Cheatsheet", and it illustrates that this element <style> is missing.

If you manage to include your text in one of the GFM elements, then you can play with a github.css stylesheet in order to colors that way, meaning to color using inline CSS style directives, referring to said css stylesheet.

11
  • It doesn't list the html tags they allow and I don't know if their implementation is open source(if it was I'd try looking at it to figure out which tags are allowed). May 28, 2014 at 7:30
  • @RomanA.Taycher no, GFM is not open-source, as far as I know. There might be OSS libraries generating GFM-compatible syntax though.
    – VonC
    May 28, 2014 at 7:31
  • How do you include a stylesheet? May 28, 2014 at 7:33
  • 1
    @RomanA.Taycher No, it won't work in a README.md
    – VonC
    May 28, 2014 at 8:20
  • 3
    <style> is definitely prohibited by everyone as it can be used to inject code.
    – Peter K
    Feb 24, 2016 at 16:41
42

You can not color plain text in a GitHub README.md file. 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.

**Colored Code Example, JavaScript:** place this code below, in your GitHub README.md file and see how it colors the code for you.
  import { Component } from '@angular/core';
  import { MovieService } from './services/movie.service';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [ MovieService ]
  })
  export class AppComponent {
    title = 'app works!';
  }

No "pre" or "code" tags are needed.

This is now covered in the GitHub Markdown documentation (about half way down the page, there's an example using Ruby). GitHub uses Linguist to identify and highlight syntax - you can find a full list of supported languages (as well as their markdown keywords) over in the Linguist's YAML file.

DEMO

12
  • 2
    Do you have an example? backticks plus html are for triggering html highlight within a code section. That shouldn't have any influence on the rest of the GFM markdown content of a README.md file.
    – VonC
    Jun 11, 2014 at 17:08
  • @VonC You are right, it has no influence on the rest of the GFM markdown, only the code section. After many attempts and searches, I don't believe there is any way supported or otherwise to do that at this time only code coloring. Jun 11, 2014 at 21:50
  • 1
    Pretty confused as to why this was down voted. Perhaps because nothing was in the Github Markdown docs at the time. This is fixed, and should be the correct answer. See here: help.github.com/articles/github-flavored-markdown/…
    – stites
    Nov 22, 2014 at 1:55
  • 2
    Voting this back up because it works like a charm and is exactly what I was looking for. I needed it for XML, which worked the same way. Thanks! Jan 6, 2015 at 17:33
  • 12
    I'd guess this gets downvoted because it's not what the question asked. This shows how to get syntax-highlighting for code (e.g. highlighting HTML code), but the question asked how to change the color of arbitrary portions in the text, which may not be in any formal language at all (e.g. highlighting in an error message). Oct 27, 2015 at 18:05
19

As an alternative to rendering a raster image, you can embed a SVG:

https://gist.github.com/CyberShadow/95621a949b07db295000

Unfortunately, even though you can select and copy text when you open the .svg file, the text is not selectable when the SVG image is embedded.

1
  • Interesting. Still usefull just for caption text :)
    – m3nda
    Nov 27, 2015 at 7:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.