【问题标题】:How to add color to GitHub's README.md file如何为 GitHub 的 README.md 文件添加颜色
【发布时间】:2012-07-15 15:02:21
【问题描述】:

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

目前,唯一的方法是使用屏幕截图(可以存储在项目存储库中):

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

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

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

这不起作用:

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

【问题讨论】:

  • 如果您无法通过 Markdown 为文本着色,是否可以嵌入屏幕截图?
  • 是的。在我发布这个问题后,我想到了这一点。我认为屏幕截图可能是我最好的后备答案,尽管它显然并不理想。
  • 所以还不能给markdown文件中的文本添加颜色?
  • 不 - 以及 2014 年 7 月的 ffs

标签: github colors markdown github-pages readme


【解决方案1】:

为自述文件添加颜色的一种方法是利用提供placeholder images 的服务。

例如可以使用这个 Markdown:

- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `#f03c15`
- ![#c5f015](https://via.placeholder.com/15/c5f015/000000?text=+) `#c5f015`
- ![#1589F0](https://via.placeholder.com/15/1589F0/000000?text=+) `#1589F0`

要创建您喜欢的任何颜色的列表:

  • #f03c15
  • #c5f015
  • #1589F0

【讨论】:

  • 这在 GitHub 项目中的卡片中非常有用,可以用来标记卡片并为其着色
  • @BinarWeb 你把这个放在哪里?将在 GitHub 上工作,例如支持 Markdown 中的图像。
  • 作为问题询问,我想给文字着色,而不是在文字前面有图像
  • 我所描述的工作。您还可以在图像中放置彩色文本,例如https://placehold.it/150/ffffff/ff0000?text=hello
  • 非常有用的信息,在后端创建网络应用时很有帮助。
【解决方案2】:

您可以使用diff 语言标签生成一些彩色文本:

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

但是,它将其添加为以- + ! # 开头或以@@ 开头和结尾的新行

这个问题在GitHub markup #369 中提出,但自那以后(2014 年)他们没有对决定做出任何改变。

【讨论】:

  • 它还会将@@ 环绕的文本着色为紫色(和粗体)。 Codecov 在其 GitHub 集成机器人的 cmets 中利用了这一点,例如:github.com/zeit/now/pull/2570#issuecomment-512585770
  • 我认为,如果您包含我在 github 问题上看到的一个聪明的技巧,您的答案会更有说服力:使用“-!警告!-”之类的文本来合并/隐藏触发颜色的初始字符.
  • 这正是我的用例,我想在问题评论中突出显示差异,我提供了一个快速解决方法
【解决方案3】:

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

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

```json // 着色代码 ``` ```html // 着色代码 ``` ```js // 着色代码 ``` ```css // 着色代码 ``` // 等等。

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

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

【讨论】:

  • @NielsAbildgaard 谢谢! :) 答案是至少此时您不能在 GitHub .md 文件中为纯文本着色。我确实说明了这一点,并花了大约 4 个小时来研究它。无论如何感谢您指出我有用的 .md 代码标签,我很感激!
  • 我也无法让它工作,但这很奇怪,因为颜色属性被列入白名单:github.com/github/markup/tree/master#html-sanitization
  • 我用了 ´´´´Deprecated´´´´。工作正常,用于将不推荐使用的标签添加到文档中。
  • 您可以使用```diff````语言标签来生成绿色和红色突出显示的文本。
  • @Bahman.A 我不这么认为。看到这个StackOverflow
【解决方案4】:

很遗憾,目前这是不可能的。

GitHub Markdown documentation 没有提及“颜色”、“CSS”、“HTML”或“样式”。

虽然一些 Markdown 处理器(例如 Ghost 中使用的那个)允许 HTML,例如 &lt;span style="color:orange;"&gt;Word up&lt;/span&gt;,但 GitHub 会丢弃任何 HTML。

如果您必须在自述文件中使用颜色,您的 README.md 文件可以简单地将用户引向 README.html 文件。对此的权衡当然是可访问性。

【讨论】:

  • 它一般不会丢弃 HTML,hrbrpbi 和其他都可以!
  • 如果您转发到 README.html,您可能希望在存储库中保留一份副本,这样您就不会丢失其提交历史记录。如果你觉得特别狡猾,你甚至可以将它包含在你的 gh-pages 中。
  • 查看jch/html-pipeline 的源代码,了解 GitHub 允许的实际 HTML 标签和属性。
  • 如果它概述了端到端模式,这个答案可能会更强大:使用 README.html.md 作为源代码,通过 Ghost 渲染到 README.html,这就是渲染的内容在 Github 页面上。 README.html 是默认显示,还是用户必须点击才能访问它?
  • 更新:我试过这个,但不幸的是端到端的故事是不可能的,因为 Github 不会自动呈现 README.html 文件;它显示为纯文本。这一定是您建议链接到它的原因。现在我更好地理解了您对“可访问性”的评论。
【解决方案5】:

作为渲染光栅图像的替代方法,您可以嵌入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

【讨论】:

    【解决方案6】:

    如果您可以接受这种有限的颜色和形状(尽管它们在不同的操作系统和浏览器中可能看起来不同),这些表情符号字符也很有用,这是 AlecRust's answer 的替代品,它需要外部服务有一天,我想使用来自Luke Hutchison's answer的表情符号:

    ???????⚫⚪??⭕

    ?????⬛⬜??⏹☑✅❎

    ❤️????????♥️????????❣️♡

    ??????♦????

    ????

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

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


    示例用法: This was my use case 已被这些表情符号解决(阅读此处的答案后想到的)


    此外,以下表情符号是肤色修饰符,仅在某些设备上具有这种矩形形状内的肤色。例如,在 Windows 中,它们甚至没有颜色。不要使用它们!因为它们不应该单独使用,所以它们应该与其他表情符号一起使用来修改其兄弟表情符号的输出。而且它们在单独使用时在不同的操作系统、版本、浏览器和版本组合中呈现的差异很大。

    ? ? ? ? ?

    【讨论】:

    • 这是一个巧妙的技巧!它不能解决最初导致我发布问题的语法高亮需求,但它可能可以解决各种其他需求。
    • 谢谢@DaveDopson ?
    • @Unicornist 仅供参考,我不知道为什么,但圆圈 2、3、4、6、7 不为我渲染,前 7 个方块和几个红心也没有
    【解决方案7】:

    我倾向于同意 with M-Pixel 的观点,即目前无法为 GitHub Markdown 内容中的文本指定颜色,至少不能通过 HTML。

    GitHub 确实允许一些 HTML 元素和属性,但只允许某些(参见他们的文档关于他们的HTML sanitization)。它们确实允许pdiv 标签,以及color 属性。但是,当我尝试在 GitHub 上的 Markdown 文档中使用它们时,它不起作用。我尝试了以下(以及其他变体),但它们不起作用:

    • &lt;p style='color:red'&gt;This is some red text.&lt;/p&gt;
    • &lt;font color="red"&gt;This is some text!&lt;/font&gt;
    • These are &lt;b style='color:red'&gt;red words&lt;/b&gt;.

    作为M-Pixel suggested,如果您真的必须使用颜色,您可以在 README.html 文件中执行此操作并将其引用。

    【讨论】:

    • 是的,不幸的是它在 Github 中不起作用,正如我的回答所述。
    • 查看jch/html-pipeline的源代码,了解GitHub允许的实际HTML标签和属性。
    【解决方案8】:

    在撰写本文时,GitHub Markdown 使用颜色预览呈现颜色代码,如 `#ffffff`(注意反引号!)。只需使用颜色代码并用反引号括起来。

    例如:

    变成

    【讨论】:

    • 我试过了,但它似乎不起作用。你能链接到一个例子吗?
    • 包括反引号,例如`#hexhex`
    • 这应该是公认的答案。很简单,不需要外部网站或 HTML。
    • 问题是如何给文字上色,这个没有解决。此外,.MD 文件不再支持此颜色预览。
    【解决方案9】:

    我使用表情符号 Unicode 字符为 GitHub 标记页面添加了一些颜色,例如 ? 或 ? -- 一些表情符号字符在某些浏览器中是彩色的。

    还有一些彩色的表情符号字母:血型?️?️?️;停车标志?️;地铁标志Ⓜ️;其他一些有两个或更多字母的,例如?,以及盒装数字,例如 0️⃣。如果旗帜不可用,旗帜表情符号将显示为字母(通常是彩色):?? ?? ?? ?? ?? ?? ?? ?? ?? ??。

    但是,我认为表情符号中没有定义完整的彩色字母表。

    【讨论】:

    • 什么是“编码”?你有(权威的)参考吗?你可以add它来回答你的答案(命名链接,而不是裸网址)吗? (但没有“编辑:”、“更新:”或类似的 - 问题/答案应该看起来好像是今天写的。)
    • @PeterMortensen Enicode 是一个错字——它应该说 Unicode,抱歉。 (已修复——我很确定您不需要对 emoji 字符的权威参考。)我的意思是,在大多数平台上,emoji 字符(编码为,例如 UTF-8)以彩色显示,甚至在纯黑白文本的中间。因此,您可以使用表情符号字符为文本添加颜色。
    【解决方案10】:

    基于AlecRust's idea,我做了一个PNG文本服务的实现。

    演示在这里:

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

    有四个参数:

    • 文本:要显示的字符串
    • 字体:未使用,因为在这个演示中我只有 Arial.ttf。
    • fontSize:一个整数(默认为 12)
    • 颜色:一个六字符的十六进制代码

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

    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 framework,则需要替换此行:

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

    使用此代码:

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

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

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

    【讨论】:

      【解决方案11】:
      【解决方案12】:

      以下是您可以编写彩色文本的代码:

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

      【讨论】:

      • 你在写一个标准的 HTML 标签,这对 GitHub 是行不通的......
      【解决方案13】:

      问题是“如何在 github 自述文件中为文本着色”
      这很难/不可能

      题外话:在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
      

      【讨论】:

      • 这被(被其他人)否决了,因为 Github 的 markdown 模块不支持该彩色 span 标签,但我喜欢自动转换的脚本。这将适用于 Ghost 降价解析器,或者如果 Github 曾经修复过 github.com/github/markup/issues/1440
      • here 是 github 上的一个演示。 &lt;span color="red"&gt;redtext&lt;/span&gt; 等确实在 github 上工作。我看到的唯一问题:无法设置背景颜色
      • 解释一下。例如,脚本在什么环境中运行 - 例如,“xclip”似乎高度依赖系统?在什么系统(包括版本)上进行了测试? Linux/Ubuntu?请通过editing (changing) your answer 回复,而不是在 cmets 中(without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。
      猜你喜欢
      • 2015-10-08
      • 1970-01-01
      • 2013-01-07
      • 2017-10-26
      • 2020-09-24
      • 2012-10-12
      • 2019-11-21
      相关资源
      最近更新 更多