آموزش افزونه Crayon Syntax Highlighter

آموزش افزونه Crayon Syntax Highlighter

آموزش افزونه Crayon Syntax Highlighter

آموزش افزونه Crayon Syntax Highlighter

گذاشتن کد در مطالب وردپرس

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

بدون شک افزونه Crayon Syntax Highlighter یکی از افزونه‌های حرفه‌ای و کاربردی در زمینه جایگذاری کدها در وردپرس می‌باشد. نام مخفف این افزونه crayon است.

ویژگی‌های این افزونه:

  • تم‌های متعدد، زیبا و همچنین کاربرپسند
  • پشتیبانی از ۱۲ فونت زیبا برای نمایش کد
  • نمایش شماره خط برای کدهای شما
  • استفاده از برچسب‌های کوتاه برای به کار بردن
  • تعین اندازه فونت کدها
  • تشخیص دستگاه‌های لمسی مانند موبایل، تبلت و …
  • رنگی بودن کدها که به کدهای شما جذابیت می‌بخشد
  • تشخیص فرمت کدها به صورت اتوماتیک
  • استفاده از جلوه‌های زیبا در نمایش کدها
  • پیش‌نمایش کدها به صورت زنده
  • نمایش کدها به صورت خطوط راه راه
  • واکنشگرا بودن جعبه کد
  • پشتیبانی از پیش از ۶۰ زبان برنامه‌نویسی
  • و …

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

برای تنظیمات نمایش افزونه هم به قسمت تنظیمات – زیرمنوی Crayon رفته و تنظیمات سفارشی خود را لحاظ کنید.

آموزش افزونه Crayon Syntax Highlighter

در این قسمت تنظیمات قالب و فونت را مشاهده می‌کنید که می‌توانید آن‌ها را بر حسب سلیقه‌ی خود تغییر داده و در پیش‌نمایش زنده، تغییرات را ملاحظه نمایید.

پیشنهاد بعدی  افزودن جستجوی گوگل در وردپرس با افزونه WP Google Search

قالب: از این بخش می‌توانید از بین قالب‌های آماده که برای نمایش کدهای برنامه‌نویسی در مطالب وردپرس در افزونه وجود دارد، یکی از آن‌ها را انتخاب کنید و یا اینکه با کپی کردن یکی از قالب‌ها خودتان بر اساس دانش کدنویسی که دارید یک قالب دلخواه ایجاد کرده و آن را برای نمایش کدها در نوشته انتخاب کنید.

فونت: با استفاده از این قسمت هم می‌توانید فونت دلخواه برای نمایش در باکس کدها را انتخاب کنید.

آموزش افزونه Crayon Syntax Highlighter

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

معیارها: با استفاده از این قسمت می‌توانید چینش باکس نمایش کد در مطالب وردپرس را تعیین کنید؛ برای این منظور هر قسمت را به دلخواه خودتان بر اساس توضیحات زیر تغییر دهید.

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

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

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

پیشنهاد بعدی  CDN و تأثیر آن بر سرعت سایت

با گزینه تراز افقی هم می‌توانید تراز باکس کد را به انتخاب خودتان در مرکز نوشته، سمت چپ و یا سمت راست قرار دهید تا ظاهر و جلوه منظم‌تری برای این باکس ایجاد کنید.

تولبار: با استفاده از این بخش می‌توانید منوی بالای باکس نمایش کدهای برنامه‌نویسی در وردپرس را سفارشی‌سازی کنید که منوی تولبار در چه حالتی به کاربران نمایش داده شود. در حالت عادی، تولبار در باکس مخفی است و وقتی نشانگر موس روی باکس کد قرار بگیرد، تولبار در بالا نمایش داده می‌شود که می‌توانید از ابزار آن مثل کپی کردن کدها، نمایش کدها در پنجره جدید و … را کنترل کنید.

خطوط: این بخش به شما این امکان را می‌دهد که برای هر خط کد نوشته شده در باکس کدی که در متن نوشته وردپرس قرار دارد، استایل بهتری قرار دهید و شماره‌گذاری برای هر خط، امکان علامت‌گذاری روی خطوط مهم و تنظیمات دیگر را مدیریت کنید.

آموزش افزونه Crayon Syntax Highlighter

قسمت بعدی، مربوط به تنظیمات کد می‌باشد و کاملاً گویا بوده که می‌توانید این تنظیمات را فعال و یا غیر فعال کنید و تغییرات را در قسمت پیش‌نمایش زنده مشاهده نمایید.

آموزش افزونه Crayon Syntax Highlighter

قرار دادن کد در نوشته با Crayon Syntax Highlighter

برای قرار دادن کد در نوشته یا برگه، طبق تصویر زیر بر روی آیکن افزونه در ویرایشگر وردپرس در نوشته یا برگه کلیک کنید.

پیشنهاد بعدی  نمایش آمار بازدید در وردپرس با افزونه WP Statistics

آموزش افزونه Crayon Syntax Highlighter

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

آموزش افزونه Crayon Syntax Highlighter

تمام تنظیماتی که در قسمت تنظیمات افزونه Crayon Syntax Highlighter هست را می‌توانید در این بخش هم مشاهده کنید که در صورتی مورد استفاده قرار می‌گیرد که شما یک تغییر می‌خواهید بدهید و این جعبه کد از سایر جعبه‌های موجود در مطالب متمایز شود، ولی توصیه می‌کنم چنین تغییراتی انجام ندهید؛ چون بعداً اگر بخواهید به صورت کلی تنظیمات را عوض کنید به مشکل خواهید خورد (تغییراتی که می خواهید انجام دهید، از داخل تنظیمات اصلی افزونه انجام دهید).

بعد از اینکه کد خودتان را در نوشته اضافه کردید، مشابه تصویر زیر خواهید دید که کدها با ظاهری زیبا و منظم در نوشته نمایش داده خواهند شد و کاربران هم قادر خواهند بود تا با استفاده از ابزاری که در اختیار دارند، از کدهای برنامه‌نویسی استفاده کنند.

آموزش افزونه Crayon Syntax Highlighter

موفق و سربلند باشید.

محسن صادقی

از سال 94 با وردپرس آشنا شدم. علاقه‌مند به وردپرس/سئو/طراحی سایت/فعالیت در زمینه بازاریابی؛ خوشحال می‌شم تجربیاتم رو در اینجا با شما به اشتراک بگذارم.

    نوشته‌های مرتبط