Github'のREADME.mdファイルに色をつける方法

私のプロジェクト underscore-cli の README.md ファイルは、コマンドラインで JSON と JS をハックするためのかなり甘いツールです。

私は "--color" フラグを文書化したい...それは...物事を着色する。 出力がどのように見えるかを実際に示すことができれば、それはもっとうまくいくでしょう。 README.mdに色をつける方法が見つかりません。 何かアイデアはありますか?

試してみました':

<span style="color: green"> Some green text </span>

そして、これです:

<font color="green"> Some green text </font>

今のところ運がない。

質問へのコメント (7)

プレースホルダー画像サービスを使用して、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

解説 (7)

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。
解説 (1)

GitHub の README.md ファイルにあるプレーンテキストに色をつけることはできません。しかし、以下のタグを使えば、コードサンプルに色をつけることができます。

README.mdファイルに以下のようなタグを追加するだけです:

解説 (12)

残念ながら、現在は不可能です。

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をユーザーに紹介すればいいのです。もちろん、この代償として、アクセシビリティがあります。

解説 (3)

私はQwertmanと同意見で、GitHubのマークダウンでテキストの色を指定することは、少なくともHTMLでは現在不可能だと考えています。

GitHubはいくつかのHTML要素や属性を許可していますが、それは特定のものだけです(HTMLサニタイズに関する彼らのドキュメントを参照してください)。pタグやdivタグ、そしてcolor`属性は許可されています。しかし、GitHubのマークダウン・ドキュメントでこれらを使ってみたところ、うまくいきませんでした。以下のように(他のバリエーションも含めて)試してみたが、うまくいかなかった:

  • <p style='color:red'>This is some red text.</p>.
  • This is some text!.
  • lt;b style='color:red'>red words. である。

Qwertmanが提案したように、どうしても色を使いたいのであれば、README.htmlに書いて、それを参照させればよいでしょう。

解説 (2)

ラスター画像をレンダリングする代わりに、SVGファイルを埋め込むことができます。

<a></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"
>

    Hello,
    world!

</svg>

残念ながら、「。svg」ファイルを開くときにテキストを選択してコピーすることはできますが、SVGイメージが埋め込まれている場合、テキストは選択できません。

デモ:https://gist.github.com/CyberShadow/95621a949b07db295000

解説 (0)

絵文字Enicode文字を使用してGitHubマークアップページに色を追加しました。 💡または🛑 -一部の絵文字は一部のブラウザーで色付けされています。 (私が知る限り、色付きの絵文字アルファベットはありません。)。

解説 (0)

執筆時点で、Github Markdownはカラープレビューで「#hexhex」をレンダリングします。

解説 (2)

@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文字でなければなりません(ハッシュシンボル(#)をその前に置かないでください)。

注:フォントが醜く、より悪いことが判明したため、結局、このサービスを使用しませんでした。テキストを選択することができませんでした。 しかし、この議論のために、このコードは共有する価値があると思いました。..

解説 (0)