GithubのREADME.mdファイルに色を追加する方法
私は自分のプロジェクト用のREADME.mdファイルを持っています nderscore-cli 、コマンドラインでJSONとJSをハックするためのとてもすばらしいツールです。
色をつける "--color"フラグを文書化したいのですが。私が実際に出力がどのように見えるかを示すことができれば、それはずっと良くなるでしょう。 README.mdに色を追加する方法が見つからないようです。何か案は？
私はこれを試してみました：
<span style="color: green"> Some green text </span>
この：
<font color="green"> Some green text </font>
これまでのところ運はありません。
プレースホルダーイメージサービスを使用してREADMEに色を追加できることを言及する価値があります。たとえば、参考のために色のリストを提供したい場合は、次のようにします。
-  `#f03c15`
-  `#c5f015`
-  `#1589F0`
を生成します。
#f03c15#c5f015#1589F0
diff言語タグを使用して、緑と赤の強調表示テキストを生成できます。
```diff
+ this will be highlighted in green
- this will be highlighted in red
```
Readmeでこれを使用する例は https://github.com/craigmichaelmartin/sql-toolkit に見ることができます。
GitHubのREADME.mdファイル内のプレーンテキストに色を付けることはできません。ただし、以下のタグを使用してコードサンプルに色を追加することができます。
これを行うには、これらのサンプルのようなタグをあなたのREADME.mdファイルに追加するだけです。
`` `json //色分け用のコード ` `` [ ] `` `html //色分け用のコード ] `` [ ] `` `js //彩色のためのコード ` `` [ `` ``彩色のためのコード// `` ` // etc。
"pre"や "code"タグは不要です。
これについては GitHub Markdownドキュメント （ページの半分くらい下に、Rubyを使った例があります）でカバーされています。 GitHubは Linguist を使用して構文を識別し、強調表示します - LinguistのYAMLファイル にはサポートされている言語の一覧（およびそのマークダウンキーワード）があります。
残念ながら、これは現在不可能です。
GitHub Markdown documentation は 'color'、 'css'、 'html'、 'style'については何も言及していません。
Markdownプロセッサの中には（例えば Ghost で使われているものなど）、<span style="color:orange;">Word up</span>のようなHTMLを許可するものがありますが、GitHubはどんなHTMLも破棄します。
READMEに色を使用することが必須の場合、README.mdは単にユーザーにREADME.htmlを参照させることができます。これとのトレードオフは、もちろん、アクセシビリティです。
私はQwertmanに同意するつもりだ。少なくともHTMLを通してではなく、GitHubのマークダウンでテキストの色を指定することは現在不可能だと思う。
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でそれをすることができてそれを参照することができます。
ラスタ画像をレンダリングする代わりに、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/95621a949b07db2950
絵文字のEnicode文字を使ってGitHubのマークアップページに色を追加しました。 ????または???? - ブラウザによっては絵文字が着色されているものがあります。 （私の知る限り、色付きの絵文字アルファベットはありません。）
@AlecRustのアイデアに基づいて、私はpngテキストサービスの実装をしました。
デモはこちらです。
http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World
4つのパラメータがあります。
- 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 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");
その場合、あなたの16進数の色は正確に6文字の長さでなければなりません（その前にハッシュ記号（＃）を置かないでください）。
注：最後に、このサービスを使用しませんでした。フォントが醜く、さらに悪いことに気付いたからです。テキストを選択することは不可能でした。しかし、この議論のために、このコードは共有する価値があると思いました...