我有一个自述文件。md文件用于我的项目underscore-cli,我想记录——color标志。

目前,做到这一点的唯一方法是截图(可以存储在项目存储库中):

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

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

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

这行不通:

<font color="green"> Some green text </font>

当前回答

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

GitHub Markdown文档没有提到“颜色”,“CSS”,“HTML”或“样式”。

而一些Markdown处理器(例如在Ghost中使用的)允许HTML,例如<span style="color:orange;>Word up</span>, GitHub's丢弃任何HTML。

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

其他回答

在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的“编辑”按钮 将SVG文件拖放到打开的在线编辑器中。GitHub将生成一个降价图像。大致如下。 (谷歌)! (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=""/> .

现在自2022年5月起,Github可以接受Markdown上的LATEX代码,所以你可以在$$$$块内使用\color{namecolor},如下例所示:

基本

Code Appearing
$${\color{red}Red}$$ $${\color{red}Red}$$
$${\color{green}Green}$$ $${\color{green}Green}$$
$${\color{lightgreen}Light \space Green}$$ $${\color{lightgreen}Light \space Green}$$
$${\color{blue}Blue}$$ $${\color{blue}Blue}$$
$${\color{lightblue}Light \space Blue}$$ $${\color{lightblue}Light \space Blue}$$
$${\color{black}Black}$$ $${\color{black}Black}$$
$${\color{white}White}$$ $${\color{white}White}$$

不止一种颜色

代码

$${\color{red}Welcome \space \color{lightblue}To \space \color{orange}Stackoverflow}$$

可视化

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

这段代码在Github:

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

向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 # c5f015 # 1589F0

基于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);
    }
}

注意:如果你不使用Universe框架,你需要替换这一行:

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

下面的代码:

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

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

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