GithubのREADME.mdファイルに色を追加する方法


309

私が持っているREADME.md私のプロジェクトのためのファイルアンダースコア-CLI、コマンドラインでJSONやJSをハッキングのためのかなり甘いツール。

私は--color旗を文書化したい...それは物事に色を付ける... 出力がどのように見えるかを実際に示すことができれば、はるかにうまくいきます。に色を追加する方法が見つからないようですREADME.md。何か案は?

私はこれを試しました:

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

この:

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

これまでのところ運がありません。


1
マークダウンでテキストに色を付けることができない場合、スクリーンショットを埋め込むことはできますか?
Girasquid

はい。私はこの質問を投稿した直後にそれを考えました。スクリーンショットが最善のフォールバックの答えになると思いますが、明らかに理想的ではありません。
Dave Dopson、2007

1
マークダウンファイルのテキストに色を追加することはまだ不可能ですか?
Nam Nguyen

2
いいえ、そして2014年7月のFFs
lfender6445

回答:


353

プレースホルダーイメージサービスを使用してREADMEに色を追加できることは言及に値します。たとえば、参照用に色のリストを提供したい場合は、次のようにします。

- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `#f03c15`
- ![#c5f015](https://via.placeholder.com/15/c5f015/000000?text=+) `#c5f015`
- ![#1589F0](https://via.placeholder.com/15/1589F0/000000?text=+) `#1589F0`

生成:

  • #f03c15 #f03c15
  • #c5f015 #c5f015
  • #1589F0 #1589F0

これはGitHubプロジェクト内のカードでうまく機能し、それらを使用してカードにタグを付けて色を付けることができます
Ziad Akiki

1
@BinarWebどこに置くの?Markdownの画像をサポートするGitHubなどで動作します。
AlecRust

3
質問は尋ねたとして、私は、テキストの前にイメージを持っていない、テキストに色をしたかった
Binarウェブ

4
私が説明したことはうまくいきます。画像に色付きのテキストを配置することもできます。例https://placehold.it/150/ffffff/ff0000?text=hello
AlecRust '28

バックエンドでWebアプリを作成するときに役立つ、非常に役立つ情報。
トロピカル

193

diff言語タグを使用して、色付きのテキストを生成できます。

```diff
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
```

ただし、これは、- + ! #またはで始まり、またはで終わる新しい行として追加されます。@@

ここに画像の説明を入力してください

この問題はgithubマークアップ#369で提起されましたが、それ以降(2014年)、決定に変更はありません。


1
また、囲ま@@たテキストに紫(および太字)で色を付けます。Codecovは、GitHub統合ボットのコメントでこれを利用しています。例:github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford

79

GitHub README.mdファイルではプレーンテキストに色を付けることはできません。ただし、以下のタグを使用して、コードサンプルに色を追加できます。

これを行うには、これらのサンプルなどのタグをREADME.mdファイルに追加します。

`` `json
   //色付けのコード
「」
`` `html
   //色付けのコード
「」
`` `js
   //色付けのコード
「」
`` `css
   //色付けのコード
「」
//など

「pre」または「code」タグは必要ありません。

これは、GitHub Markdownのドキュメントで説明されています(ページの半分ほど下、Rubyを使用した例があります)。GitHubは、Linguistを使用して構文を識別および強調表示します。サポートされている言語の完全なリスト(およびそれらのマークダウンキーワード)は、LinguistのYAMLファイルで確認できます


4
@NielsAbildgaardありがとうございます!:)答えは、少なくとも現時点では、GitHub .mdファイルのプレーンテキストに色を付けることはできないということです。私はそれを述べ、それを調査するのに約4時間を費やしました。とにかく、有用な.mdコードタグを指摘していただき、ありがとうございます。
14

1
動作させることもできませんでしたが、color属性がホワイトリストに登録されているため、奇妙です。github.com
github

@dotMortenわかりませんが、Scott Hの投稿に私の直前に最後のコメントを残すつもりだったと思いますか?
完全に驚くべき

1
私は´´´´´´´´を使用しましたDeprecated。ドキュメントに非推奨のタグを追加することで問題なく動作しました。
MRodrigues、2015

4
`` `diff````言語タグを使用して、緑と赤の強調表示されたテキストを生成できます。
craigmichaelmartin 16

42

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

GitHubの値下げのドキュメントは、「色」、「CSS」、「HTML」、または「スタイル」の言及がありません。

一部のMarkdownプロセッサ(Ghostで使用されているプロセッサなど)ではHTMLなどが許可されていますが<span style="color:orange;">Word up</span>、GitHubはすべてのHTMLを破棄します。

READMEで色を使用する必要がある場合は、README.mdでユーザーにREADME.htmlを参照させるだけです。もちろん、これに対するトレードオフはアクセシビリティです。


11
これは、一般的にHTMLを破棄していない、hrbrpbiそして他の人が仕事をします!
CodeManX

README.htmlに転送する場合は、そのコピーの履歴を失わないように、そのコピーをリポジトリに保存することをお勧めします。特にずるい場合は、GHページに含めることもできます。
Sandy Gifford 2016年

2
GitHubで許可されている実際のHTMLタグと属性については、jch / html-pipelineのソースコードを参照してください。
Jason Antman 2017

21

ラスターイメージをレンダリングする代わりに、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/Cyber​​Shadow/95621a949b07db295000


20

少なくともHTMLを介してではなく、GitHubマークダウンでテキストの色を現在指定することは現在不可能であるというQwertmanに同意する傾向があります。

GitHubは一部のHTML要素と属性を許可しますが、特定のもののみを許可します(HTMLのサニタイズに関するドキュメントを参照してください)。それらは属性と同様にpdivタグとタグを許可し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でそれを実行し、参照することができます。


6
ええ、残念ながら、私の回答にあるように、Githubでは機能しません。
スコットH

GitHubで許可されている実際のHTMLタグと属性については、jch / html-pipelineのソースコードを参照してください。
Jason Antman 2017

5

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


3

執筆時点では、Github Markdownは`#ffffff`(バックティックに注意!)のようなカラーコードをカラープレビューでレンダリングします。カラーコードを使用し、バッククォートで囲みます。

例えば:

色コード付きのGitHubマークダウン

なる

レンダリングされたGitHubマークダウンと色コード


5
私はそれを試しました、そしてそれはうまくいかないようです。例にリンクできますか?
Dave

2
次のようなバッククォートを含む`#hexhex`
ブウィンデル

2

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.