آشنایی با رنگ های ANSI در جاوااسکریپت

دیروز با موضوعی آشنا شدم به اسم ANSI Colors یا رنگ های ANSI که برام جالب بود. این مقاله رو نوشتم که شما هم آشنا بشین.

در جاوااسکریپت وقتی میخوایم متنی رو داخل کنسول بنویسیم از دستور console.log استفاده می‌کنیم.

console.log(&quotI'm just the default text :(&quot);

و نتیجه ای که می‌بینیم یک متن سیاه روی بک گراند سفیده

اما به لطف چیزی به اسم ANSI escape sequesnces ما میتونیم کنترل بیشتری روی خروجی داشته باشیم و مشخص کنیم چطوری دیده بشه.

در واقع ANSI escape sequesnces یک مجموعه از کدهای استاندارد هستند که به برنامه نویس اجازه میدن که به خروجی کنسول یا برنامه های متن پایه ( text based ) استایل بده. استفاده از این ANSI requences خیلی راحت و بانمکه.

این مجموعه کدهای استاندارد باید با یک الگوی مشخص ( مجموعه کاراکترهای مشخص ) شروع میشن. به این الگو میگن escape code. در این مقاله از الگویی استفاده میکنیم که در همه زبان های رایج برنامه نویسی مثل جاوااسکریپت (Javascript)، پایتون (Python) و جاوا (Java) پشتیبانی میشه.

\u001b

بریم اولین نمونه از این کدهای دستوری رو ببینیم:

خروجی این چند خط رو با هم ببینیم:

دقت کنین که همه متن ها شامل escape code و style code و متن اصلی هستند:

\u001b[ + style code (XXm) + output text

کد های رنگ ANSI یا همون ANSI Colors

در ANSI هشت کد رنگ اصلی داریم :

سیاه = 30

قرمز = 31

سبز = 32

زرد = 33

آبی = 34

سرخابی = 35

فیروزه ای = 36

سفید = 37

مثال زیر نمونه خوبی برای استفاده این کدهاست:

const RED = "\u001b[31m";

const BLUE = "\u001b[34m";

console.log(RED + "I'm red!");

console.log(BLUE + "Or am I blue?");

کد رنگ های پس زمینه ( Background ):

لیست کد رنگ های پس زمینه به شرح زیر هستند:

پس زمینه سیاه = 40

پس زمینه قرمز = 41

پس زمینه سبز = 42

پس زمینه زرد = 43

پس زمینه آبی = 44

پس زمینه سرخابی = 45

پس زمینه فیروزه ای = 46

پس زمینه سفید = 47

کد رنگ های پس زمینه بین ; و m قرار میگیرند و میتونن با رنگ متن یا بدون رنگ متن تنظیم بشن.

text color + ; + background color + m

مثال های زیر نمونه های خوبی هستند:

و نتیجه خروجی ها رو ببینید:

کدهای رنگ RGB در ANSI

کدهای رنگ اضافه با دو الگوی قابل استفاده هستند. الگوی اول کد رنگ و الگوی دوم RGB هست.

الگوی اول با کد رنگ:

برای رنگ متن از الگوی زیر استفاده میکنیم:

"\u001b[38;5;<color code>m + output text"

برای رنگ پس زمینه هم از الگوی زیر استفاده میکنیم:

"\u001b[48;5;<color code>m + output text"

عکس زیر لیست کد رنگ هاست:

الگوی دوم الگوی RGB هست:

برای رنگ متن از الگوی زیر استفاده میکنیم:

"\u001b[38;2;<R code>;<G code>;<B code>m + output text"

و برای رنگ پس زمین از الگوی زیر استفاده میکنیم:

"\u001b[48;2;<R code>;<G code>;<B code> + output text"

در بخش بعدی می‌بینیم که چطور از این الگوها استفاده میکنیم.

استفاده از رنگ های مختلف در یک متن

میتونیم داخل یک متن از رنگ های مختلفی استفاده کنیم. به مثال زیر توجه کنین:

نتیجه میشه خروجی زیر:

ریست کردن رنگ تنظیم شده

برای برگشتن رنگ متن به رنگ پیش فرض از کد زیر استفاده میکنیم:

[0m

نمونه استفاده ش رو در کد زیر نوشتم:

و خروجی زیر رو میبینیم:

نکته مهم: در جاوااسکریپت ، موقع اجرای هر console.log خود به خود همه چیز بر اساس رنگ پیش فرض اجرا میشه و نیازی به کد ریست نیست:

const WHITE_CYAN = "\u001b[37;46m";
console.log(WHITE_CYAN + "I am colorful");

// Does not have the same color as above, even with no manual reset
console.log("But I am not");

ولی در پایتون کنسول خود به خود ریست نمیشه و باید حتما دستور ریست اجرا بشه:

WHITE_CYAN = "\u001b[37;46m"
print(WHITE_CYAN + "I am colorful")

# Has the same color as above, since it was not manually reset
print("And so am I")

استایل های دیگر

سه کد دیگر که به عنوان ANSI Decoration معروف هستند عبارتند از:

Bold: \u001b[1m

Italicized: \u001b[3m

Underline: \u001b[4m

سخن آخر

حتما این موارد رو آزمایش کنید و خروجی بگیرید تا بیشتر به یادتون بمونه. من شخصا پکیج logger پروژه ام رو با این موارد آپدیت کردم.

امیدوارم از این مقاله لذت ببرید و براتون مفید باشه.

اگر دوست دارید میتونید از طریق صفحه لینکدین با من در ارتباط باشید :)

متن مقاله اصلی رو میتونید اینجا مطالعه کنید.

موفق باشید :)