README.mdプロジェクトunderscore-cliのファイルがあり、--colorフラグを文書化したいと考えています。
現在、これを行う唯一の方法は、スクリーンショットを使用することです (プロジェクト リポジトリに保存できます)。
ただし、スクリーンショットはテキストではないため、読者はスクリーンショットのコマンドをコピーして貼り付けることができません。また、作成、編集、保守が面倒で、ブラウザーの読み込みが遅くなります。最新の Web では、レンダリングされた一連のテキスト イメージではなく、テキスト スタイルが使用されます。
一部の Markdown パーサーはインライン HTML スタイルをサポートしていますが、GitHub はサポートしていません。これは機能しません:
<span style="color: green"> Some green text </span>
これは機能しません:
<font color="green"> Some green text </font>
README に色を追加する 1 つの方法は、プレースホルダー イメージを提供するサービスを利用することです。
たとえば、この Markdown を使用できます。
-  `#f03c15`
-  `#c5f015`
-  `#1589F0`
好きな色のリストを作成するには:
#f03c15#c5f015#1589F0difflanguage タグを使用して、色付きのテキストを生成できます。
```diff
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
```
ただし、どちらかで始まる新しい行として追加します- + ! #or で始まり、終わります@@
この問題はGitHub マークアップ #369で提起されましたが、それ以降 (2014 年) 決定に変更はありません。
残念ながら、これは現在不可能です。
GitHub Markdownのドキュメントには、「色」、「CSS」、「HTML」、または「スタイル」についての言及はありません。
一部の Markdown プロセッサ ( Ghostで使用されているものなど) は などの HTML を許可しますが<span style="color:orange;">Word up</span>、GitHub は HTML をすべて破棄します。
readme で色を使用することがどうしても必要な場合は、README.mdファイルでユーザーにREADME.htmlファイルを参照させるだけで済みます。もちろん、これとのトレードオフはアクセシビリティです。
GitHub Markdown コンテンツのテキストの色を指定することは、少なくとも HTML では現在不可能であるというM-Pixelに同意する傾向があります。
GitHub は一部の HTML 要素と属性を許可していますが、特定のもののみを許可しています ( HTML サニタイズに関するドキュメントを参照してください)。それらは属性と同様にタグを許可pします。しかし、GitHub の Markdown ドキュメントで使用しようとすると、うまくいきませんでした。私は（他のバリエーションの中で）以下を試しましたが、うまくいきませんでした：divcolor
<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>.M-Pixel が提案したように、本当に色を使用する必要がある場合は、README.htmlファイルでそれを行い、それを参照することができます。
AlecRust のアイデアに基づいて、PNG テキスト サービスの実装を行いました。
デモはここにあります：
http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World
次の 4 つのパラメータがあります。
このサービスを直接使用しないでください（テストを除く）が、サービスを提供する私が作成したクラスを使用してください。
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);
}
}
注:ユニバース フレームワークを使用しない場合は、次の行を置き換える必要があります。
$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);
このコードで：
$rgbColors = sscanf($hexColor, "%02x%02x%02x");
その場合、16 進数の色は正確に 6 文字の長さでなければなりません (先頭にハッシュ記号 (#) を付けないでください)。
注: 最終的に、このサービスを使用しませんでした。フォントが見苦しく、テキストを選択できなかったからです。しかし、この議論のために、このコードは共有する価値があると思いました...
質問に対する正確な答えではないかもしれませんが、OPの状況にあったとき、以下の解決策を探していました:
以下で簡単に完了:
[](https://github.com/hamzamohdzubair/redant)
[](https://hamzamohdzubair.github.io/redant/)
[](https://docs.rs/crate/redant/latest)
[](https://crates.io/crates/redant)
[](https://lib.rs/crates/redant)