در بخش قبلی به صورت کامل ۵ مورد از قطعه کدهایی که باعث می‌شود تا شیوه نمایش کدها مشخص‌تر باشد را به شما معرفی نمودیم، در این جلسه قصد داریم تا ۵ مورد دیگر را نیز بررسی نماییم.
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 با استفاده از لایه‌بندی بسیار ساده خود همراه می‌سازد. این قطعه کد ظاهر بسیار فوق‌العاده‌ای دارد، همچنین وجود طرح رنگی بسیار مناسب باعث شده که توجه شما به وبسایت بسیار زیاد باشد. این موضوع برای تجربه کاربری وبسایت شگفت انگیز است.
در نهایت باید بگویم که سعی کنید این موارد را در زمان ساخت وبلاگ یا وبسایت حتما در ذهن داشته باشید. چرا که نمایش درست و زیبای کدها در مطالب وبلاگی می‌تواند اعتبار بسیار خوبی به وبسایت اضافه نماید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید