【问题标题】:Is there a way to get colored text in GitHubflavored Markdown? [duplicate]有没有办法在 GitHub 风格的 Markdown 中获取彩色文本? [复制]
【发布时间】:2014-07-17 05:50:05
【问题描述】:

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

我尝试了 span <style="color:red"><font color="red">,但似乎都去掉了两个标签。

唯一的方法是使用彩色文本的图像吗?


我最终将屏幕截图添加到 Git,并使用带有 GitHub 相对 URL 的图像链接。

【问题讨论】:

标签: github github-flavored-markdown


【解决方案1】:

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

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

如果您设法将您的文本包含在 GFM 元素之一中,那么您可以使用 github.css stylesheet 以这种方式着色,这意味着使用内联 CSS 样式指令进行着色,参考上述 css 样式表。

【讨论】:

  • 它没有列出它们允许的 html 标签,我不知道它们的实现是否是开源的(如果是的话,我会尝试查看它以确定哪些标签是允许的)。
  • @RomanA.Taycher 不,据我所知,GFM 不是开源的。不过可能会有 OSS 库生成与 GFM 兼容的语法。
  • 如何包含样式表?
  • @RomanA.Taycher 不,它在README.md 中不起作用
【解决方案2】:

您可以在 GitHub README.md 中 纯色 文本文件。但是,您可以在您的 GitHub README.md 文件中添加 color 到 代码 samples用下面的标签。

为此,只需将标签(例如这些示例)添加到您的 README.md 文件中:

```json // 着色代码 ``` ```html // 着色代码 ``` ```js // 着色代码 ``` ```css // 着色代码 ``` // 等等。
**彩色代码示例,JavaScript:** 将此代码放在下面,在您的 GitHub README.md 文件中,看看它如何为您的代码着色。
  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!';
  }

不需要“pre”或“code”标签。

现在GitHub Markdown documentation 对此进行了介绍(大约在页面的一半处,有一个使用 Ruby 的示例)。 GitHub 使用 Linguist 来识别和突出语法 - 您可以在 Linguist's YAML file 中找到支持的语言(以及它们的 markdown 关键字)的完整列表。

DEMO

【讨论】:

  • 你有例子吗?反引号加上html 用于触发代码部分中的html 突出显示。这不应该对 README.md 文件的 GFM 降价内容的其余部分产生任何影响。
  • @VonC 你是对的,它对 GFM markdown 的其余部分没有影响,只有代码部分。经过多次尝试和搜索,我认为目前没有任何支持或其他方式可以做到这一点,只有代码着色。
  • 很困惑为什么这被否决了。也许是因为当时 Github Markdown 文档中没有任何内容。这是固定的,应该是正确的答案。见这里:help.github.com/articles/github-flavored-markdown/…
  • 投票支持它,因为它就像一个魅力,正是我想要的。我需要它用于 XML,它的工作方式相同。谢谢!
  • 我猜这会被否决,因为这不是问题所在。这显示了如何获得代码的语法突出显示(例如突出显示 HTML 代码),但问题询问如何更改文本中任意部分的颜色,这可能根本不是任何正式语言(例如在错误消息中突出显示)。
【解决方案3】:

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

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

很遗憾,即使您可以在打开 .svg 文件时选择和复制文本,但在嵌入 SVG 图像时文本是不可选择的。

【讨论】:

  • 有趣。仍然对标题文本有用:)
【解决方案4】:

如果这可能对只需要显示颜色而不是输出的人有所帮助,作为一种骇人听闻的解决方法(和仅供参考),因为 GitHub 支持 Unicode(作为 Unicode、数字字符引用或 HTML 实体),您可以尝试彩色Unicode 符号,尽管它取决于将它们呈现为颜色的字体(因为它恰好出现在 Windows 10 和 Mac 10.12.5 上,至少,尽管至少在 Mac 上,向上/向下指向的小红色三角形不要显示为红色):

  • 红苹果 (🍎):?
  • 青苹果 (🍏):?
  • 蓝心 (💙):?
  • 绿心 (💚):?
  • 黄心 (💛):?
  • 紫心 (💜):?
  • 绿皮书 (📗):?
  • 蓝皮书 (📘):?
  • 橙皮书 (📙):?
  • 大红圈 (🔴):?
  • 大蓝色圆圈 (🔵):?
  • 大橙色钻石 (🔶):?
  • 大蓝钻 (🔷):?
  • 小橙色钻石 (🔸): ?
  • 小蓝钻 (🔹):?
  • 上指红三角 (🔺):?
  • 向下指向的红色三角形 (🔻):?
  • 上指小红三角 (🔼):?
  • 向下指向的小红三角 (🔽):?

【讨论】:

  • 请记住,有些颜色只是字体的选择,不是吗?
  • @BrettZamir 我想是的。在 Atom 编辑器中使用 markdown 预览包的 markdown 文件中的相同代码均以灰度显示。这可能取决于渲染引擎的实现。
  • 也可以在 Jupyter 笔记本中使用 - 大红色圆圈非常适合吸引注意力!
  • 是的,那些在你的答案中
【解决方案5】:

您无法获得绿色/红色文本,但您可以使用绿色/红色高亮文本差异语言模板。示例:

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

【讨论】:

  • 获得红色和绿色的最简单方法。可悲的是,它在文本中添加了+-
  • 正确;它不是 OP 的解决方案(因为没有 github 的降价)。当我发现这个问题时,这实际上是我正在寻找的。也许它会帮助其他人在 github 中看到很酷的差异显示,以及将他们放到这里的 google red/green。
  • 仍然是一个很好的解决方法,也许是最好的解决方法。谢谢!
  • 谢谢!!!这正是我想要的。
猜你喜欢
  • 1970-01-01
  • 2016-01-06
  • 1970-01-01
  • 1970-01-01
  • 2019-02-11
  • 1970-01-01
  • 2019-10-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多