如何添加颜色到GitHub's README。md文件

我的项目underscore-cli有一个README.md文件，我想记录--color标志。

目前，只有的方法是使用截图(可以存储在项目存储库中):

example.png .png .

但截图不是文本，防止读者复制/粘贴截图中的命令。创建/编辑/维护它们也很麻烦，而且浏览器加载速度较慢。现代网络使用文本样式，而不是一堆渲染的文本图像。

虽然一些Markdown解析器支持内联HTML样式，但GitHub不支持;这行不通:

<span style="color: green"> Some green text </span>

这行不通:

<font color="green"> Some green text </font>
370229 次浏览
小开

在GitHub README.md文件中不能为纯文本着色。但是，您可以使用下面的标记为代码示例添加颜色。

要做到这一点，只需添加标签，如这些示例到您的README。md文件:

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

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

这在GitHub Markdown文档中涵盖(大约在页面的一半，有一个使用Ruby的例子)。GitHub使用语言学家来识别和突出显示语法-你可以在语言学家的YAML文件中找到支持语言的完整列表(以及它们的markdown关键字)。

小开

不幸的是，这目前是不可能的。

GitHub Markdown文档没有提到“color”、“CSS”、“HTML”或“style”。

虽然一些Markdown处理器(例如鬼中使用的处理器)允许HTML，如<span style="color:orange;">Word up</span>，但GitHub丢弃了任何HTML。

如果必须在自述中使用颜色，则README.md文件可以简单地将用户引用到README.html文件。当然，这样做的代价是可访问性。

小开

我倾向于同意与M-Pixel，目前不可能在GitHub Markdown内容中为文本指定颜色，至少不是通过HTML。

GitHub确实允许一些HTML元素和属性，但只允许某些元素和属性(参见他们的HTML卫生处理文档)。它们允许p和div标记，以及color属性。然而，当我尝试在GitHub上的Markdown文档中使用它们时，它不起作用。我尝试了以下方法(在其他变体中)，但它们都不起作用:

  • <p style='color:red'>This is some red text.</p>
  • <font color="red">This is some text!</font>
  • These are <b style='color:red'>red words</b>.

作为M-Pixel建议，如果你真的必须使用颜色，你可以在README.html文件中这样做，并将它们引用到它。

小开

作为渲染光栅图像的替代方法，你可以嵌入一个SVG文件:

<a><img src="https://dump.cy.md/6c736bfd11ded8cdc5e2bda009a6694a/colortext.svg"/></a>

然后，您可以像往常一样向SVG文件添加颜色文本:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="50"
>
<text font-size="16" x="10" y="20">
<tspan fill="red">Hello</tspan>,
<tspan fill="green">world</tspan>!
</text>
</svg>

不幸的是，尽管你可以在打开.svg文件时选择和复制文本，但当嵌入SVG图像时，文本是不可选择的。

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

小开

你可以使用diff语言标记来生成一些彩色文本:

```diff
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
```

但是，它以- + ! #开始或以@@开始和结束作为新行添加

Enter image description here

这个问题是在GitHub标记#369中提出的，但他们从那时(2014)起就没有做出任何改变。

小开

给README添加颜色的一种方法是使用提供图像占位符的服务。

例如，Markdown可以使用:

