গিথুবের README.md ফাইলে কীভাবে রঙ যুক্ত করা যায়


308

README.mdআমার প্রজেক্টের আন্ডারস্কোর-ক্লিমে একটি ফাইল রয়েছে , কমান্ড-লাইনে জেএসএন এবং জেএস হ্যাক করার জন্য একটি দুর্দান্ত মিষ্টি সরঞ্জাম।

আমি --colorপতাকাটি ডকুমেন্ট করতে চাই ... যা ... রঙিন জিনিস। এটি যদি আরও ভাল হয়ে যায় তবে আমি যদি আউটপুটটি দেখতে কেমন তা প্রদর্শন করতে পারি। আমার সাথে রঙ যুক্ত করার কোনও উপায় আমি খুঁজে পাচ্ছি না README.md। কোন ধারনা?

আমি এটি চেষ্টা করেছি:

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

এবং এই:

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

এখনও ভাগ্য নেই।


1
আপনি যদি মার্কডাউনের মাধ্যমে আপনার পাঠ্যটি রঙ করতে সক্ষম না হন তবে কোনও স্ক্রিনশটের কাজ এম্বেড করবেন?
জিরাস্কুইড

হ্যাঁ. আমি এই প্রশ্নটি পোস্ট করার ঠিক পরে তা ভেবেছিলাম। আমি মনে করি স্ক্রিনশটটি আমার সেরা ফ্যালব্যাক উত্তর হতে পারে, যদিও এটি স্পষ্টতই আদর্শ নয়।
ডেভ ডপসন

1
সুতরাং এখনও মার্কডাউন ফাইলটিতে পাঠ্যে রঙ যুক্ত করা সম্ভব হয়নি?
নাম

2
না - এবং এর জুলাই 2014 এফএফএস
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

এটি একটি গিটহাব প্রকল্পের মধ্যে কার্ডগুলিতে দুর্দান্ত কাজ করে এবং তাদের কার্ড ট্যাগ করতে এবং তাদের রঙিন করতে ব্যবহার করা যেতে পারে
জিয়াদ আকিকি

1
@ বিনার ওয়েবে আপনি কোথায় রাখছেন? গিটহাবের উপর কাজ করবে উদাহরণস্বরূপ যা মার্কডাউনে চিত্রগুলি সমর্থন করে।
অ্যালেকারস্ট

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

তবে এটি একে একে শুরু করে নতুন লাইন হিসাবে যুক্ত করেছে - + ! #

এখানে চিত্র বর্ণনা লিখুন

এই সমস্যাটি গিথব মার্কআপে উত্থাপিত হয়েছিল # 369 , তবে তারা তখন থেকে (2014) সিদ্ধান্তে কোনও পরিবর্তন আনেনি


1
এটি বেগুনি রঙের (এবং গা bold়) চারপাশে থাকা পাঠ্যকেও রঙ করে @@। কোডেকভ তার গিটহাব ইন্টিগ্রেশন বটের মন্তব্যে এর সদ্ব্যবহার করেছেন, উদাহরণস্বরূপ: github.com/zeit/now/pull/2570#issuecomment-512585770
জ্যাকব ফোর্ড

79

আপনি গিটহাব README.mdফাইলটিতে সরল পাঠ্য রঙ করতে পারবেন না । তবে আপনি নীচের ট্যাগগুলির সাথে কোড নমুনায় রঙ যুক্ত করতে পারেন।

এটি করতে কেবল আপনার README.md ফাইলটিতে এই নমুনাগুলির মতো ট্যাগ যুক্ত করুন:

`` JSON
   রঙ করার জন্য // কোড
``
`` এইচটিএমএল
   রঙ করার জন্য // কোড
``
`` JS
   রঙ করার জন্য // কোড
``
`` CSS
   রঙ করার জন্য // কোড
``
// ইত্যাদি

কোনও "প্রাক" বা "কোড" ট্যাগের প্রয়োজন নেই।

