有没有办法在Github Flavored Markdown中获得彩色文字?

时间:2014-05-28 06:29:42

标签: github github-flavored-markdown

我需要在github上记录一个在终端输出彩色文本的库。

我已尝试跨越<style="color:red"><font color="red">,但它似乎剥离了两个标记。

这样做的唯一方法是使用彩色文字图片吗?

编辑:

我最终将屏幕截图添加到git并使用带有github相对网址的图片链接。

5 个答案:

答案 0 :(得分:62)

如果这可能对那些只需要显示颜色而不是输出的人有帮助,那么作为一种hackish变通方法(和FYI),由于Github支持Unicode数字字符引用(和HTML实体),你可以尝试彩色Unicode符号,虽然它取决于字体呈现它们的颜色(因为它恰好出现在Windows 10和Mac 10.12.5上,至少,虽然在Mac上至少,上/下指向的小红色三角形不用红色表示:

  • RED APPLE(&amp;#x1F34E;):?
  • GREEN APPLE(&amp;#x1F34F;):?
  • BLUE HEART(&amp;#x1F499;):?
  • GREEN HEART(&amp;#x1F49A;):?
  • 黄心(&amp;#x1F49B;):?
  • PURPLE HEART(&amp;#x1F49C;):?
  • GREEN BOOK(&amp;#x1F4D7;):?
  • BLUE BOOK(&amp;#x1F4D8;):?
  • ORANGE BOOK(&amp;#x1F4D9;):?
  • 大红圈(&amp;#x1F534;):?
  • 大蓝圈(&amp;#x1F535;):?
  • 大型橙色钻石(&amp;#x1F536;):?
  • 大蓝钻石(&amp;#x1F537;):?
  • 小橙色钻石(&amp;#x1F538;):?
  • 小蓝钻石(&amp;#x1F539;):?
  • UP-POINTING RED TRIANGLE(&amp;#x1F53A;):?
  • DOWN-POINTING RED TRIANGLE(&amp;#x1F53B;):?
  • UP-POINTING SMALL RED TRIANGLE(&amp;#x1F53C;):?
  • 向下的小红三角(&amp;#x1F53D;):?

答案 1 :(得分:41)

您不能在GFM中包含样式指令。

最完整的文档/示例是&#34; Markdown Cheatsheet&#34;,它说明缺少此元素<style>

如果您设法将文字包含在其中一个GFM元素中,那么您可以使用github.css stylesheet进行播放,以便以这种方式进行着色。

答案 2 :(得分:35)

您可以在GitHub README.md文件中 NOT color plain TEXT 。您 CAN 但是在GitHub README.md文件中添加颜色到CODE样本,并带有以下标记。

要执行此操作,只需将这些示例等标记添加到README.md文件中:

```json
   // code for coloring
```
```html
   // code for coloring
```
```js
   // code for coloring
```
```css
   // code for coloring
```
// etc.

<小时/> 彩色代码示例,Javascript:将此代码放在您的github README.md文件中,看看它如何为您设置代码颜色。


```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!';
  }
```

不需要“预先”或“代码”标签。

现在已经在GitHub Markdown documentation中介绍了这一点(大约在页面的一半,有一个使用Ruby的例子)。 GitHub使用Linguist来识别和突出显示语法 - 您可以在Linguist's YAML file中找到支持的语言的完整列表(以及降价关键字)。

DEMO

答案 3 :(得分:24)

您无法获得绿色/红色 文字 ,但您可以使用绿色/红色 突出显示的文字 差异语言模板。例如:

```diff
+ this text is highlighted in green
- this text is highlighted in red
```

答案 4 :(得分:14)

作为渲染光栅图像的替代方法,您可以嵌入SVG:

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

不幸的是,即使您可以在打开.svg文件时选择并复制文本,但在嵌入SVG图像时也无法选择文本。