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

GithubGithub Flavored-Markdown

Github Problem Overview


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.

Github Solutions


Solution 1 - Github

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;): 🔽

Solution 2 - Github

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

Solution 3 - Github

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.

Solution 4 - Github

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:

   // Code for coloring
   // Code for coloring
   // Code for coloring
   // 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

Solution 5 - Github

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRoman A. TaycherView Question on Stackoverflow
Solution 1 - GithubBrett ZamirView Answer on Stackoverflow
Solution 2 - GithubcraigmichaelmartinView Answer on Stackoverflow
Solution 3 - GithubVonCView Answer on Stackoverflow
Solution 4 - GithubtotallytotallyamazingView Answer on Stackoverflow
Solution 5 - GithubVladimir PanteleevView Answer on Stackoverflow