- ![#f03c15](https://placehold.co/15x15/f03c15/f03c15.png) `#f03c15`
- ![#c5f015](https://placehold.co/15x15/c5f015/c5f015.png) `#c5f015`
- ![#1589F0](https://placehold.co/15x15/1589F0/1589F0.png) `#1589F0`

创建一个你喜欢的颜色列表:

  • #f03c15 #f03c15 .
  • #c5f015 #c5f015
  • #1589F0 #1589F0
小开

我使用emoji Unicode字符向GitHub标记页面添加了一些颜色，例如💡或🛑—一些表情符号字符在某些浏览器中是有颜色的。

还有一些彩色表情字母:血型🅰️🅱️🅾️;停车标志🅿️;地铁标志Ⓜ️;其他一些有两个或更多字母的，如🆗，和盒装数字，如0️⃣。国旗emojis将显示字母(通常是彩色的)如果国旗不可用:🇯🇵🇰🇷🇩🇪🇨🇳🇺🇸🇫🇷🇪🇸🇮🇹🇷🇺🇬🇧。

然而，我认为emoji并没有定义一个完整的彩色字母。

小开

基于AlecRust的想法，我实现了PNG文本服务。

演示如下:

http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World

有四个参数:

  • Text:要显示的字符串
  • 字体:没有使用，因为我在这个演示中只有Arial.ttf。
  • fontSize:一个整数(默认为12)
  • 颜色:6个字符的16进制编码

请不要直接使用此服务(测试除外)，而是使用我创建的提供该服务的类:

https://github.com/lingtalfi/WebBox/blob/master/Image/PngTextUtil.php

class PngTextUtil
{
/**
* Displays a PNG text.
*
* Note: this method is meant to be used as a web service.
*
* Options:
* ------------
* - font: string = arial/Arial.ttf
*          The font to use.
*          If the path starts with a slash, it's an absolute path to the font file.
*          Else if the path doesn't start with a slash, it's a relative path to the font directory provided
*          by this class (the WebBox/assets/fonts directory in this repository).
* - fontSize: int = 12
*          The font size.
* - color: string = 000000
*          The color of the text in hexadecimal format (6 characters).
*          This can optionally be prefixed with a pound symbol (#).
*
*
*
*
*
*
* @param string $text
* @param array $options
* @throws \Bat\Exception\BatException
* @throws WebBoxException
*/
public static function displayPngText(string $text, array $options = []): void
{
if (false === extension_loaded("gd")) {
throw new WebBoxException("The gd extension is not loaded!");
}
header("Content-type: image/png");
$font = $options['font'] ?? "arial/Arial.ttf";
$fontsize = $options['fontSize'] ?? 12;
$hexColor = $options['color'] ?? "000000";
if ('/' !== substr($font, 0, 1)) {
$fontDir = __DIR__ . "/../assets/fonts";
$font = $fontDir . "/" . $font;
}
$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);


//--------------------------------------------
// GET THE TEXT BOX DIMENSIONS
//--------------------------------------------
$charWidth = $fontsize;
$charFactor = 1;
$textLen = mb_strlen($text);
$imageWidth = $textLen * $charWidth * $charFactor;
$imageHeight = $fontsize;
$logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
imagealphablending($logoimg, false);
imagesavealpha($logoimg, true);
$col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
imagefill($logoimg, 0, 0, $col);
$white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); // For font color
$x = 0;
$y = $fontsize;
$angle = 0;
$bbox = imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); // Fill text in your image
$boxWidth = $bbox[4] - $bbox[0];
$boxHeight = $bbox[7] - $bbox[1];
imagedestroy($logoimg);


//--------------------------------------------
// CREATE THE PNG
//--------------------------------------------
$imageWidth = abs($boxWidth);
$imageHeight = abs($boxHeight);
$logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
imagealphablending($logoimg, false);
imagesavealpha($logoimg, true);
$col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
imagefill($logoimg, 0, 0, $col);
$white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); // For font color
$x = 0;
$y = $fontsize;
$angle = 0;
imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); // Fill text in your image
imagepng($logoimg); // Save your image at new location $target
imagedestroy($logoimg);
}
}

注意:如果你不使用宇宙框架，你将需要替换这一行:

$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);

下面的代码:

$rgbColors = sscanf($hexColor, "%02x%02x%02x");

