ویدیوهای فارسی و رایگان آموزش وردپرس

همینک دانلود و تماشا کنید

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

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

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

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

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

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

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

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

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

نحوه کاربرد

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

ورود به تنظیمات WP-SynHighlight

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

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

وارد کردن کد رنگ بندی شده با WP-SynHighlight

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

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

جعبه تنظیمی وارد کردن کد با WP-SynHighlight

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

یک آموزش جذاب دیگه!  ایجاد کتابخانه ای از تکه کدها برای گذاشتن در نوشته ها

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

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

تنظیمات 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 توانستیم کدهای رنگ بندی شده برای زیباتر شدن نوشته های سایت مان را درون سایت وردپرس وارد کنیم. البته برای این کار افزونه های دیگری هم وجود دارد که شما را به آموزش ها و مقالات دیگر ارجاع می دهیم.

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

درباره ®WPTutorial

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

هنوز دنبال هاست خوب می‌گردید؟!

🥇 هاست حرفه‌ای همراه با؛ بسته های رایگان ویدیوهای آموزش وردپرس و طراحی سایت !
کد تخفیف 10 درصد : off10wt

خرید هاست و دامین ارزان

هاست فوق العاده