问题

这也是一篇放了很久备忘,在写 README 的时候,因为一些特定的目的,所以想给不同的文本设置一些不同的颜色,在本地编辑工作地好好的,结果一 push 上去居然不工作了,颜色就自动消失了,所以这里总结一下能显示不同颜色的一些常用做法。

解决方式

原来已经有不少人提出这个问题了,我们来看看大家的解决办法

我想给我的 README.md 文档添加颜色标签,
我尝试 使用 以下两种方式,但是效果不行

  1. <span> Some green text </span>
  2. And this:
  3. <font color="green"> Some green text </font>

方案 1:使用图片

值得一提的是,您可以使用占位符图像服务在 Readme 文件中添加一些颜色,例如,提供颜色列表以供参考:

  1. - ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`
  2. - ![#c5f015](https://placehold.it/15/c5f015/000000?text=+) `#c5f015`
  3. - ![#1589F0](https://placehold.it/15/1589F0/000000?text=+) `#1589F0`

效果如下:

方案 2:diff tag

可以使用 diff tag 来生成 高亮文本。

  1. \`\`\`diff
  2. - red
  3. + green
  4. ! orange
  5. # gray
  6. \`\`\`

效果如下:

方案 3:代码标签

github 目前不支持文档 color、 style 标签

如果你这样写了

  1. <span>Word up</span>

github 会视为 html

虽然不支持添加 color tag ,但是我们可以使用以下 tag 去添加一些颜色

  1. \`\`\`json
  2. // code for coloring
  3. \`\`\`
  4. \`\`\`html
  5. // code for coloring
  6. \`\`\`
  7. \`\`\`js
  8. // code for coloring
  9. \`\`\`
  10. \`\`\`css
  11. // code for coloring
  12. \`\`\`
  13. // etc.

如果你真的非常想在 readme.md 中使用颜色,可以在 readme.md 中链接到 readme.html 文件,这个文件里可以使用样式

总结

  1. 使用 diff + - ! #(可以!满足基本需求
  2. 文字加不了颜色,给这一行加上有颜色的表头图片 (麻烦,pass
  3. 使用 json、js、html、css 标记语法(虽然不是想要的,pass
  4. 链接到 readme.html 文件(也不太好

github 写作格式语法

Writing on GitHub
Basic writing and formatting syntax

参考链接

  1. 有没有办法在 Github Flavored Markdown 中获得彩色文字
  2. How to add color to Github’s README.md file
  3. No longer possible to color text in Markdown
  4. Github 中的 Markdown 支持用不同的颜色显示文字吗