Cách thêm màu vào tệp README.md của Github


309

Tôi có một README.mdtệp cho dự án của tôi gạch dưới , một công cụ khá ngọt để hack JSON và JS trên dòng lệnh.

Tôi muốn ghi lại --colorlá cờ ... mà ... màu sắc mọi thứ. Điều đó sẽ tốt hơn rất nhiều nếu tôi thực sự có thể hiển thị đầu ra trông như thế nào. Tôi dường như không thể tìm ra cách để thêm màu sắc cho tôi README.md. Có ý kiến ​​gì không?

Tôi đã thử điều này:

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

Và điều này:

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

Không có may mắn cho đến nay.


1
Nếu bạn không thể tô màu văn bản của mình thông qua đánh dấu, việc nhúng ảnh chụp màn hình có hoạt động không?
girasquid

ĐÚNG. Tôi nghĩ về điều đó ngay sau khi tôi đăng câu hỏi này. Tôi nghĩ rằng ảnh chụp màn hình có thể là câu trả lời dự phòng tốt nhất của tôi, mặc dù rõ ràng nó không lý tưởng.
Dave Dopson

1
vì vậy vẫn chưa thể thêm màu vào văn bản trong tệp markdown?
Nam Nguyễn

2
không - và tháng bảy năm 2014 ffs
lfender6445

Câu trả lời:


353

Điều đáng nói là bạn có thể thêm một số màu trong README bằng dịch vụ giữ chỗ. Ví dụ: nếu bạn muốn cung cấp một danh sách các màu để tham khảo:

- ![#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`

Sản xuất:

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

Điều này hoạt động rất tốt trong Thẻ trong dự án GitHub và chúng có thể được sử dụng để gắn thẻ và tô màu cho chúng
Ziad Akiki

1
@BinarWeb bạn đang đặt cái này ở đâu? Sẽ hoạt động trên GitHub, ví dụ hỗ trợ hình ảnh trong Markdown.
AlecRust

3
Như câu hỏi, tôi muốn tô màu văn bản, không để hình ảnh phía trước văn bản
Binar Web

4
Những gì tôi đã mô tả công việc. Bạn cũng có thể đặt văn bản màu trong hình ảnh ví dụhttps://placehold.it/150/ffffff/ff0000?text=hello
AlecRust

Thông tin rất hữu ích, hữu ích khi tạo ứng dụng web trong phần phụ trợ.
Tropicalrambler

193

Bạn có thể sử dụng diffthẻ ngôn ngữ để tạo một số văn bản màu:

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

Tuy nhiên, nó thêm nó dưới dạng một dòng mới bắt đầu bằng - + ! #hoặc bắt đầu và kết thúc bằng@@

nhập mô tả hình ảnh ở đây

Vấn đề này đã được nêu ra trong đánh dấu github # 369 , nhưng họ đã không thực hiện bất kỳ thay đổi nào trong quyết định kể từ đó (2014).


1
Nó cũng màu sắc văn bản được bao quanh bởi @@màu tím (và đậm). Codecov tận dụng lợi thế này trong các nhận xét của bot tích hợp GitHub của mình, ví dụ: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford

79

Bạn không thể tô màu văn bản đơn giản trong README.mdtệp GitHub . Tuy nhiên, bạn có thể thêm màu vào các mẫu mã với các thẻ bên dưới.

Để làm điều này, chỉ cần thêm các thẻ như các mẫu này vào tệp README.md của bạn:

`` `json
   // mã để tô màu
`` `
`` `html
   // mã để tô màu
`` `
`` `js
   // mã để tô màu
`` `
`` `css
   // mã để tô màu
`` `
// Vân vân.

Không cần thẻ "trước" hoặc "mã".

Điều này được trình bày trong tài liệu GitHub Markdown (khoảng một nửa trang, có một ví dụ sử dụng Ruby). GitHub sử dụng Linguist để xác định và tô sáng cú pháp - bạn có thể tìm thấy một danh sách đầy đủ các ngôn ngữ được hỗ trợ (cũng như từ khóa đánh dấu của chúng) trong tệp YAML của nhà ngôn ngữ học .


4
@NielsAdildgaard Cảm ơn bạn! :) Câu trả lời là bạn không thể tô màu văn bản đơn giản trong các tệp GitHub .md ít nhất tại thời điểm này. Tôi đã nói điều đó và dành khoảng 4 giờ để nghiên cứu nó. Dù sao, cảm ơn bạn đã chỉ ra các thẻ mã .md hữu ích của tôi, tôi đánh giá cao nó!
tĩnh

1
Tôi cũng không thể làm cho nó hoạt động được, nhưng thật lạ vì thuộc tính màu được liệt kê trong danh sách trắng: github.com/github/markup/tree/master#html-sanitization
dotMorten

@dotMorten không chắc chắn nhưng tôi nghĩ bạn có ý định để lại bình luận cuối cùng của bạn về bài đăng của Scott H ngay phía trên tôi?
tĩnh

1
Tôi đã sử dụng ạc trong phần Deprecatedmềm của bạn Hoạt động tốt, để thêm các thẻ không dùng vào tài liệu.
MRodrigues