এটি গিটহাব মার্কডাউন ডকুমেন্টেশনে আচ্ছাদিত রয়েছে (পৃষ্ঠার প্রায় অর্ধেক পথ, রুবি ব্যবহার করে একটি উদাহরণ রয়েছে)। গিটহাব ভাষাতত্ত্ববিদকে সিনট্যাক্স সনাক্তকরণ এবং হাইলাইট করার জন্য ব্যবহার করে - আপনি ভাষাবিজ্ঞানের ওয়াইএএমএল ফাইলে সমর্থিত ভাষার (পাশাপাশি তাদের মার্কডাউন কীওয়ার্ড) পুরো তালিকা খুঁজে পেতে পারেন ।


4
নিলস অ্যাবিল্ডগার্ড আপনাকে ধন্যবাদ! :) উত্তরটি হ'ল আপনি কমপক্ষে এই সময়ে গিটহাব .md ফাইলগুলিতে সরল পাঠ্য রঙ করতে পারবেন না। আমি তা জানিয়েছিলাম এবং এটি গবেষণা করতে প্রায় 4 ঘন্টা ব্যয় করেছি। যাইহোক আমার সহায়ক .এমডি কোড ট্যাগগুলি নির্দেশ করার জন্য আপনাকে ধন্যবাদ, আমি এটির প্রশংসা করি!
15

1
আমি এটি কোনওভাবেই
dotMorten

@ ডটমর্টেন নিশ্চিত নন তবে আমার মনে হয় আপনি স্কট এইচ এর পোস্টের উপর আমার শেষ মন্তব্যটি আমার ঠিক উপরে রেখেছিলেন?
21

1
আমি used used ব্যবহার Deprecatedকরেছি। দস্তাবেজগুলিতে হ্রাস করা ট্যাগ যুক্ত করার জন্য, দুর্দান্ত কাজ করেছে।
এমআরড্রিগস

