۱۰ قطعه کد CSS و جاوا اسکریپت برای برجسته سازی کدها در وبسایت

همه ما با نرم افزارهای برنامه نویسی دسکتاپ و  محیط های توسعه وب آشنا هستیم. این محیط ها دارای قابلیتی به نام syntax highlighting هستند که نوشتن کد و اشکال زدایی آن آسان تر میکند. اما آیا می دانستید که می توانید از بعضی همان ویژگی ها استفاده کنید و آن را به محتوای وب خود اضافه کنید؟

photo-1488590528505-98d2b5aba04b

البته ممکن است موضوع وبلاگ شما چیزی نباشد که بخواهید از کد ها در آن استفاده کنید اما اگر تعداد مقالات برنامه نویسی شما زیاد است یا نیاز دارید برای آموزش از کدهای زیادی در وبلاگ خود استفاده کنید، با استفاده از این ویژگی ها میتوانید صفحات وب خود را زیباتر کرده و کدها را برای خوانندگان جذاب تر کنید.

در این مقاله به برخی از syntax highlighting های رایگان را بررسی میکنیم.

1.باکس های کد در آنگولار

در اینجا یک قطعه کد بسیار زیبا داریم که برای Angular.js توسط Andrew Archibald ساخته شده است. همه این باکس های کد  دارای زبانه های (تب) بسیار زیبا هستند که میتوانید از آنها در وب سایت خود استفاده کنید. این کد ها را بدون هیچ جاگذاری میتوانید به صفحه خود اضافه کنید، استایل دهی آنها همگی از طریق کد های CSS مدیریت میشود.

این ویژگی باعث میشود درخواست های HTTP شما کاهش پیدا کند و به شما کنترل بیشتری بر نوع قاعده نوشتاری مورد نظر خواهد داد.

2. تگ استایل <pre>

در اینجا یک نمونه مثال بسیار دقیق تر برای توسعه دهندگانی که آموزش های طولانی تری دارند و از نمونه کد های بزرگتری استفاده میکنند آورده شده است. این پروژه استایل دهی کد ، با دو ویژگی کار می کند: نوار عمودی سمت چپ که از اعداد برای خط هایی که کد ها در آن نوشته میشوند استفاده میکند و یا یک پس زمینه تیره تمام صفحه که کدهای نمونه درآن قرار میگیرند.

شما می توانید با مقداری کد نویسی در جی کوئری رنگ ها را تغییر دهید لازم به ذکر است در اینجا استایل های گوناگونی برای مطابقت با هر نوع وب سایتی وجود دارد.

3.Textarea Tabs

در اینجا یک پروژه منحصر به فرد داریم که توسط  Ashley Ktorou توسعه داده شده است و نشان می دهد که میتوان با استفاده از یک Textarea ساده برای زیباسازی کد ها استفاده نمود. کسانی که در وب کد نویسی میکنند باید کد های خود را در جایی قرار دهند. Textarea یک عنصر ایده آل برای قرار دادن کد هاست.

با این حال، با استفاده از این پروژه، کد های شما به شکل سفارشی درخواهد آمد و قبلیت تمام صفحه از طریق دکمه ایی که در بالای صفحه موجود است برای شما فراهم آورده میشود. تمام این قابلیت ها با استفاده از کدهای ساده CSS و JS ایجاد شده است. این شگفت انگیز است که میتوان ویرایشگر های کد را در داخل مرورگر خود ایجاد کنیم.

4.CSS-Only Line Numbers

در اینجا یک عنصر استایل دهی بسیار ساده داریم و البته بیشتر به خاطر همین سادگی است که آن را در این لیست آورده ایم. با استفاده از این قطعه کد می توانید شماره خطوط پویا را به طور خودکار به بلوک های کد خود اضافه کنید. شما نیازی ندارید که شماره خطوط را دستی وارد کنید.

این اعداد به صورت خودکار و صرف نظر از حجم کدهای شما ایجاد خواهند شد. برای وبلاگ هایی که نمونه مثال های آنها در کدنویسی زیاد است این عنصر استایل دهی میتواند مناسب باشد.

5.Syntax Highlighting بوت استرپ

آیا به دنبال اضافه کردن ویژگی Syntax Highlighting به پروژه ای که در آن از بوت استرپ استفاده کرده اید، هستید ؟ پس جای درستی را انتخاب کردید. Kijan Maharjan این قابلیت را برای شما توسعه داده است. این قابلیت به شما اجازه میدهد ویدجت های تبی را به صفحه خود اضافه کنید که دارای سبک های مختلف برای برجسته سازی کد هاست. رنگها را با استفاده از کتابخانه code-prettify  انتخاب می کنید و کل طراحی را با ویرایشهای کوچک در CSS راه اندازی میکنید.

6.Syntax Highlighting Demo

در اینجا نسخه ی نمایشی از قابلیت برجسته سازی کد ها (Syntax Highlighting Demo) را مشاهده میکنید که به وسیله گستره بزرگی از زبان ها پشتیبانی میشود. هر زبان دارای سبک طراحی و طرح رنگی خاص خود است، اما همچنین می توانید با کمی تغییر در کد CSS رنگ بندی را تغییر دهید.

7.Prism.js Demo

Prism.js یک کتابخانه رایگان است و یکی از بهترین راه حل های متن باز برای برجسته سازی کدها است. این کتابخانه توسط گستره بزرگی از وبلاگ ها استفاده میشود. لرن سورس یکی از سایت های است که در این زمینه از این کتابخانه استفاده میکند. این کتابخانه دارای استایل های تعریف شده ی متنوعی است که میتوانید آنها را در سایت Prism.js مشاهده کنید.

8.Pure CSS Code Editor

خوب، نام این یکی کمی گمراه کننده است. این قابلیت به لحاظ فنی یک ویرایشگر کد نیست بلکه شما از آن میتوانید فقط برای برجسته سازی کد های CSS استفاده کنید. با این حال هنوز ارزش توجه را دارد زیرا یک رابط استاتیک IDE است که فقط با استفاده از HTML و CSS ایجاد شده است. احتمالاچیزی شبیه به این قابلیت را در وب سایت خود استفاده نخواهید کرد. اما سبک های کد آن ممکن است برای شما در جاهای مختلف الهام بخش باشد.

9.Syntax Coloring

فوق العاده ساده. این توصیفی است که برای قابلیت ساخته شده توسط  Michaël Germini استفاده میشود. اگر نمیخواهید  قابلیت برجسته سازی را از ابتدا طراحی کنید Syntax Coloring انتخاب مناسبی برای شما خواهد بود. این قابلیت دارای یک پس زمینه سفید با متن روشن است و کد ها در آن به خوبی نمایش داده میشود. البته به یاد داشته باشید که این قابلیت بسیار ساده است بنابراین برای اینکه با سایت شما مطابقت پیدا کند، ممکن است به کمی زمان برای ویرایش استایل ها نیاز داشته باشید.

10.Code Guide

Code Guide توسط Jo Dahl ساخته شده است. با استفاده از آن میتوانید مشاهده کنید که چطور بلوک های برجسته ساز کد در حالت واقعی استفاده میشوند. اگر شما در حال ایجاد یک وبلاگ یا وب سایتی هستید که از قابلیت برجسته سازی برای کد های خود استفاده میکنید این طرح را در ذهن خود داشته باشید.

منبع: لرن سورس