私のプロジェクト underscore-cli の README.md ファイルは、コマンドラインで JSON と JS をハックするためのかなり甘いツールです。
私は "--color" フラグを文書化したい...それは...物事を着色する。 出力がどのように見えるかを実際に示すことができれば、それはもっとうまくいくでしょう。 README.mdに色をつける方法が見つかりません。 何かアイデアはありますか?
試してみました':
<span style="color: green"> Some green text </span>
そして、これです:
<font color="green"> Some green text </font>
今のところ運がない。
プレースホルダー画像サービスを使用して、READMEに色を追加できることは、言及する価値があります。 たとえば、参照する色のリストを提供したい場合:
- ![#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](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
。
diff
言語タグを使用して、いくつかの色付きのテキストを生成できます。
```diff
- text in red
+ text in green
! text in orange
# text in gray
ただし、 `-+で始まる新しい行として追加します。 ! #`。
[。![ここに画像の説明を入力してください][1]][1]。
この問題は[github markup#369][2]で提起されましたが、それ以降(2014年)、決定に変更はありません。
[1]:https://i.stack.imgur.com/0buxS.png。
[2]:https://github.com/github/markup/issues/369。
GitHub の README.md
ファイルにあるプレーンテキストに色をつけることはできません。しかし、以下のタグを使えば、コードサンプルに色をつけることができます。
README.mdファイルに以下のようなタグを追加するだけです: <pre>; ``json // 着色のためのコード
html
// 着色のためのコード
js // 着色のためのコード
``css
// 着色のためのコード
// などです。 </pre>;
quot;pre"やquot;code"のタグは必要ありません。
これは GitHub Markdown documentation に書かれています(ページの半分くらいに、Rubyを使った例があります)。 GitHubは構文の識別とハイライトにLinguistを使用しています。サポートされている言語(とそのマークダウンキーワード)の全リストはLinguist's YAML file で見ることができます。
残念ながら、現在は不可能です。
GitHub Markdownドキュメント](https://help.github.com/articles/github-flavored-markdown)には、 'color', 'css', 'html', 'style' の記述がない。
Markdownプロセッサ(例えばGhostで使われているもの)の中には、<span style="color:orange;">Word up</span>
のように、HTMLを使えるものもありますが、GitHub'ではHTMLを一切捨てています。
もし、Readmeに色を使うことが必須であれば、README.mdは単にREADME.htmlをユーザーに紹介すればいいのです。もちろん、この代償として、アクセシビリティがあります。
私は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>
.lt;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/95621a949b07db295000。
絵文字Enicode文字を使用してGitHubマークアップページに色を追加しました。 💡または🛑 -一部の絵文字は一部のブラウザーで色付けされています。 (私が知る限り、色付きの絵文字アルファベットはありません。)。
@AlecRustのアイデアに基づいて、pngテキストサービスの実装を行いました。
デモはこちらです。
http://lingtalfi.com/services/pngtext?color = cc0000& size = 10& text = Hello%20World。
4つのパラメーターがあります。
-テキスト:表示する文字列。 -フォント:このデモではとにかく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文字でなければなりません(ハッシュシンボル(#)をその前に置かないでください)。
注:フォントが醜く、より悪いことが判明したため、結局、このサービスを使用しませんでした。テキストを選択することができませんでした。 しかし、この議論のために、このコードは共有する価値があると思いました。..