10 قطعه کد CSS و جاوااسکریپت برای نمایش زیبای کدها - بخش دوم

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 15 اردیبهشت 1397
دسته بندی ها : css , جاوا اسکریپت

در بخش قبلی به صورت کامل ۵ مورد از قطعه کدهایی که باعث می‌شود تا شیوه نمایش کدها مشخص‌تر باشد را به شما معرفی نمودیم، در این جلسه قصد داریم تا ۵ مورد دیگر را نیز بررسی نماییم.

6. Syntax Highlighting Demo

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

همچنین در سینتکس‌هایی که بسیار پایه‌ای هستند شما می‌توانید یکسری ویژگی‌های یکسان و مشابه را پیدا نمایید. برای مثال در قطعه کد بالا، حالت JSON دقیقا به این شکل است. در هر حال این طرح بسیار ساده‌ای است که می‌تواند تقریبا با هر لایه‌بندی سازگار باشد.

7. Prism.js Demo

اسکریپت رایگان Prism.js script یکی از بهترین راه‌حل‌های متن باز برای مشخص‌ کردن سینتکس است. این مورد را می‌توانید در وبلاگ‌های بسیار بزرگ مانند Smashing Magazine پیدا کنید. این اسکریپت برای تمام استفاده‌ها و حالت‌ها آزاد و رایگان است.

اما اگر می‌خواهید از ویژگی‌های Prism بدون خواندن مستندات و گزینه‌های مختلف استفاده کنید، این قطعه کد که توسط Bram de Haan ایجاد شده می‌تواند انتخاب بسیار خوبی برای شما باشد.

از طریق کد شما مراحل نصب بسیار ساده‌ای خواهید داشت که تنها با کپی کردن و بازطراحی با وبسایت‌تان مطابقت پیدا می‌کند. 

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

8. Pure CSS Code Editor

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

در هر صورت این قطعه کد بسیار چشمگیر و زیبا است. می‌شود گفت که این قطعه کد یک IDE ثابت است که با استفاده از HTML و CSS ساخته شده است.

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

9. Syntax Coloring

این مورد یک طرح بسیار ساده و بسیار پایه‌ای است که توسط Michaël Germini ایجاد شده است.

اگر قصد ندارید که روند ساخت syntax highlighting خود را از ابتدا شروع کنید، این قطعه کد می‌تواند به شما کمک کند. این طرح از یک پس‌زمینه روشن و یک رنگ متن عادی استفاده می‌کند، چیزی که به نظر برای شروع یک قالب بسیار زیبا است. 

فقط این موضوع را به یاد داشته باشید که این طرح بسیار ساده‌ای است، برای اینکه در وبسایت خود از آن استفاده کنید باید تغییرات زیادی را در آن قرار دهید.

10. Code Guide

این مورد یک راهنمای ساده کدنویسی است که توسط Jo Dahl ایجاد شده، اما شما می‌توانید از سینتکس‌هایی که برای کدها استفاده نموده، در سناریوهای واقعی خودتان نیز استفاده کنید. 

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

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

منبع

مقالات پیشنهادی

10 قطعه کد CSS و جاوااسکریپت برای نمایش زیبای کدها - بخش اول

مطمئنا همه ما با ابزارهای کدنویسی در کامپیوترهای خود آشنایی داریم، معمولا آن‌ها را کد ادیتور یا Web IDE می‌نامند. یکی از ویژگی‌های اصلی این موارد مشخص...

۱۰ قطعه کد خالص CSS برای ساختن Modal Window

تا به حال اکثر Modal windowهایی که مشاهده کرده‌ایم مبتنی بر جاوا اسکریپت بوده اند، به همین دلیل می توانید اسکریپت های نمونه بسیاری را در اینترنت دانلو...

۱۰ قطعه کد منو واکنشگرا با CSS - بخش اول

طراحی یک لایه‌بندی واکنشگرا لزوما کار سختی نیست. مخصوصا برای زمانی که شما در ابتدای کار طرح کلی را ساخته‌اید و می‌دانید که قرار است چه چیزی را ایجاد ک...

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

در گذشته این پیغام‌ها تنها با استفاده از alertهای داخل جاوااسکریپت نمایش داده می‌شد که بعضی اوقات این موضوع عذاب آور بود. اما امروزه می‌توانیم چنین چی...