4
Bạn có thể sử dụng thẻ ngôn ngữ `` `diff```` để tạo văn bản được tô sáng màu xanh lá cây và màu đỏ.
craigmichaelmartin

42

Thật không may, điều này hiện không thể.

Các tài liệu GitHub Markdown không có đề cập đến 'màu', 'css', 'html', hoặc 'phong cách'.

Mặc dù một số bộ xử lý Markdown (ví dụ: bộ xử lý được sử dụng trong Ghost ) cho phép HTML, chẳng hạn như <span style="color:orange;">Word up</span>, GitHub sẽ loại bỏ bất kỳ HTML nào.

Nếu bắt buộc bạn phải sử dụng màu sắc trong readme của mình, thì README.md của bạn có thể chỉ cần giới thiệu người dùng đến README.html. Tất nhiên, sự đánh đổi cho điều này là khả năng tiếp cận.


11
Nó không loại bỏ HTML nói chung, hr, br, p, b, ivà những người khác làm việc!
CodeManX

Nếu bạn chuyển tiếp tới README.html, bạn có thể muốn giữ một bản sao của nó trong kho lưu trữ để bạn không bị mất lịch sử cam kết của nó. Nếu bạn cảm thấy đặc biệt ranh mãnh, bạn thậm chí có thể đưa nó vào trang gh của mình.
Sandy Gifford

2
Xem mã nguồn của jch / html-pipe để biết các thẻ và thuộc tính HTML thực tế mà GitHub cho phép.
Jason Antman

21

Thay thế cho việc hiển thị hình ảnh raster, bạn có thể nhúng tệp SVG:

<a><img src="http://dump.thecybershadow.net/6c736bfd11ded8cdc5e2bda009a6694a/colortext.svg"/></a>

Sau đó, bạn có thể thêm văn bản màu vào tệp SVG như bình thường:

<?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>

Thật không may, mặc dù bạn có thể chọn và sao chép văn bản khi mở .svgtệp, văn bản không thể chọn được khi hình ảnh SVG được nhúng.

Bản trình diễn: https://gist.github.com/CyberShadow/95621a949b07db295000


20

Tôi có khuynh hướng đồng ý với Qwertman rằng hiện tại không thể chỉ định màu cho văn bản trong đánh dấu GitHub, ít nhất là không thông qua HTML.

GitHub không cho phép một số thành phần và thuộc tính HTML, nhưng chỉ một số thuộc tính nhất định (xem tài liệu của họ về vệ sinh HTML ). Họ cho phép pdivthẻ, cũng như colorthuộc tính. Tuy nhiên, khi tôi thử sử dụng chúng trong tài liệu đánh dấu trên GitHub, nó không hoạt động. Tôi đã thử các cách sau (trong số các biến thể khác) và chúng không hoạt động:

  • <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>.

Như Qwertman đã đề xuất, nếu bạn thực sự phải sử dụng màu sắc, bạn có thể thực hiện nó trong README.html và giới thiệu chúng với nó.


6
Vâng, thật không may, nó không hoạt động trong Github, như câu trả lời của tôi.
Scott H

Xem mã nguồn của jch / html-pipe để biết các thẻ và thuộc tính HTML thực tế mà GitHub cho phép.
Jason Antman

5

Tôi đã thêm một số màu vào trang đánh dấu GitHub bằng ký tự biểu tượng cảm xúc Enicode, ví dụ hoặc - một số ký tự biểu tượng cảm xúc được tô màu trong một số trình duyệt. (Không có bảng chữ cái biểu tượng cảm xúc màu như tôi biết.)


3

Khi viết, Github Markdown hiển thị mã màu như `#ffffff`(lưu ý các backticks!) Với bản xem trước màu. Chỉ cần sử dụng mã màu và bao quanh nó bằng backticks.

Ví dụ:

Đánh dấu GitHub với mã màu

trở thành

kết xuất đánh dấu GitHub bằng mã màu


5
Tôi đã thử điều đó, và nó dường như không hoạt động. Bạn có thể liên kết đến một ví dụ?
Dave Dopson

2
Bao gồm các backquote, như`#hexhex`
bwindels

2

Dựa trên ý tưởng @AlecRust, tôi đã thực hiện dịch vụ văn bản png.

Bản demo ở đây:

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

Có bốn tham số:

  • văn bản: chuỗi để hiển thị
  • font: không sử dụng vì dù sao tôi chỉ có Arial.ttf trên bản demo này.
  • fontSize: một số nguyên (mặc định là 12)
  • màu: mã thập lục phân 6 ký tự

Vui lòng không sử dụng dịch vụ này trực tiếp (trừ kiểm tra), nhưng sử dụng lớp tôi đã tạo cung cấp dịch vụ:

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);
    }
}

Lưu ý: nếu bạn không sử dụng khung vũ trụ , bạn sẽ cần thay thế dòng này:

$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);

Với mã này:

$rgbColors = sscanf($hexColor, "%02x%02x%02x");

Trong trường hợp đó, màu hex của bạn phải dài chính xác 6 ký tự (không đặt biểu tượng băm (#) phía trước nó).

Lưu ý: cuối cùng, tôi đã không sử dụng dịch vụ này, vì tôi thấy rằng phông chữ đó xấu và tệ hơn: không thể chọn văn bản. Nhưng vì lợi ích của cuộc thảo luận này, tôi nghĩ rằng mã này đáng để chia sẻ ...

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.