Як додати колір до файлу README.md Github


308

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

Я хочу документувати --colorпрапор ... який ... забарвлює речі. Це пішло б набагато краще, якби я міг показати, як виглядає вихід. Я не можу знайти спосіб додати колір до свого README.md. Будь-які ідеї?

Я спробував це:

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

І це:

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

Поки не пощастило.


1
Якщо ви не в змозі розфарбувати текст за допомогою розмітки, вбудували б роботу екрана?
girasquid

ТАК. Я подумав про це відразу після того, як я опублікував це питання. Я думаю, що скріншот може бути моєю найкращою резервною відповіддю, хоча це явно не ідеально.
Дейв Допсон

1
тож ще не можливо додати колір тексту до файлу розмітки?
Нам Нгуєн

2
nope - і його липня 2014 ffs
lfender6445

Відповіді:


352

Варто зазначити, що ви можете додати деякий колір у 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, і їх можна використовувати для тегування карт та їх забарвлення
Ziad Akiki

1
@BinarWeb куди це ставиш? Працює над GitHub, наприклад, який підтримує зображення в Markdown.
AlecRust

3
як запитувало запитання, я хотів розфарбувати текст, а не мати зображення перед текстом
Бінар Веб

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
```

Однак він додає його як новий рядок, починаючи з будь-якого - + ! #

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

Цю проблему піднімали в розмітці github № 369 , але вони не змінили рішення у той час (2014).


1
Він також кольору тексту оточували по @@фіолетовим (і виділені жирним шрифтом). Codecov користується цим у коментарях бота для інтеграції GitHub, наприклад: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford

79

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

Для цього просто додайте такі теги, як ці зразки, у ваш файл README.md:

`` `json
   // код для фарбування
`` `
`` `html
   // код для фарбування
`` `
`` `js
   // код для фарбування
`` `
`` `css
   // код для фарбування
`` `
// тощо.

Не потрібні теги "до" або "код".

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


4
@NielsAbildgaard Дякую! :) Відповідь полягає в тому, що ви не можете забарвити звичайний текст у файлах GitHub .md хоча б в цей час. Я це заявив і витратив на дослідження близько 4 годин. У будь-якому випадку дякую, що вказали на мої корисні .md кодові теги, я ціную це!
totaltotallyamazing

1
Я також не міг змусити його працювати, але це дивно, тому що атрибут кольору є дозволеним: github.com/github/markup/tree/master#html-sanitization
dotMorten

@dotMorten не впевнений, але я думаю, ти мав намір залишити свій останній коментар до поста Скотта Н трохи вище мого?
totaltotallyamazing

1
Я використовував ´´´´ Deprecated´´´´. Працював чудово, для додавання тегів, які застаріли в документах.
MRodrigues

4
Ви можете використовувати тег мови `` diff``` для створення зеленого та червоного виділеного тексту.
craigmichaelmartin

42

На жаль, наразі це неможливо.

У документації на GitHub Markdown немає згадок про "колір", "css", "html" або "стиль".

Хоча деякі процесори 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-pipeline щодо фактичних тегів та атрибутів 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-pipeline щодо фактичних тегів та атрибутів HTML, які дозволяє GitHub.
Джейсон Антман

5

Я додав колір на сторінку розмітки GitHub за допомогою символів Ejiode 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.