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

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

افزونه رنگ بندی کد برای نمایش در سایت WP-SynHighlight

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

حالا ما اگر خواسته باشیم همین رنگ بندی را در صفحات نوشتۀ سایت وردپرس خود داشته باشیم، باید چه کار کنیم؟ برای انجام این کار انتخاب های زیادی پیش رو داریم که یکی از آنها استفاده از افزونه WP-SynHighlight است. این افزونه دارای قابلیت های بسیار خوبی است. از جمله پشتیبانی کردن از ۱۱۶ زبان کدنویسی مختلف که هر کدام را برای ما با ساختار خودش رنگ بندی می کند. تنظیمات حرفه ای و استفاده ساده هم از دیگر ویژگی هایی این افزونه رنگ بندی کد برای نمایش در سایت می باشد.

مزیت های افزونه WP-SynHighlight

افزونه WP-SynHighlight دارای امکاناتی به قرار زیر می باشد:

• امکان قرار دادن حالت رنگ بندی کدها در متن نوشته و متن دیدگاه ها
• پشتیبانی از حالت دیداری ویرایشگر وردپرس. بدون اینکه خواسته باشید به سربرگ “متن” یا جای دیگری بروید.
• دیدن نتیجه رنگ بندی به صورت فوری در ویرایشگر متنی وردپرس
• بدون اینکه خواسته باشید تک تک گزینه های وارد کردن کد به صورت رنگ بندی شده را به خاطر بسپارید، در ویرایشگر یک دکمه برای اطلاع رسانی شما افزوده می شود.
• انجام تغییرات کلی روی نمایش تمام کدهایی که تا به حال در نوشته های خود وارد کردید.
• تنظیمات بسیار کامل و جامع برای سفارشی سازی هر چه بیشتر نحوۀ نمایش کدهای رنگ بندی شده در سایت

نحوه کاربرد

پس از نصب افزونه WP-SynHighlight یک نوار هشدار در بالای پیشخوان نمایش داده می شود که شما را دعوت به انجام تنظیمات آن می کند. با کلیک روی adjust its settings وارد صفحه تنظیماتش این افزونه می شوید. یا اینکه از نوار ناوبری به تنظیمات > WP-SynHighlight بروید.

اما در حال حاضر نیازی به انجام تنظیمات این افزونه ندارید. تا اینکه فعلاً با طرز کارش آشنا شوید. پس اگر افزونه همینک به حالت فعال درآمده باشد، اگر به صفحه افزودن نوشته بروید، یک دکمه با نام WPSynHighlight.desc به دکمه های ویرایشی اضافه می شود که شما از الان به بعد باید از آن استفاده کنید.

شما به دو روش می توانید اقدام کنید. روش اول این است که از همان قسمت دیداری ویرایشگر کد را در بین دو برچسب[codesyntax] [/codesyntax] بگذارید. یا اینکه روی دکمۀ WPSynHighlight.desc که در تصویر زیر مشخص است کلیک کنید.

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

مثلاً به گزینه اول که با نام WPSynHighlight_dlg.Language مشخص است، زبان کدی که قصد رنگ بندی کردن آن را داریم را می توانیم از اینجا انتخاب کنید. خود افزونه به صورت خودکار تشخیص خواهد داد که زبانش چیست. اما اگر تشخیصش اشتباه بود، خود ما می توانید آن را اصلاح کنید.

نوار لغزان عمومی را بگیرید و به سمت پایین بکشید. جعبه ای وجود دارد که متن Enter code here را درون خود دارد. باید کدی که می خواهید در متن تان نشان داده شود را وارد کنید. کد دقیقاً در همان جا ظاهر خواهد شد که اشاره گر قبلاً در آنجا قرار گرفته بود.

دیگر موارد تنظیمی هم به همین نحو قابل انجام است. از نام هر مشخصه کاملاً مشخص است که چه کار قرار است روی کد ما انجام دهد. در انتها باید روی دکمۀ {#WPSynHighlight_dlg.Insert} که در انتهای جعبه وجود دارد کلیک کنید تا هر آنچه که باید وارد ویرایشگر وردپرس شود، وارد گردد.

این بود از آموزش نحوه استفاده از افزونه WP-SynHighlight که برای قرار دادن کد رنگ بندی شده در متن می شد از آن استفاده کرد.

تنظیمات WP-SynHighlight

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

• Enable code highlighting in comments : نمایش رنگ بندی کدها در متن دیدگاه ها را فعال می کند.
• Disable EditArea (realtime code highlighting in GUI) : جعبۀ ویرایشی که در ویرایشگر متن وردپرس برای کدهای رنگ بندی شده نشان می دهد را غیرفعال می کند.
• Default code block title : عنوان پیش فرض جعبه کد را می توانید از اینجا تعیین کنید.
• Default line numbering style : نوع شماره گذاری خطوط کد برای بازدید کنندگان از این جا قابل تنظیم است.
• Line numbers by default start with : عددی که شماره خطوط باید از آن شروع شوند.
• Default container : برچسبی که قرار است به صورت پیش فرض در بر گیرندۀ کد ما باشد را از اینجا می توانید انتخاب کنید.

در نهایت روی ذخیره‌ی تغییرات کلیک کنید تا تنظیمات ذخیره گردند.

پس تا اینجا دیدید که چقدر ما راحت با استفاده از افزونه WP-SynHighlighter توانستیم کدهای رنگ بندی شده برای زیباتر شدن نوشته های سایت مان را درون سایت وردپرس وارد کنیم. البته برای این کار افزونه های دیگری هم وجود دارد که شما را به آموزش ها و مقالات دیگر ارجاع می دهیم.