مطمئنا همه ما با ابزارهای کدنویسی در کامپیوترهای خود آشنایی داریم، معمولا آن‌ها را کد ادیتور یا Web IDE می‌نامند. یکی از ویژگی‌های اصلی این موارد مشخص‌کردن سینتکس کدها از همدیگر است، با استفاده از این ویژگی قابلیت نوشتن و دیباگ‌کردن کدها بسیار آسان‌تر می‌شود.
اما آیا تا به حال فکر کرده‌اید که چنین حالتی را در محتوای وبسایت خود به وجود بیاورید؟
مطمئنا هیچ‌کس تمام محتوای وبلاگ‌ش را پر از کدهای مختلف نمی‌کند، اما حالتی وجود دارد که شما قصد دارید قطعه کدی را تشریح کنید یا اینکه قسمت‌بندی نموده و در یک مقاله طولانی بکار ببرید. در چنین حالتی بسیار مهم است که بتوانید کدها را به صورت مشخص به کاربر نمایش دهید که بتواند همه چیز را به خوبی تشخیص دهد.
در این مقاله قصد داریم با شما ۱۰ قطعه کد را که برای نمایش بهتر کدها در وبسایت استفاده می‌شوند، بررسی کنیم.
1. Angular Source Code Boxes
این مورد یک قطعه کد بسیار جالب است که توسط Andrew Archibald کاملا براساس انگولارجی‌اس توسعه داده شده است.
تمام مواردی که در این پیشنمایش پیدا می‌کنید در Tabهایی قرار گرفته است. میتوانید کدها را خارج از آن موارد نیز قرار دهید. تمام استایل‌های این قطعه کد نیز از طریق CSS کنترل می‌شود.
از آنجایی که این قطعه کد از حالت embedding استفاده نمی‌کند، درخواست‌های HTTP بسیار کاهش یافته و توسعه‌دهنده توانسته که کنترل بسیار بیشتری را روی سینتکس داشته باشد.
در این مورد برای نمایش درست زبان‌های مختلف از کتابخانه angular-highlight استفاده شده است.
2.pre Tag Style
این قطعه کد نسبت به مورد قبلی جزئیات بسیار بیشتری را در اختیار توسعه‌دهنده می‌گذارد، مخصوصا زمانی که توسعه‌دهنده آموزش طولانی‌تر و قطعه کدها پیچیده‌ای داشته باشد.
این پروژه به خوبی با دو ویژگی کار می‌کند: یک نوار عمودی در سمت چپ که خطوط را می‌شمرد و همچنین وجود پس‌زمینه تاریک برای نمایش کدها.
میتوانید کدهایی که در اینجا قرار گرفته را با رنگ دلخواه‌تان تغییر دهید، اینکار را تنها با کمی کار روی جی‌کوئری میتوانید انجام دهید. این استایل می‌تواند با وبسایت‌های مختلف بسیاری تطابق داشته باشد.
3. Textarea Tabs
در اینجا میتوانید یک پروژه منحصر به فرد را پیدا کنید که توسط Ashley Ktorou توسعه داده شده و در ساخت آن از یک textarea ساده استفاده شده است.
کدنویسان در محیط وب نیاز دارند تا کدهای‌شان را در یک جایی قرار دهند. یک textarea میتوانید بهترین المان برای مدیریت چنین حالتی است.
با استفاده از این طرح میتوانید یک textarea سفارشی را داشته باشید که کدها را برای شما به صورت بسیار زیبایی مشخص می‌سازد. تمام این موارد تنها براساس ویژگی‌های ساده JS و CSS کار می‌کند.
این کار واقعا عالی‌ست که می‌توانیم از طریق مرورگرمان به یک ادیتور دسترسی داشته باشیم.
4. CSS-Only Line Numbers
المان سینتکس پویا، واقعا چیز ساده‌ای است. اما دقیقا به دلیل همین سادگی نیاز است که یک نقطه را در این لیست برای آن قرار دهیم.
با استفاده از این کد شما میتوانید شماره خطوط پویایی را به صورت خودکار در قطعه بلاک‌ها قرار دهید.
هیچ نیازی نیست که برای شمارش تعداد خطوط کارهای سختی را انجام دهید، آن‌ها تنها تعداد خطوطی که وارد کرده‌اید را می‌شمرند.
به نظر من استفاده کردن از این قطعه کد برای وبلاگ‌هایی که قطعه کدهای مختلف را در میان نوشته‌های‌شان استفاده می‌کنند مناسب است.
این مورد یکی از موارد منحصر به فرد است که از یک پس زمینه روشن استفاده می‌کند.
5. Bootstrap Syntax Highlighting w/ Tabs
دنبال یک قطعه کد برای داشتن ویژگی highlighting در کنار بوت‌استرپ می‌گردید؟ پس مطمئنا باید نگاهی به این قطعه کد عالی که توسط Kijan Maharjan ایجاد شده است بیاندازید.
این مورد به شما اجازه می‌دهد که ویجت‌های تب‌پذیری را به برگه‌های‌تان اضافه نمایید که شامل استایل‌های مختلف برای مشخص‌کردن استایل کدها است.
رنگ‌های مربوط به این طرح را شما از کتابخانه code-prettify برمی‌دارید. در این حالت طراحی کلی ایجاد شده و تنها با استفاده از تغییرات کوچکی در CSS میتوانید به کارتان ادامه دهید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید