Как добавить цвет в файл README.md Github


309

У меня есть README.mdфайл для моего проекта underscore-cli , довольно приятный инструмент для взлома JSON и JS в командной строке.

Я хочу задокументировать --colorфлаг ... который ... раскрашивает вещи. Это было бы намного лучше, если бы я действительно мог показать, как выглядит результат. Кажется, я не могу найти способ добавить цвет к своему README.md. Любые идеи?

Я пробовал это:

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

И это:

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

Пока не повезло.


1
Если вы не можете раскрасить текст с помощью уценки, сработает ли встраивание скриншота?
girasquid

ДА. Я подумал об этом сразу после того, как отправил вопрос. Я думаю, что скриншот может быть моим лучшим ответом, хотя он явно не идеален.
Дейв Допсон,

1
так что пока невозможно добавить цвет к тексту в файле уценки?
Нам Нгуен

2
Нет - и его июль 2014 ffs
lfender6445

Ответы:


353

Стоит отметить, что вы можете добавить немного цвета в README, используя сервис изображений-заполнителей. Например, если вы хотите предоставить список цветов для справки:

- ![#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 #f03c15
  • # c5f015 #c5f015
  • # 1589F0 #1589F0

Это прекрасно работает в картах в рамках проекта GitHub, и их можно использовать для маркировки карт и их окраски
Зиад Акики

1
@BinarWeb, куда ты кладешь это? Будет работать на GitHub, например, который поддерживает изображения в Markdown.
AlecRust

3
когда вопрос задавался, я хотел раскрасить текст, чтобы не было изображения перед текстом
Binar Web

4
То, что я описал, работает. Вы также можете поместить цветной текст в изображение, напримерhttps://placehold.it/150/ffffff/ff0000?text=hello
AlecRust

Очень полезная информация, полезная при создании веб-приложений в бэкэнде.
Tropicalrambler

193

Вы можете использовать diffязыковой тег для создания цветного текста:

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

Тем не менее, он добавляет его как новую строку, начинающуюся либо с - + ! #или начинается и заканчивается@@

введите описание изображения здесь

Эта проблема была поднята в разметке github № 369 , но с тех пор они не вносили никаких изменений в решение (2014).


1
Он также цвета текста окружали по @@фиолетовым (и выделены жирным шрифтом). Codecov использует это в комментариях своего бота по интеграции с GitHub, например: github.com/zeit/now/pull/2570#issuecomment-512585770
Джейкоб Форд,

79

Вы не можете раскрасить обычный текст в README.mdфайле GitHub . Однако вы можете добавить цвет к образцам кода с помощью тегов ниже.

Для этого просто добавьте теги, подобные этим образцам, в файл README.md:

`` `JSON
   // код для раскраски
`` `
`` `` HTML
   // код для раскраски
`` `
`` `JS
   // код для раскраски
`` `
`` `CSS
   // код для раскраски
`` `
// и т.д.

Нет необходимости использовать теги pre или code.

Это описано в документации по GitHub Markdown (примерно на полпути вниз, есть пример использования Ruby). GitHub использует Linguist для идентификации и выделения синтаксиса - вы можете найти полный список поддерживаемых языков (а также их ключевые слова уценки) в файле YAML Linguist .


4
@NielsAbildgaard Спасибо! :) Ответ в том, что вы не можете раскрасить обычный текст в файлах GitHub .md по крайней мере в настоящее время. Я утверждал это и провел около 4 часов, исследуя это. В любом случае, спасибо за указание на мои полезные .md теги кода, я ценю это!
тотализатор

1
Я тоже не смог заставить его работать, но это странно, потому что атрибут color находится в белом списке: github.com/github/markup/tree/master#html-sanitization
dotMorten

@dotMorten не уверен, но я думаю, что вы хотели оставить свой последний комментарий к сообщению Скотта Х чуть выше моего?
тотализатор

1
Я использовал ´´´´ Deprecated´´´´. Работал нормально, для добавления тегов не рекомендуется в документы.
MRodrigues

4
Вы можете использовать языковой тег `` `diff```` для создания текста, выделенного зеленым и красным цветом.
Craigmichaelmartin

42

К сожалению, в настоящее время это невозможно.

В документации по GitHub Markdown нет упоминаний «color», «css», «html» или «style».

В то время как некоторые процессоры Markdown (например, тот, что используется в Ghost ) допускают HTML, например <span style="color:orange;">Word up</span>, GitHub отбрасывает любой HTML.

Если вы обязательно используете цвет в своем файле readme, ваш README.md может просто отослать пользователей к файлу README.html. Компромисс для этого, конечно, доступность.


11
Он не отказывается от HTML в целом hr, br, p, b, iи другие делают работу!
CodeManX

Если вы перешли к файлу README.html, вы можете захотеть сохранить его копию в репозитории, чтобы не потерять историю его фиксации. Если вы чувствуете себя особенно хитрым, вы можете даже включить его в свои gh-страницы.
Сэнди Гиффорд

2
См. Исходный код jch / html-pipe для фактических HTML-тегов и атрибутов, которые позволяет GitHub.
Джейсон Антман

21

В качестве альтернативы рендеринга растрового изображения вы можете встроить файл SVG:

<a><img src="http://dump.thecybershadow.net/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


20

Я склонен согласиться с Qwertman, что в настоящее время невозможно указать цвет для текста в уценке GitHub, по крайней мере, не через HTML.

GitHub допускает некоторые элементы и атрибуты HTML, но только определенные (см. Их документацию об их очистке HTML ). Они позволяют pи divтеги, а также colorатрибуты. Однако, когда я попытался использовать их в документе уценки на GitHub, это не сработало. Я попробовал следующее (среди других вариантов), и они не работали:

  • <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>.

Как предложил Qwertman, если вам действительно нужно использовать цвет, вы можете сделать это в файле README.html и сослаться на него.


6
Да, к сожалению, это не работает в Github, как говорится в моем ответе.
Скотт Х

См. Исходный код jch / html-pipe для фактических HTML-тегов и атрибутов, которые позволяет GitHub.
Джейсон Антман

5

Я добавил немного цвета на страницу разметки GitHub, используя символы эмодзи Enicode, например, 💡 или 🛑 - некоторые символы смайликов окрашены в некоторых браузерах. (Насколько я знаю, цветных алфавитов смайликов нет.)


3

На момент написания, Github Markdown отображает цветовые коды, такие как `#ffffff`(обратите внимание на черты!), С предварительным просмотром цветов. Просто используйте цветовой код и окружите его галочками.

Например:

GitHub уценка с цветовыми кодами

становится

визуализация GitHub уценки с цветовыми кодами


5
Я попробовал это, и это не похоже на работу. Можете ли вы дать ссылку на пример?
Дейв Допсон

2
Включая цитаты, вроде`#hexhex`
bwindels

2

Основываясь на идее @AlecRust, я реализовал текстовый сервис png.

Демо здесь:

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

Есть четыре параметра:

  • текст: строка для отображения
  • Шрифт: не использовать, потому что у меня есть только Arial.ttf в этом демо.
  • fontSize: целое число (по умолчанию 12)
  • цвет: шестнадцатеричный код из 6 символов

Пожалуйста, не используйте этот сервис напрямую (кроме тестирования), но используйте созданный мной класс, который предоставляет сервис:

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 webservice.
     *
     * 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 chars).
     *          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");

В этом случае ваш шестнадцатеричный цвет должен быть ровно 6 символов (не ставьте перед ним символ хеша (#)).

Примечание: в конце концов, я не использовал этот сервис, потому что я обнаружил, что шрифт был уродливым и хуже: не было возможности выделить текст. Но ради этой дискуссии я подумал, что этот код стоит поделиться ...

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.