4
আপনি সবুজ এবং লাল হাইলাইট করা পাঠ্য তৈরি করতে `` `ডিফের ভাষা ট্যাগটি ব্যবহার করতে পারেন।
ক্রেগমিক্যালমার্টিন

42

দুর্ভাগ্যক্রমে, এটি বর্তমানে সম্ভব নয়।

GitHub Markdown ডকুমেন্টেশন 'রঙ', 'CSS', 'এইচটিএমএল', বা 'শৈলী' কোনো উল্লেখ নেই।

কিছু Markdown প্রসেসর (যেমন ব্যবহৃত এক সময় গোস্ট ) যেমন HTML- এর জন্য অনুমতি দেয় <span style="color:orange;">Word up</span>, GitHub এর পরিত্যাগ করা এইচটিএমএল।

আপনি যদি আপনার রেডমিমে রঙ ব্যবহার করা আবশ্যক হন তবে আপনার README.md কেবল ব্যবহারকারীদের একটি README.html- এ উল্লেখ করতে পারে। এর জন্য বাণিজ্য বন্ধটি অবশ্যই অ্যাক্সেসযোগ্যতা।


11
সাধারণভাবে এটা এইচটিএমএল বাতিল নয়, hr, br, p, b, iএবং অন্যদের কাজ করতে!
CodeManX

আপনি যদি একটি README.html তে এগিয়ে যান, আপনি এটির অনুলিপিটিতে একটি অনুলিপি রাখতে পারেন যাতে আপনি এর প্রতিশ্রুতিবদ্ধ ইতিহাসটি হারিয়ে না যান। আপনি যদি বিশেষভাবে বোকা বোধ করেন তবে আপনি এটি আপনার জিএইচ-পৃষ্ঠাগুলিতে অন্তর্ভুক্ত করতে পারেন।
স্যান্ডি গিফোর্ড

2
GitHub মঞ্জুরি দেয় এমন প্রকৃত এইচটিএমএল ট্যাগ এবং বৈশিষ্ট্যগুলির জন্য jch / html-পাইপলাইনের উত্স কোডটি দেখুন ।
জেসন এন্টম্যান

21

একজন রাস্টার চিত্র উপস্থাপনের বিকল্প হিসাবে আপনি একটি এসভিজি ফাইল এম্বেড করতে পারেন:

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

তারপরে আপনি যথারীতি এসভিজি ফাইলে রঙের পাঠ্য যুক্ত করতে পারেন:

<?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ফাইলটি খোলার সময় আপনি পাঠ্য নির্বাচন বা অনুলিপি করতে সক্ষম হলেও এসভিজি চিত্র এম্বেড করা অবস্থায় পাঠ্য নির্বাচনযোগ্য হয় না।

ডেমো: https://gist.github.com/CyberShadow/95621a949b07db295000


20

আমি কিয়ারওয়ারম্যানের সাথে একমত হতে আগ্রহী যে গিটহাব মার্কডাউনতে পাঠ্যের জন্য রঙ নির্দিষ্ট করা বর্তমানে সম্ভব নয়, অন্তত এইচটিএমএলের মাধ্যমে নয়।

গিটহাব কিছু HTML উপাদান এবং বৈশিষ্ট্যগুলিকে অনুমতি দেয় তবে কেবলমাত্র নির্দিষ্ট কিছু (তাদের এইচটিএমএল স্যানিটাইজেশন সম্পর্কে তাদের ডকুমেন্টেশন দেখুন )। তারা অনুমতি দেয় pএবং divট্যাগ দেয় পাশাপাশি colorবৈশিষ্ট্যও দেয়। যাইহোক, যখন আমি গিটহাবের মার্কডাউন ডকুমেন্টে এগুলি ব্যবহার করার চেষ্টা করেছি, এটি কার্যকর হয়নি। আমি নিম্নলিখিতগুলি (অন্যান্য ভিন্নতার মধ্যে দিয়ে) চেষ্টা করেছি এবং সেগুলি কার্যকর হয়নি:

  • <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
হ্যাঁ, দুর্ভাগ্যক্রমে এটি গিথুবটিতে কাজ করে না, যেমনটি আমার উত্তরটি বলেছে।
স্কট এইচ

GitHub মঞ্জুরি দেয় এমন প্রকৃত এইচটিএমএল ট্যাগ এবং বৈশিষ্ট্যগুলির জন্য jch / html-পাইপলাইনের উত্স কোডটি দেখুন ।
জেসন আন্তম্যান

5

আমি ইমোজি এনিকোড অক্ষর ব্যবহার করে একটি গিটহাব মার্কআপ পৃষ্ঠায় কিছু রঙ যুক্ত করেছি, যেমন 💡 বা 🛑 - কিছু ইমোজি অক্ষর কিছু ব্রাউজারে রঙিন হয় colored (আমি যতদূর জানি কোনও রঙিন ইমোজি বর্ণমালা নেই))


3

লেখার মতো, গিথুব মার্কডাউন `#ffffff`রঙের পূর্বরূপ সহ রঙের কোডগুলি (ব্যাকটিকগুলি নোট করুন!) রেন্ডার করে । কেবল একটি রঙের কোড ব্যবহার করুন এবং এটি ব্যাকটিকগুলি দিয়ে ঘিরে নিন।

উদাহরণ স্বরূপ:

রঙ কোড সহ গিটহাব মার্কডাউন

হয়ে

রঙ কোড সহ গিটহাব মার্কডাউন উপস্থাপন করেছে


5
আমি চেষ্টা করেছিলাম, এবং এটি কাজ করে না বলে মনে হচ্ছে। আপনি একটি উদাহরণ লিঙ্ক করতে পারেন?
ডেভ ডপসন

2
Backquotes মত সহ`#hexhex`
bwindels

2

@ অ্যালেক্সারস্ট আইডিয়া ভিত্তিক, আমি পিএনজি পাঠ্য পরিষেবাটি প্রয়োগ করেছি।

ডেমোটি এখানে:

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

চারটি পরামিতি রয়েছে:

  • পাঠ্য: প্রদর্শন স্ট্রিং
  • হরফ: ব্যবহার করা হয়নি কারণ আমার এই ডেমোটিতে কেবলমাত্র Aial.ttf রয়েছে।
  • ফন্টসাইজ: একটি পূর্ণসংখ্যা (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.