Github의 README.md 파일에 색상을 추가하는 방법


308

나는이 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

1
마크 다운 파일의 텍스트에 아직 색상을 추가 할 수 없습니까?
Nam Nguyen

2
nope-

답변:


352

자리 표시 자 이미지 서비스를 사용하여 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 Web

4
내가 설명한 것은 효과가 있습니다. 이미지에 컬러 텍스트를 넣을 수도 있습니다.https://placehold.it/150/ffffff/ff0000?text=hello
AlecRust

백엔드에서 웹앱을 만들 때 유용한 유용한 정보입니다.
Tropicalrambler

193

diff언어 태그를 사용하여 컬러 텍스트를 생성 할 수 있습니다 .

```diff
- text in red
+ text in green
! text in orange
# text in gray
```

그러나 다음 중 하나로 시작하는 새로운 줄로 추가합니다. - + ! #

여기에 이미지 설명을 입력하십시오

이 문제는 github markup # 369 에서 제기 되었지만 그 이후 (2014) 이후 의사 결정에는 아무런 변화가 없습니다.


1
또한 색상의 텍스트는 포위 에 의해 @@보라색 (굵은)에서. Codecov 예를 들어, 자사의 GitHub의 통합 봇의 의견이 활용 : github.com/zeit/now/pull/2570#issuecomment-512585770
야곱 포드

79

GitHub README.md파일 에서 일반 텍스트를 채색 할 수 없습니다 . 그러나 아래 태그를 사용하여 코드 샘플에 색상을 추가 할 수 있습니다.

이렇게하려면 다음 샘플과 같은 태그를 README.md 파일에 추가하십시오.

```json
   // 채색 용 코드
```
```html
   // 채색 용 코드
```
```js
   // 채색 용 코드
```
```css
   // 채색 용 코드
```
// 등

"pre"또는 "code"태그가 필요하지 않습니다.

이것은 GitHub Markdown 문서 에서 다룹니다 (페이지의 절반 쯤에 루비를 사용하는 예가 있습니다). GitHub는 Linguist 를 사용하여 구문을 식별하고 강조 표시합니다 . Linguist의 YAML 파일 에서 지원되는 언어 (및 마크 다운 키워드)의 전체 목록을 찾을 수 있습니다 .


4
@NielsAbildgaard 감사합니다! :) 대답은 적어도 지금 GitHub .md 파일에서 일반 텍스트를 채색 할 수 없다는 것입니다. 나는 그 사실을 밝히고 연구하는데 약 4 시간을 보냈습니다. 어쨌든 도움이되는 .md 코드 태그를 지적 해 주셔서 감사합니다. 감사합니다!
초에 완전히 토탈

1
나는 중 하나 일 수 없었다,하지만 색상 속성이 허용 목록에 포함되어 있기 때문에이 이상 해요 : github.com/github/markup/tree/master#html-sanitization
dotMorten

@dotMorten 확실하지 않지만 Scott H의 게시물에 대한 마지막 의견을 내 위에 남겨 두려고 생각하십니까?
21:42에

1
나는 ´´´´ Deprecated´´´´를 사용했습니다 . 더 이상 사용되지 않는 태그를 문서에 추가하기 위해 잘 작동했습니다.
MRodrigues

4
```diff ''언어 태그를 사용하여 녹색 및 빨간색으로 강조 표시된 텍스트를 생성 할 수 있습니다.
craigmichaelmartin

42

불행히도 현재 불가능합니다.

GitHub의 마크 다운 문서는 '색상', 'CSS', 'HTML', 또는 '스타일'에 대한 언급이 없습니다.

일부 Markdown 프로세서 (예 : Ghost 에서 사용되는 프로세서 )는 HTML과 같은 HTML을 허용 <span style="color:orange;">Word up</span>하지만 GitHub는 HTML을 버립니다.

읽어보기에서 색상을 사용해야하는 경우 README.md는 단순히 사용자를 README.html로 참조 할 수 있습니다. 물론 이것의 단점은 접근성입니다.


11
그것은 일반적으로 HTML을 폐기하지 않는, hr, br, p, b, i및 다른 사람은 일을!
CodeManX

README.html로 전달하는 경우 커밋 히스토리를 잃지 않도록 저장소에 사본을 보관할 수 있습니다. 특히 교활한 느낌이 든다면 gh-page에 포함시킬 수도 있습니다.
Sandy Gifford

2
GitHub에서 허용하는 실제 HTML 태그 및 속성에 대해서는 jch / html-pipeline 의 소스 코드를 참조하십시오 .
Jason Antman

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/CyberShadow/95621a949b07db295000


20

Qwertman에 동의합니다. 현재 HTML을 사용하지 않고 GitHub 마크 다운에서 텍스트 색상을 지정할 수는 없습니다.

GitHub는 일부 HTML 요소 및 속성을 허용하지만 특정 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에서는 작동하지 않습니다.
Scott H

GitHub에서 허용하는 실제 HTML 태그 및 속성에 대해서는 jch / html-pipeline 의 소스 코드를 참조하십시오 .
Jason Antman

5

이모티콘 Enicode 문자 (예 : 💡 또는 🛑)를 사용하여 GitHub 마크 업 페이지에 색상을 추가했습니다. 일부 이모티콘 문자는 일부 브라우저에서 색상이 지정됩니다. (내가 아는 한 색이 지정된 이모티콘 알파벳이 없습니다.)


3

글을 쓰는 시점에서 Github Markdown은 `#ffffff`색상 미리보기로 색상 코드를 렌더링합니다 (백틱 참고!). 색상 코드를 사용하고 백틱으로 둘러 쌉니다.

예를 들면 다음과 같습니다.

색상 코드가있는 GitHub 마크 다운

된다

색상 코드로 렌더링 된 GitHub 마크 다운


5
나는 그것을 시도했지만 작동하지 않는 것 같습니다. 예제에 연결할 수 있습니까?
Dave Dopson

2
`#hexhex`
인용구

2

@AlecRust 아이디어를 기반으로 png 텍스트 서비스를 구현했습니다.

데모는 여기 있습니다 :

http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World

네 가지 매개 변수가 있습니다.

  • 텍스트 : 표시 할 문자열
  • font : 어쨌든이 데모에는 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.