我有一个自述文件。md文件用于我的项目underscore-cli，我想记录——color标志。
目前，做到这一点的唯一方法是截图(可以存储在项目存储库中):
但截图不是文本，防止读者复制/粘贴截图中的命令。创建/编辑/维护它们也很麻烦，而且浏览器加载速度较慢。现代网络使用文本样式，而不是一堆渲染的文本图像。
虽然一些Markdown解析器支持内联HTML样式，但GitHub不支持;这行不通:
<span style="color: green"> Some green text </span>
这行不通:
<font color="green"> Some green text </font>
当前回答
基于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");
在这种情况下，你的十六进制颜色必须恰好是六个字符长(不要在它前面放散列符号(#))。
注意:最后我没有使用这个服务，因为我发现字体很难看，而且更糟糕:无法选择文本。但是为了讨论的目的，我认为这段代码值得分享……
其他回答
你不能在GitHub README中为纯文本着色。md文件。但是，您可以使用下面的标记为代码示例添加颜色。
要做到这一点，只需添加标签，如这些示例到您的README。md文件:
```json // code for coloring ``` ```html // code for coloring ``` ```js // code for coloring ``` ```css // code for coloring ``` // etc.
不需要“pre”或“code”标签。
这在GitHub Markdown文档中有介绍(大约在页面的一半，有一个使用Ruby的示例)。GitHub使用Linguist来识别和突出显示语法-你可以在Linguist的YAML文件中找到支持语言的完整列表(以及它们的标记关键字)。
基于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");
在这种情况下，你的十六进制颜色必须恰好是六个字符长(不要在它前面放散列符号(#))。
注意:最后我没有使用这个服务，因为我发现字体很难看，而且更糟糕:无法选择文本。但是为了讨论的目的，我认为这段代码值得分享……
GitHub默默地增加了对> __Note__和> __Warning__语法的支持:
在问题、拉请求和讨论中，您可以使用反勾号在句子中显示颜色。反勾号内受支持的颜色模型将显示颜色的可视化。
参考:https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax # supported-color-models
不幸的是，这目前是不可能的。
GitHub Markdown文档没有提到“颜色”，“CSS”，“HTML”或“样式”。
而一些Markdown处理器(例如在Ghost中使用的)允许HTML，例如<span style="color:orange;>Word up</span>， GitHub's丢弃任何HTML。
如果你必须在自述中使用颜色，你的自述。md文件可以简单地将用户引用到README.html文件。当然，这样做的代价是可访问性。
