วิธีเพิ่มสีให้กับไฟล์ README.md ของ Github


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
หากคุณไม่สามารถทำให้สีข้อความของคุณผ่าน markdown ได้การฝังภาพหน้าจอจะใช้งานได้หรือไม่
girasquid

ใช่. ฉันคิดว่าหลังจากฉันโพสต์คำถามนี้ ฉันคิดว่าภาพหน้าจออาจเป็นคำตอบทางเลือกที่ดีที่สุดของฉันถึงแม้ว่ามันจะไม่ชัดเจนก็ตาม
Dave Dopson

1
ดังนั้นจึงเป็นไปไม่ได้ที่จะเพิ่มสีให้กับข้อความในไฟล์มาร์กดาวน์?
น้ำเหงียน

2
ไม่ - และกรกฎาคม 2014 ffs
lfender6445

คำตอบ:


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 คุณวางที่ไหน จะทำงานกับ GitHub เช่นซึ่งสนับสนุนรูปภาพใน Markdown
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 # 369แต่พวกเขาไม่ได้ทำการเปลี่ยนแปลงใด ๆ ในการตัดสินใจตั้งแต่นั้นมา (2014)


1
นอกจากนี้ยังมีข้อความสีล้อมรอบด้วย@@สีม่วง (และตัวหนา) Codecov ใช้ประโยชน์จากสิ่งนี้ในความคิดเห็นของบอทการรวม GitHub ตัวอย่างเช่น: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford

79

คุณไม่สามารถสีข้อความธรรมดาในREADME.mdไฟล์GitHub อย่างไรก็ตามคุณสามารถเพิ่มสีให้กับตัวอย่างโค้ดด้วยแท็กด้านล่าง

โดยเพิ่มแท็กเช่นตัวอย่างเหล่านี้ลงในไฟล์ README.md ของคุณ:

`` `JSON
   // รหัสสำหรับการระบายสี
`` `
`` `HTML
   // รหัสสำหรับการระบายสี
`` `
`` `js
   // รหัสสำหรับการระบายสี
`` `
`` `CSS
   // รหัสสำหรับการระบายสี
`` `
// เป็นต้น

ไม่จำเป็นต้องใช้แท็ก "pre" หรือ "code"

สิ่งนี้จะกล่าวถึงในเอกสาร GitHub Markdown (ประมาณครึ่งหน้ามีตัวอย่างโดยใช้ Ruby) GitHub ใช้ภาษาศาสตร์ในการระบุและไวยากรณ์ไฮไลท์ - คุณสามารถพบรายการเต็มรูปแบบของภาษาที่สนับสนุน (เช่นเดียวกับคำหลัก markdown ของพวกเขา) มากกว่าในไฟล์ YAML ภาษาศาสตร์ของ


4
@NielsAbildgaard ขอบคุณ! :) คำตอบคือคุณไม่สามารถสีข้อความธรรมดาในไฟล์ GitHub .md อย่างน้อยตอนนี้ ฉันระบุว่าและใช้เวลาประมาณ 4 ชั่วโมงในการค้นคว้า อย่างไรก็ตามขอขอบคุณที่ชี้ให้เห็นว่าแท็กรหัส. md ที่เป็นประโยชน์ของฉันฉันขอขอบคุณ!
สิ้นเชิงน่าทึ่ง

1
ฉันไม่สามารถทำให้มันทำงานได้ แต่มันแปลกเพราะคุณสมบัติสีเป็นรายการที่อนุญาต: github.com/github/markup/tree/master#html-sanitization
dotMorten

@dotMorten ไม่แน่ใจ แต่ฉันคิดว่าคุณตั้งใจจะฝากความคิดเห็นล่าสุดไว้ในโพสต์ของ Scott H เหนือของฉันเหรอ?
สิ้นเชิงน่าทึ่ง

1
ฉันใช้Deprecated´´´´´´´´ ทำงานได้ดีสำหรับการเพิ่มแท็กที่คัดค้าน docs
MRodrigues

4
คุณสามารถใช้แท็กภาษา `` `diff` '' '' เพื่อสร้างข้อความที่เน้นสีเขียวและสีแดง
craigmichaelmartin

42

น่าเสียดายที่ตอนนี้ไม่สามารถทำได้

เอกสาร GitHub Markdownมีการเอ่ยถึง 'สี', 'CSS', 'HTML' หรือ 'สไตล์' ไม่

