Github की README.md फ़ाइल में रंग कैसे जोड़ें


308

मेरे पास कमांड-लाइन पर JSON और JS को हैक करने के लिए एक बहुत ही प्यारा उपकरण है, जो README.mdमेरे प्रोजेक्ट अंडरस्कोर-क्ली के लिए एक फ़ाइल है ।

मैं --colorझंडे का दस्तावेज करना चाहता हूं ... जो ... चीजों को रंग देता है। अगर मैं वास्तव में दिखा सकता हूं कि आउटपुट कितना दिखता है तो यह बहुत बेहतर होगा। मुझे रंग जोड़ने का कोई तरीका नहीं मिल रहा है README.md। कोई विचार?

मैंने यह कोशिश की है:

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

और इस:

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

अब तक कोई भाग्य नहीं।


1
यदि आप अपने पाठ को मार्कडाउन के माध्यम से रंगने में सक्षम नहीं हैं, तो स्क्रीनशॉट काम को एम्बेड करेगा?
१:57:०५ पर जिरसक्विड

हाँ। जब मैंने यह प्रश्न पोस्ट किया तो मुझे लगा। मुझे लगता है कि स्क्रीनशॉट मेरा सबसे अच्छा जवाब हो सकता है, हालांकि यह स्पष्ट रूप से आदर्श नहीं है।
डेव डॉपसन

1
इसलिए मार्कडाउन फ़ाइल में टेक्स्ट में रंग जोड़ना अभी तक संभव नहीं है?
नाम गुयेन


जवाबों:


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 में छवियों का समर्थन करता है।
एलेक्रस्ट

3
जैसा कि प्रश्न पूछा गया था, मैं पाठ को रंग देना चाहता था, पाठ के सामने छवि नहीं होना चाहिए
बिनर वेब

4
मैंने क्या काम किया है। आप छवि में रंगीन पाठ भी डाल सकते हैं जैसेhttps://placehold.it/150/ffffff/ff0000?text=hello
एलेकस्ट्रे

बहुत उपयोगी जानकारी, बैकएंड में वेब ऐप बनाते समय मददगार।
ट्रॉपिकलरम्बलर

193

diffकुछ रंगीन पाठ उत्पन्न करने के लिए आप भाषा टैग का उपयोग कर सकते हैं :

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

हालाँकि, यह इसे या तो एक नई लाइन के रूप में जोड़ता है - + ! #

यहां छवि विवरण दर्ज करें

यह मुद्दा github markup # 369 में उठाया गया था , लेकिन उन्होंने तब (2014) के बाद से निर्णय में कोई बदलाव नहीं किया है।


1
यह भी रंग पाठ घिरा द्वारा @@बैंगनी (और बोल्ड) में। कोडेकोव ने अपने गिटहब एकीकरण बॉट की टिप्पणियों में इसका लाभ उठाया है, उदाहरण के लिए: github.com/zeit/now/pull/2570#issuecomment-512585770
याकूब फोर्ड

79

आप GitHub README.mdफ़ाइल में सादे पाठ को रंग नहीं दे सकते । आप हालांकि नीचे के टैग के साथ कोड नमूने में रंग जोड़ सकते हैं।

ऐसा करने के लिए बस इन नमूनों जैसे टैग को अपनी README.md फ़ाइल में जोड़ें:

`` `Json
   // रंग भरने के लिए कोड
`` `
`` `एचटीएमएल
   // रंग भरने के लिए कोड
`` `
`` `Js
   // रंग भरने के लिए कोड
`` `
`` `सीएसएस
   // रंग भरने के लिए कोड
`` `
// आदि।

कोई "पूर्व" या "कोड" टैग की आवश्यकता नहीं है।

यह GitHub Markdown डॉक्यूमेंटेशन में कवर किया गया है (पेज से लगभग आधा रास्ता, रूबी का उपयोग करके एक उदाहरण है)। GitHub, सिंटैक्स को पहचानने और उजागर करने के लिए भाषाविद का उपयोग करता है - आप भाषाविद की YAML फ़ाइल में समर्थित भाषाओं (साथ ही उनके मार्कडाउन कीवर्ड) की पूरी सूची पा सकते हैं ।


4
@NielsAbildgaard धन्यवाद! :) इसका उत्तर यह है कि आप कम से कम इस समय GitHub .md फ़ाइलों में सादे पाठ को रंग नहीं दे सकते। मैंने वह राज्य किया और उस पर शोध करने में लगभग 4 घंटे लगाए। वैसे भी मेरे उपयोगी .md कोड टैग को इंगित करने के लिए धन्यवाद, मैं इसकी सराहना करता हूं!
totallytotallyamazing

1
मैं इसे या तो काम नहीं कर सका, लेकिन यह अजीब है क्योंकि रंग विशेषता
सफ़ेद है

@dotMorten यकीन नहीं है, लेकिन मुझे लगता है कि आप स्कॉट एच के पद पर अपनी पिछली टिप्पणी को सिर्फ मेरे ऊपर छोड़ने का मतलब है?
पूरी तरह से

