Is there a way to get colored text in GitHubflavored Markdown?

Question

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.

You can use the ```diff```` language tag to generate red (and green) highlighted text. — craigmichaelmartin, Sep 09 '16 at 14:26
Related GitHub issue; https://github.com/github/markup/issues/369 — brillout, Oct 11 '17 at 19:37

score 113 · Answer 1 · edited Dec 13 '20 at 19:15

113

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 (🍎):
GREEN APPLE (🍏):
BLUE HEART (💙):
GREEN HEART (💚):
YELLOW HEART (💛):
PURPLE HEART (💜):
GREEN BOOK (📗):
BLUE BOOK (📘):
ORANGE BOOK (📙):
LARGE RED CIRCLE (🔴):
LARGE BLUE CIRCLE (🔵):
LARGE ORANGE DIAMOND (🔶):
LARGE BLUE DIAMOND (🔷):
SMALL ORANGE DIAMOND (🔸):
SMALL BLUE DIAMOND (🔹):
UP-POINTING RED TRIANGLE (🔺):
DOWN-POINTING RED TRIANGLE (🔻):
UP-POINTING SMALL RED TRIANGLE (🔼):
DOWN-POINTING SMALL RED TRIANGLE (🔽):

edited Dec 13 '20 at 19:15

Peter Mortensen

30,738
21
105
131

answered Mar 29 '16 at 14:36

Brett Zamir

14,034
6
54
77

12

For more symbols, see this page http://apps.timwhitlock.info/emoji/tables/unicode – M.K. Safi May 29 '16 at 01:10
1

Bearing in mind that some of the colors there are just choices by the font, no? – Brett Zamir May 29 '16 at 03:33
Not sure. It shows the output for the user's native OS as well as other platforms. – M.K. Safi May 29 '16 at 03:58
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. – jinglesthula Oct 27 '16 at 21:24
3

Works in a Jupyter notebook also - the large red circle is great for drawing attention to something! – Brian Burns Nov 19 '16 at 19:26
@ArneHugo : Just to confirm, you are speaking of those in my post, not merely those at the site provided by M.K. Safi ? – Brett Zamir Dec 10 '16 at 01:27
1

Yes, those in your answer – ArneHugo Dec 10 '16 at 23:50
Windows 7 + Chrome here and all I see are different black, white, and grayscale patterns in the above post. Screenshot: https://www.dropbox.com/s/gktq1vchxkx2spy/screenshot_font_grayscale_for_stack_overflow.PNG?dl=0 – flutefreak7 Jul 18 '17 at 20:54
Yeah, the font has to support the colors, and I guess Windows 7 must not come with such a font. – Brett Zamir Jul 19 '17 at 17:21
1

[This page](https://gist.github.com/rxaviers/7360908) claims to list all GitHub markdown emoji markups, which are more intuitive (though less complete) than Unicode codes. – Waldir Leoncio Jun 10 '20 at 13:28
Note that unless one is concerned about pre-Unicode text editors--which should hopefully by now be a thing of the past---mangling the encoding, one can also directly use the Unicode characters in the Markdown. Especially since these are visible characters (rather than say nonprintable Unicode characters like the soft hyphen which just suggest where hyphen breaks should occur), there's no particular advantage to showing them as codes instead of directly using them. – Brett Zamir Jun 11 '20 at 00:13
Oh, greate! Help to create a best md files. Thanks a lot! – LandiLeite Jun 26 '20 at 23:54
I don't need these at all, but upvoted because they're cool – stevec Aug 10 '20 at 14:36
Why isn't this guy CEO of some big tech? – Yan Foto Dec 09 '21 at 16:59

score 61 · Answer 2 · answered Dec 08 '16 at 16:06

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

answered Dec 08 '16 at 16:06

craigmichaelmartin

6,091
1
21
25

The simplest way of getting red and green. Sadly, it puts the ``+`` and ``-`` in the text. – zhon Dec 09 '16 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. – craigmichaelmartin Dec 09 '16 at 19:44
1

Still a great workaround and perhaps the best one available. Thanks! – Prahlad Yeri Jun 16 '19 at 09:07
Thank you!!! This is just what I wanted. – user2279952 Apr 20 '21 at 18:42

VonC · Accepted Answer · 2020-12-13T19:14:29.910

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.

edited Dec 13 '20 at 19:14

answered May 28 '14 at 07:04

VonC

1,262,500
529
4,410
5,250

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). – Roman A. Taycher May 28 '14 at 07: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 '14 at 07:31
How do you include a stylesheet? – Roman A. Taycher May 28 '14 at 07:33
@RomanA.Taycher only in the page you make on GitHub, like user pages (https://pages.github.com/): http://stackoverflow.com/a/16325664/6309 – VonC May 28 '14 at 07:35
so it won't work in README.md ? – Roman A. Taycher May 28 '14 at 07:56
1

@RomanA.Taycher No, it won't work in a `README.md` – VonC May 28 '14 at 08:20
3

– Peter K Feb 24 '16 at 16:41
Does one upload github.css to a special folder in a repo to make it active? I don't see any relevant results in my search (seems to all be about replicating the github css on other platforms). – coolaj86 Aug 28 '20 at 07:39
@coolaj86 No, as you have seen in my 2020 answer (https://stackoverflow.com/a/63548607/6309), this does not seem to be supported. – VonC Aug 28 '20 at 07:41
What do you mean by *"to colors that way"* (seems incomprehensible)? – Peter Mortensen Dec 13 '20 at 19:07
@PeterMortensen Meaning to color by referring the CSS stylesheet I mention in the answer. I have edited the answer. – VonC Dec 13 '20 at 19:15

score 42 · Answer 4 · edited Dec 13 '20 at 19:11

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

edited Dec 13 '20 at 19:11

Peter Mortensen

30,738
21
105
131

answered Jun 11 '14 at 16:29

totallytotallyamazing

2,765
1
20
26

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 '14 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. – totallytotallyamazing Jun 11 '14 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: https://help.github.com/articles/github-flavored-markdown/#syntax-highlighting – stites Nov 22 '14 at 01:55
@stites thanks for pointing that out! Not sure but some people are haters?... – totallytotallyamazing Jan 03 '15 at 23:28
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! – Samurai Soul Jan 06 '15 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). – Ken Williams Oct 27 '15 at 18:05
While not the anwer to question, it's the second valid with "colors" on it and is helpfull anyway. Anyway would be great to have some color marker. – m3nda Nov 27 '15 at 07:42
Can you add a working example? What is "code for coloring" supposed to be? Hex code a la csS? – Alexander Torstling Jan 26 '16 at 14:30
@Alexander Torstling I added an example as "DEMO" at the end of my question. Thanks for the suggestion! – totallytotallyamazing Jan 28 '16 at 03:22
You can use the ```diff```` language tag to generate red and green highlighted text. – craigmichaelmartin Sep 09 '16 at 14:25
Can someone include the simplest possible demo of how to set the color for arbitrary lines of text in a code section ? – rednoyz May 06 '18 at 23:07
@rednoyz Thank you for your suggestion. I just added a sample. – totallytotallyamazing May 07 '18 at 18:12

score 19 · Answer 5 · answered Jun 30 '15 at 15:52

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.

answered Jun 30 '15 at 15:52

Vladimir Panteleev

24,651
6
70
114

Interesting. Still usefull just for caption text :) – m3nda Nov 27 '15 at 07:44

Is there a way to get colored text in GitHubflavored Markdown?

5 Answers5

Linked