Is there a way to get colored text in Github Flavored Markdown? [duplicate]

问题

This question already has an answer here:

How to add color to Github's README.md file 9 answers

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?

edit:

I ended up adding screenshots to git and using image links w/ github relative urls.

回答1:

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.

回答2:

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 numeric character references (and 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 (🔽): 🔽

回答3:

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.


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

回答4:

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

回答5:

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.

来源：https://stackoverflow.com/questions/23904274/is-there-a-way-to-get-colored-text-in-github-flavored-markdown

标签

github

github-flavored-markdown