У меня есть файл README.md для моего проекта underscore-cli, довольно милого инструмента для взлома JSON и JS в командной строке.
Я хочу задокументировать флаг "--color"... который... окрашивает вещи. Это было бы намного лучше, если бы я мог показать, как выглядит результат. Я не могу найти способ добавить цвет в README.md. Есть идеи?
Я пробовал следующее:
<span style="color: green"> Some green text </span>
И это:
<font color="green"> Some green text </font>
Пока безрезультатно.
Это's стоит отметить, что вы можете добавить некоторые цвета в ридми, используя заполнитель сервиса изображений. Например, если вы хотите обеспечить списка цветов Для справки:
- ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`
- ![#c5f015](https://placehold.it/15/c5f015/000000?text=+) `#c5f015`
- ![#1589F0](https://placehold.it/15/1589F0/000000?text=+) `#1589F0`
Производит:
#f03c15
#c5f015
#1589F0
Вы можете использовать тег языка различия
, чтобы создать цветной текст:
```diff
- text in red
+ text in green
! text in orange
# text in gray
Однако, он добавляет его в качестве новой строки, начинающиеся с `- + ! #`
[![Введите описание изображения здесь][1]][1]
Этот вопрос был поднят в [гитхаб разметки, #369][2], но они не'т сделано внесения изменений в решение с тех пор (2014).
[1]: https://i.stack.imgur.com/0buxS.png
[2]: https://github.com/github/markup/issues/369
Вы не можете окрасить обычный текст в файле GitHub README.md
. Однако вы можете добавить цвет к примерам кода с помощью приведенных ниже тегов.
Для этого просто добавьте в свой файл README.md теги, подобные этим примерам:
``json // код для раскрашивания ``` ``html // код для раскрашивания ``` ``js // код для раскраски ``` ```css // код для раскрашивания ``` // и т.д.
Теги "pre" или "code" не нужны.
Это описано в документации GitHub Markdown (примерно в середине страницы есть пример с использованием Ruby). GitHub использует Linguist для определения и выделения синтаксиса - полный список поддерживаемых языков (а также их ключевых слов для разметки) вы можете найти в Linguist's YAML file.
К сожалению, в настоящее время это невозможно.
В GitHub Markdown documentation нет упоминаний о 'цвете', 'css', 'html' или 'стиле'.
Хотя некоторые процессоры Markdown (например, используемый в Ghost) допускают HTML, например <span style="color:orange;">Word up</span>
, GitHub'ы отбрасывают любой HTML.
Если вам крайне необходимо использовать цвет в readme, ваш README.md может просто отсылать пользователей к README.html. Компромиссом за это, конечно, является доступность.
Я склонен согласиться с Qwertman, что в настоящее время невозможно задать цвет для текста в GitHub markdown, по крайней мере, не через HTML.
GitHub разрешает некоторые элементы и атрибуты HTML, но только некоторые (см. документацию по HTML sanitization). Они разрешают теги p
и div
, а также атрибут color
. Однако, когда я попытался использовать их в документе в формате markdown на GitHub, это не сработало. Я попробовал следующие варианты (среди прочих вариаций), и они не сработали:
<p style='color:red'>This is some red text.</p>
<font color="red">Это какой-то текст!</font>
.Это <b style='color:red'>красные слова</b>.
Как предложил Qwertman, если вы действительно должны использовать цвет, вы можете сделать это в README.html и сослаться на него.
В качестве альтернативы для перевода растрового изображения, вы можете встроить файл 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
Я добавил некоторые цвета на странице разметки на GitHub, используя смайлики Enicode символы, например 💡 или 🛑 - некоторые Emoji символы окрашены в некоторых браузерах. (Там насколько я знаю, хоть и не цветные смайлики буквы.)
Как писать, на GitHub уценки оказывает `#hexhex
` с цветным предварительного просмотра.
На основе @идея AlecRust, я сделал реализации png текстовые службы.
Демо здесь:
http://lingtalfi.com/services/pngtext?color=cc0000&размер=10&текст=Привет%20World
Существуют четыре параметра:
Пожалуйста, не используйте эту услугу напрямую (за исключением тестирования), но использовать класс, который я создал, который предоставляет услугу:
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);
}
}
Внимание: если вы Don'т использовать основа Вселенной, вы должны заменить эту строку:
$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);
С помощью этого кода:
$rgbColors = sscanf($hexColor, "%02x%02x%02x");
В этом случае шестигранный цвет должен быть ровно 6 символов длиной (Дон'т поставить хэш-символ (#) перед ней).
Примечание: в конце концов, я не пользовалась этой услугой, потому что я обнаружил, что шрифт был уродливым и хуже: не было возможности для выделения текста. Но ради этой дискуссии я думал, что этот код стоит поделиться...