زیبا سازی نمایشگر کد در وردپرس

افزونه وردپرس, کاربردی محمد خراسانی بدون نظر 15 اکتبر 2019 42 بازدید
زیباسازی نمایشگر کد در وردپرس با افزونه SyntaxHighlighter
زیباسازی نمایشگر کد در وردپرس

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

افزونه SyntaxHighlighter Evolved تا امروز توانسته است به ۴۰ هزار نصب فعال برسد و امتیاز فعلی این افزونه ۴٫۴ از ۵ می‌باشد. این افزونه طبق بررسی‌های تیم کمیابی‌ها افزونه به روز و خوبی هست و خود را با به‌روزرسانی های وردپرس بروز کرده است.

تا قبل از نسخه ۵ وردپرس برای قرار دادن کدها در نوشته‌ها شما می‌بایست با توجه به زبان کدها (زبان برنامه نویسی) می‌بایست از کدهای کوتاه آن زبان استفاده می‌کردید، اما با معرفی وردپرس نسخه ۵ و گوتنبرگ، بلوکی برای قرار دادن کدها توسط این افزونه طراحی شد و خیال خیلی‌ها بابت سازگاری با گوتنبرگ حل شد.

افزونه SyntaxHighlighter Evolved

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

این افزونه دارای پنل تنظیمات نیز می‌باشد که برای دسترسی به آن می‌بایست از قسمت تنظیمات به SyntaxHighlighter مراجعه کنید.

کار با افزونه SyntaxHighlighter Evolved
افزونه SyntaxHighlighter

در این صفحه می‌توانید تنظیماتی جهت نمایش بهتر کدها انجام دهید.

Highlighter Version: در این قسمت می‌توانید نسخه نمایشگر کد را انتخاب کنید که نسخه ۳ را پیشنهاد می‌کنم (البته در زمان نوشتن این مقاله به دلیل اضافه شدن قابلیت برجسته سازی و کپی کردن قسمتی از کد.)

Color Theme: از این قسمت می‌توانید رنگ نمایشگر را تغییر دهید.

Load All Brushes: با فعال سازی این تیک تمامی کدهایی که بین دو تگ <pre> قرار دارد به نمایشگر جدید تبدیل می‌کند.

تنظیمات عمومی

Miscellaneous: در این بخش می‌توانید به ویرایش موارد اضافی و ظاهری بپردازید.

  • Display line numbers: نمایش شماره خط قبل از هر خط کد در نمایشگر.
  • Display the toolbar: با فعال سازی این گزینه تنظیمات افزونه را می‌توانید در نوار ابزار خود مشاهده کنید.
  • Automatically make URLs clickable: این قابلیت لینک‌های داخل کد را به صورت لینک دار در میاورد در واقع تا زمانی که این گزینه فعال نباشد لینک‌ها در کدها به صورت متن ساده نمایش داده می‌شود و قابل کلیک کردن نمی‌باشند.
  • Collapse code boxes: با فعال بودن این گزینه نمایشگر کد قابلیت باز و بسته شدن را پیدا می‌کند. این کار به کاهش حجم نمایش مقاله کمک می‌کند.
  • Use the light display mode, best for single lines of code: با فعال کردن این گزینه خطی که محدوده کد (خط سمت چپ) را مشخص می‌کند از بین می‌رود. (درتم اصلی)
  • Use smart tabs allowing tabs being used for alignment: تب‌های هوشمند بیشتر در کلاس‌های تو در تو کاربرد دارد.
  • Wrap long lines (v2.x only, disabling this will make a scrollbar show instead): با فعال سازی این گزینه خط‌های طولانی به خط‌های متوالی تقسیم می‌شود تا اسکرول افقی دیگر معنایی نداشته باشد. این گزینه همانند توضیح خود افزونه فقط در نسخه ۲ کاربرد دارد.
  • Additional CSS Class(es): در این قسمت در صورتی که می‌خواهید استایل اضافی به افزونه اضافه کنید و یا استایلی را ویرایش کنید کاربرد دارد.
  • Starting Line Number: در این گزینه مشخص می‌کنید شماره خط‌ها با چه عددی شروع شود.
  • Tab Size: در این گزینه سایز تب‌ها را مشخص می‌کنید.
  • Title: در این گزینه می‌توانید برای نمایشگر خود یک عنوان انتخاب کنید.

Preview: بعد از ذخیره تنظیمات می‌توانید پیش‌نمایشی از نمایشگر کد خود ببینید.

Shortcode Parameters: در این قسمت می‌توانید شورت کدها و مثال‌های در استفاده از آن‌ها را ببینید که به لطف گوتنبرگ و بلوک‌ها دیگر نیازی به این مورد ندارید.

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

احساس خود را درباره این مقاله بگویید 0 نظر

زیبا سازی نمایشگر کد در وردپرس
0 0
محمد خراسانی

فعال در حوزه طراحی وب ، سئو ، ui ، ux و مدرس دوره های طراحی وب و هم اکنون مدیریت تیم کمیابی ها را بر عهده دارم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

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

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