ในขณะที่ตัวประมวลผล Markdown บางตัว (เช่นตัวที่ใช้ในGhost ) อนุญาตสำหรับ HTML เช่น<span style="color:orange;">Word up</span>GitHub จะละทิ้ง HTML ใด ๆ

หากมีความจำเป็นที่คุณต้องใช้สีใน readme ของคุณ README.md ของคุณสามารถอ้างอิงผู้ใช้ไปยัง README.html ได้ การแลกเปลี่ยนสำหรับสิ่งนี้แน่นอนคือการเข้าถึงได้ง่าย


11
มันไม่ได้ทิ้ง HTML ทั่วไปhr, br, p, b, iและคนอื่น ๆ ทำผลงาน!
CodeManX

หากคุณส่งต่อไปยัง README.html คุณอาจต้องการเก็บสำเนาไว้ในที่เก็บเพื่อที่คุณจะได้ไม่เสียประวัติการส่งมอบ หากคุณรู้สึกว่ามีเลศนัยเป็นพิเศษคุณสามารถรวมไว้ใน gh-pages ของคุณ
Sandy Gifford

2
ดูซอร์สโค้ดของjch / html-pipelineสำหรับแท็ก HTML และแอตทริบิวต์ที่ GitHub อนุญาต
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 ว่าขณะนี้ยังไม่สามารถระบุสีสำหรับข้อความในการทำเครื่องหมาย GitHub อย่างน้อยต้องไม่ผ่าน HTML

GitHub อนุญาตให้ใช้องค์ประกอบและแอตทริบิวต์ HTML บางอย่าง แต่มีเพียงบางองค์ประกอบเท่านั้น (ดูเอกสารประกอบเกี่ยวกับการฆ่าเชื้อ HTML ) พวกเขาอนุญาตpและdivแท็กตลอดจนcolorคุณลักษณะ อย่างไรก็ตามเมื่อฉันลองใช้พวกเขาในเอกสาร markdown บน 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

ดูซอร์สโค้ดของjch / html-pipelineสำหรับแท็ก HTML และแอตทริบิวต์ที่ GitHub อนุญาต
Jason Antman

5

ฉันเพิ่มสีลงในหน้ามาร์กอัป GitHub โดยใช้ตัวอักษรอีโมจิ Enicode เช่น💡หรือ🛑 - ตัวอักษรอีโมจิบางตัวมีสีในเบราว์เซอร์บางตัว (ไม่มีอิโมจิตัวอักษรสีเท่าที่ฉันรู้ว่า)


3

ในขณะที่เขียน Github Markdown จะแสดงรหัสสีเช่น`#ffffff`(จดบันทึก backticks!) พร้อมตัวอย่างสี เพียงใช้รหัสสีและล้อมรอบด้วย backticks

ตัวอย่างเช่น:

GitHub markdown พร้อมรหัสสี

กลายเป็น

เรนเดอร์ GitHub ที่แสดงผลด้วยรหัสสี


5
ฉันลองมันแล้วดูเหมือนจะไม่ทำงาน คุณสามารถลิงค์ไปยังตัวอย่างได้หรือไม่?
Dave Dopson

2
รวมถึง backquotes เช่น`#hexhex`
bwindels

2

จากความคิด @AlecRust ฉันใช้บริการข้อความ png

ตัวอย่างอยู่ที่นี่:

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

มีสี่พารามิเตอร์:

  • text: สตริงที่จะแสดง
  • ฟอนต์: ไม่ได้ใช้เพราะฉันมี Arial.ttf อยู่แล้วในการสาธิตนี้
  • fontSize: จำนวนเต็ม (ค่าเริ่มต้นคือ 12)
  • สี: รหัสเลขฐานสิบหก 6 ตัวอักษร

โปรดอย่าใช้บริการนี้โดยตรง (ยกเว้นสำหรับการทดสอบ) แต่ใช้คลาสที่ฉันสร้างที่ให้บริการ:

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

ในกรณีนี้สีฐานสิบหกของคุณต้องมีความยาว 6 ตัวอักษรอย่างแน่นอน (อย่าใส่สัญลักษณ์แฮช (#) ไว้ข้างหน้า)

หมายเหตุ: ในที่สุดฉันไม่ได้ใช้บริการนี้เพราะฉันพบว่าแบบอักษรน่าเกลียดและแย่ลง: ไม่สามารถเลือกข้อความได้ แต่เพื่อประโยชน์ของการสนทนานี้ฉันคิดว่ารหัสนี้มีมูลค่าการแบ่งปัน ...

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.