1
मैंने ´´´´ Deprecated´´´´ का इस्तेमाल किया । डॉक्स से हटाए गए टैग जोड़ने के लिए ठीक काम किया।
MRodrigues

4
आप हरे और लाल हाइलाइट किए गए टेक्स्ट को जनरेट करने के लिए `` diff``` भाषा टैग का उपयोग कर सकते हैं।
क्रैग्मैक्लेममार्टिन

42

दुर्भाग्य से, वर्तमान में यह संभव नहीं है।

GitHub Markdown प्रलेखन 'रंग', 'सीएसएस', 'एचटीएमएल', या 'शैली' का कोई जिक्र नहीं है।

जबकि कुछ मार्कडाउन प्रोसेसर (उदाहरण के लिए घोस्ट में इस्तेमाल किया गया ) HTML के लिए अनुमति देते हैं, जैसे कि <span style="color:orange;">Word up</span>, GitHub किसी भी HTML को छोड़ देता है।

यदि यह जरूरी है कि आप अपने रीडमी में रंग का उपयोग करते हैं, तो आपका README.md उपयोगकर्ताओं को केवल README.html का संदर्भ दे सकता है। इसके लिए व्यापार-बंद, ज़ाहिर है, सुलभता है।


11
यह सामान्य रूप में एचटीएमएल त्यागने नहीं करता है, hr, br, p, b, iऔर दूसरों के काम करते हैं!
कोडमैनएक्स

यदि आप एक README.html को अग्रेषित करते हैं, तो आप रिपॉजिटरी में इसकी एक प्रति रखना चाह सकते हैं ताकि आप इसका प्रतिबद्ध इतिहास न खोएं। यदि आप विशेष रूप से धूर्तता महसूस कर रहे हैं, तो आप इसे अपने gh-pages में भी शामिल कर सकते हैं।
सैंडी गिफोर्ड

2
वास्तविक एचटीएमएल टैग और विशेषताओं के लिए jch / html-पाइपलाइन का स्रोत कोड देखें जो GitHub अनुमति देता है।
जेसन एंटमैन

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/95621a949b07db26295000


20

मैं Qwertman से सहमत होना चाह रहा हूं कि वर्तमान में GitHub मार्कडाउन में पाठ के लिए रंग निर्दिष्ट करना संभव नहीं है, कम से कम HTML के माध्यम से।

GitHub कुछ HTML तत्वों और विशेषताओं की अनुमति देता है, लेकिन केवल कुछ लोगों (उनके HTML संकरण के बारे में उनके दस्तावेज़ देखें )। वे अनुमति pऔर divटैग, साथ ही 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>.

जैसा कि क्वर्टमैन ने सुझाव दिया, यदि आपको वास्तव में रंग का उपयोग करना चाहिए तो आप इसे README.html में कर सकते हैं और उन्हें इसका संदर्भ दे सकते हैं।


6
हाँ, दुर्भाग्य से यह जीथब में काम नहीं करता, जैसा कि मेरे उत्तर में कहा गया है।
स्कॉट एच।

वास्तविक एचटीएमएल टैग और विशेषताओं के लिए jch / html-पाइपलाइन का स्रोत कोड देखें जो GitHub अनुमति देता है।
जेसन एंटमैन

5

मैंने कुछ रंगों को एक GitHub मार्कअप पेज में इमोजी एनकोड कोड, जैसे, या o का उपयोग करके जोड़ा - कुछ इमोजी अक्षर कुछ ब्राउज़रों में रंगीन हैं। (जहाँ तक मुझे पता है कि कोई रंगीन इमोजी अक्षर नहीं हैं।)


3

लेखन के रूप में, Github Markdown `#ffffff`एक रंग पूर्वावलोकन के साथ ( जैसे backticks नोट!) रंग कोड प्रदान करता है । बस एक रंग कोड का उपयोग करें और इसे बैकटिक्स के साथ घेरें।

उदाहरण के लिए:

रंग कोड के साथ GitHub मार्कडाउन

हो जाता है

रंग कोड के साथ GitHub मार्कडाउन प्रदान किया


5
मैंने कोशिश की है, और यह काम करने के लिए प्रतीत नहीं होता है। क्या आप एक उदाहरण से लिंक कर सकते हैं?
डेव डॉपसन

2
`#hexhex`
बैककौट

2

@AlecRust विचार के आधार पर, मैंने png पाठ सेवा का कार्यान्वयन किया।

डेमो यहाँ है:

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

चार पैरामीटर हैं:

  • पाठ: प्रदर्शित करने के लिए स्ट्रिंग
  • फ़ॉन्ट: उपयोग नहीं है क्योंकि मेरे पास केवल एरियल है। वैसे भी इस डेमो पर।
  • 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 वर्ण लंबा होना चाहिए (उसके सामने हैश चिन्ह (#) न रखें)।

नोट: अंत में, मैंने इस सेवा का उपयोग नहीं किया, क्योंकि मैंने पाया कि फ़ॉन्ट बदसूरत और बदतर था: पाठ का चयन करना संभव नहीं था। लेकिन इस चर्चा के लिए मुझे लगा कि यह कोड साझा करने लायक था ...

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.