在这种情况下，你的十六进制颜色必须恰好是六个字符长(不要在它前面放散列符号(#))。

注意:最后我没有使用这个服务，因为我发现字体很难看，而且更糟糕:无法选择文本。但是为了讨论的目的，我认为这段代码值得分享……

小开

在撰写本文时，GitHub Markdown呈现带有颜色预览的颜色代码，如`#ffffff`(注意反刻度!)。只需使用颜色代码，并用反刻度符号包围它。

例如:

GitHub Markdown with color codes

就变成了

rendered GitHub Markdown with color codes

小开

下面是可以写入彩色文本的代码:

<h3 style="color:#ff0000">Danger</h3>
小开

问题是“如何在github readme中为文本着色”;
哪个是困难的/不可能的

跑题:在github的问题上，我们可以用

<span color="red">red</span>

例子:

#!/bin/bash


# Convert ANSI-colored terminal output to GitHub Markdown


# To colorize text on GitHub, we use <span color="red">red</span>, etc.
# Depends on:
#   aha: convert terminal colors to html
#   xclip: copy the result to clipboard
# License: CC0-1.0
# Note: some tools may need other arguments than `--color=always`
# Sample use: colors-to-github.sh diff a.txt b.txt


cmd="$1"
shift # now the arguments are in $@
(
echo '<pre>'
$cmd --color=always "$@" 2>&1 | aha --no-header
echo '</pre>'
) \
| sed -E 's/<span style="[^"]*color:([^;"]+);"/<span color="\1"/g' \
| sed -E 's/ style="[^"]*"//g' \
| xclip -i -sel clipboard
小开

如果你可以接受这些有限的颜色和形状，这些表情符号字符也很有用(尽管它们在不同的操作系统和浏览器中看起来可能不同)。这是AlecRust的回答的替代方案，它需要一个外部服务，可能有一天会崩溃，并且使用来自卢克·哈奇森的回答的表情符号的想法:

🔴🟠🟡🟢🔵🟣🟤⚫⚪🔘🛑⭕

🟥🟧🟨🟩🟦🟪🟫⬛⬜🔲🔳⏹☑✅❎

❤️🧡💛💚💜💙🤎🖤🤍♥️💔💖💘💝💗💓💟💕❣️♡

🔺🔻🔷🔶🔹🔸♦💠💎💧🧊

🏴🏳🚩🏁

◻️◼️◾️◽️▪️▫️

还有许多带有字母、数字、箭头和其他符号的彩色矩形字符可能适合您。

使用示例: 这是我的用例由这些表情符号解决(在阅读这里的答案后想到的)

此外，下面的表情符号是肤色修饰符，只有在某些设备上，这个矩形形状内才有肤色。例如，在Windows中，它们甚至没有颜色。不要使用它们!因为它们不应该单独使用，它们应该与其他表情符号一起使用，以修改其兄弟表情符号的输出。此外，它们在不同的操作系统、版本、浏览器和单独使用的版本组合中呈现的效果也大不相同。

🏿🏾🏽🏼🏻

小开

可以这样做:

. ! [] (https://img.shields.io/static/v1?label=&消息=Ааи,颜色=绿色) < / p >

小开

可能不是问题的确切答案，但当我处于OP的情况下，我正在寻找下面的解决方案:

. < a href = " https://hamzamohdzubair.github。Io /redant/" rel="noreferrer"> . < a href = " https://docs。rs/crate/redant/latest" rel="noreferrer"> . < a href = " https://crates。io/crates/redant" rel="noreferrer"> . < img src = " https://img.shields.io/badge/Lib.rs-lightgrey?Style =for-the-badge" alt="" /> . < / p >

简单地用:

[![](https://img.shields.io/badge/github-blue?style=for-the-badge)](https://github.com/hamzamohdzubair/redant)
[![](https://img.shields.io/badge/book-blueviolet?style=for-the-badge)](https://hamzamohdzubair.github.io/redant/)
[![](https://img.shields.io/badge/API-yellow?style=for-the-badge)](https://docs.rs/crate/redant/latest)
[![](https://img.shields.io/badge/Crates.io-orange?style=for-the-badge)](https://crates.io/crates/redant)
[![](https://img.shields.io/badge/Lib.rs-lightgrey?style=for-the-badge)](https://lib.rs/crates/redant)
小开

对于在GitHub README.md中为文本着色，可以使用SVG <text>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 20" fill="none">
<text x="0" y="15" fill="#4285f4">G</text>
<text x="12" y="15" fill="#ea4335">o</text>
<text x="21" y="15" fill="#fbbc05">o</text>
<text x="30" y="15" fill="#4285f4">g</text>
<text x="40" y="15" fill="#389738">l</text>
<text x="45" y="15" fill="#ea4335">e</text>
</svg>

在使用自定义颜色制作自定义文本之后，保存SVG文件并按照以下步骤操作。

  • 在GitHub上打开你的存储库。

  • 单击README.md . xml文件的编辑按钮

    enter image description here

  • 将SVG文件拖放到打开的在线编辑器中。GitHub将生成一个降价图像。大致如下。

    ![google](https://user-images.githubusercontent.com/000/000-aaa.svg)
  • 如果你想改变SVG的原始大小，你可以使用生成的URL作为<img/>标签的src，并给出所需的大小。

    <img height="100px" src="https://user-images.githubusercontent.com/000/000-aaa.svg" alt=""/>

    enter image description here

小开

目前，Github只在问题、公关和讨论中支持颜色模型。

参考:https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#supported-color-models

小开

GitHub无声地增加了对> __Note__和> __Warning__语法的支持:

enter image description here

小开

从2022年5月开始，Github可以接受乳胶代码Markdown，所以你可以在$$$$块中使用\color{namecolor}，如下例所示:

基本

代码 出现
$${\color{red}Red}$$ $ ${\颜色红}{红}$ $
$${\color{green}Green}$$ $ ${\颜色绿色}{绿}$ $
$${\color{lightgreen}Light \space Green}$$ $${\color{浅绿色}浅空间绿}$$
$${\color{blue}Blue}$$ $ ${蓝}{蓝}\颜色$ $
$${\color{lightblue}Light \space Blue}$$ $${\color{浅蓝色}浅空间蓝}$$
$${\color{black}Black}$$ $ ${黑}{黑}\颜色$ $
$${\color{white}White}$$ $ ${\{白}白色}$ $
< / div >

不止一种颜色

  • 代码
$${\color{red}Welcome \space \color{lightblue}To \space \color{orange}Stackoverflow}$$
  • 可视化

$${\color{红色}欢迎\space \color{浅蓝色}到\space \color{橙色}Stackoverflow}$$

  • 这段代码在Github:

Github live test

小开

这是一个使用MathJaX在GFM中更改文本字体、颜色和大小的变通方法

这是它的预览图:

enter image description here 可能的字体:

Mathcal - mathbb - mathscr - mathfrak - Mathcal

可能的颜色:

黑色，蓝色，棕色，青色，深灰色，灰色，绿色，浅灰色，石灰，品红，橄榄色，橙色，粉红色，紫色，红色，蓝绿色，紫色，白色，黄色

  • 内联代码使用$..$，居中代码使用$$..$$
  • 你可以使用\color或\textcolor
  • 你可以在文本之间使用\作为空格(或\ \作为双空格)
$\mathcal{\color{purple}{this \ is \ a \ paragraph} \ \color{cyan}{in \ another \ font}}$


$\mathbb{\color{teal}{this \ is \ a } \ \color{magenta}{paragraph \ in \ another \ font}}$


$\mathscr{\color{red}{this} \ \ \color{blue}{is \ \ a \ \ paragraph} \ \ \color{yellow}{in \ \ another \ \ font}}$


$\mathfrak{\color{lime}{this \ is \ a \ paragraph \ in \ another \ font}}$


$\mathscr{\color{red}{mon}\color{white}{day}}$


$\textcolor{olive}{\TeX} \ \textcolor{darkgray}{workaround \ found \ by \ Dassalem \ Mohammed \ Yasser}$


$\textit{hello}$  #italic


$\text{hello}$    #normal


$\Large{hello}$$   #Bigger text size


$$\LaTeX$$

颜色标记:

$\colorbox{red}{text}$


Text inside bordered Box


$\fbox{Hello there}$

你可以去高级着色文本: 可能的模型:灰色- rgb - rgb

< span style=" font - family:宋体;"> < / th >模型 < span style=" font - family:宋体;"> Desc < / th > < span style=" font - family:宋体;"> < / th值> < span style=" font - family:宋体;"灰色> < / td > < span style=" font - family:宋体;">灰色的阴影 > /td> . < span style=" font - family:宋体;"> RGB td > < / < span style=" font - family:宋体;">红、绿、蓝道明> < / < span style=" font - family:宋体;"> (0 - 255) {3} < / td >
rgb td > < / < span style=" font - family:宋体;">红、绿、蓝道明> < / < span style=" font - family:宋体;"> (0 - 255) {3} < / td > 
$\color[rgb]{1,0,1} hello$


$\color[RGB]{155,127,0} hello$


$\color[gray]{0.3} hello$

记住在$之后保留一个新行，否则它将不会被处理😄

< p >引用: https://en.wikibooks.org/wiki/LaTeX/ < / p >
小开

参考文献

引用在GitHub模型中支持颜色模型，因为它们清楚地声明:

注:

  • 受支持的颜色模型不能有任何前导或尾随空格

  • 仅支持颜色可视化 在问题中，拉动请求和讨论。

所以他们不支持通过GitHub markdown语言，但如果你参考在GitHub文档中编写数学表达式，他们说:

为了实现数学表达式的清晰通信，GitHub 在Markdown中支持LaTeX格式的数学。欲了解更多信息， 参见Wikibooks中的乳胶/数学

这意味着GitHub不支持README.md文件中的颜色模型，但它支持LaTeX/Mathematics，反过来又支持README.md中的颜色模型。

所以如果你引用本网站由LaTeX/Mathematics提供，你会发现一个叫做颜色的部分。它没有提供太多有用的信息，但它提供了乳胶/颜色的链接，其中包含了关于如何使用乳胶色的所有有用信息。

同样要使用乳胶/颜色，你应该在你的GitHub README中使用数学表达式，所以参考在GitHub文档中编写数学表达式，如前所述:

  • 若要在文本中包含数学表达式，请将 带有美元符号的表达式$.

  • 若要将数学表达式添加为块，请开始新行并将 带有两个美元符号的表达式$$.

例如，如果你在乳胶/颜色中找到这样一个表达式:

\textcolor{declared-color}{text}

根据GitHub文档，为了在GitHub中做它，你应该这样做，例如:

$\color{green}{test}$

这是输出:

enter image description here

例子

通过引用乳胶/颜色，这里有一些例子，它们的输出是GitHub上的图像:

输入彩色文本

README.md文件中的代码，其中\用于跳过退格:

## $\textcolor{yellow}{This\ is\ a\ Big\ Title}$

输出在GitHub:

enter image description here

输入文本的彩色背景

README.md文件中的代码，其中\用于跳过退格:

## $\colorbox{green}\{\{\color{white}{This\ is\ a\ Big\ Title}}}$

输出在GitHub:

enter image description here

只更改部分文本的颜色

README.md文件中的代码，其中\用于跳过退格:

# ${This\ is\ a\ {\color{red}Big}}\ Title$

输出在GitHub:

enter image description here

等等，剩下的你可以自己试试。

此外，他们还指出:

预定义的颜色名称为

黑色，蓝色，棕色，青色，深灰色，灰色，绿色，浅灰色，石灰， 洋红色，橄榄色，橙色，粉色，紫色，红色，蓝绿色，紫色，白色， 黄色。< / p >

并且你可以定义你的颜色，参考上面所述的乳胶/颜色并自己尝试😊。

小开

如果你想要着色超过1个词，那么我发现这是最方便的方法来着色文本在Github乳胶。

$\color{浅蓝色}{\textrm{红色Nimetaga 3 kõige suuremat pilveteenuste pakkujat}}$

示例Github available here


提交答案