نمایش کد در سایت وردپرسی با افزونه SyntaxHighlighter Evolved

زمان انتشار:
تعداد بازدید: 78
دسته بندی ها: افزونه وردپرس، کاربردی
حالت تمام صفحه:

نمایش کد در وردپرسسلام دوستان؛
بنا به دلایل متعددی چون آموزش و… گاها نیاز داریم کدهایی را در صفحات خود درج و در معرض دید کاربران قرار دهیم. اگر به دنبال راهی برای نمایش کد در وردپرس یا صفحات و پست‌های خود هستید توصیه می‌شود از افزونه وردپرس SyntaxHighlighter Evolved استفاده کنید.

نمایش کد در وردپرس

افزونه‌ وردپرس SyntaxHighlighter Evolved به شما اجازه می‌دهد که کد‌ها را در کوتا‌ه‌ترین شکل و به صورت شورت‌کد به پست‌ها و نوشته‌های خود اضافه کنید. این افزونه بیش از ۴۰۰۰۰+ نصب فعال داشته است و توانسته امتیاز ۴/۳ از ۵ را به خود اختصاص دهد.

جالب است بدانید، این افزونه برای زبان‌های انگلیسی، آلمانی، ژاپنی، روسی و اسپانیایی توسعه داده شده است.

نصب و راه‌اندازی افزونه نمایش کد در وردپرس

  1. ابتدا افزونه SyntaxHighlighter Evolved را برای نمایش کد در وردپرس از انتهای همین صفحه دانلود کنید.
  2. از قسمت پیشخوان> قسمت افزودن افزونه، فایل زیپ آن را بارگذاری کرده و سپس آن را فعال کنید.
  3. پس از نصب و فعال‌سازی در قسمت پیشخوان، منو تنظیمات> زیرمنو SyntaxHighlighter را مشاهده می‌کنید.

بخش SyntaxHighlighter Settings

نمایش کد در سایت وردپرسی با افزونه SyntaxHighlighter Evolved

  • Highlighter Version: در این قسمت می‌توانید افزونه را بر روی نسخه ۳ یا نسخه ۲ قرار دهید.

نسخه ۳ به بازدیدکنندگان اجازه می دهد تا به آسانی بخش هایی از کد خود را با موس (با کشیدن یا دوبار کلیک کردن) برجسته کرده و آن را در کلیپ بورد خود کپی کنند.

در نسخه ۲ امکان line wrapping* وجود دارد.

*line wrapping در لغت به معنای بسته بندی خط و یک ویژگی پردازش کلمات است. وقتی یک خط نوشته شد، پردازشگر کلمه به طور خودکار مکان نما را به خط بعدی انتقال می دهد، بنابراین کاربر لازم نیست کلیدی را بعد از هر خط فشار دهد.

  • Color Theme: با استفاده از این گزینه می‌توانید تم باکس کد خود را در سایت انتخاب کنید.
  • Load All Brushes: از طریق این گزینه می‌توانید تمام زبان‌های تحت وب را فعال کنید.

تنظیمات Defaults

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

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

نمایش کد در سایت وردپرسی با افزونه SyntaxHighlighter-Evolved

  • Display line numbers: با فعال کردن این گزینه  شماره خط‌‌‌ها نمایش داده می‌شوند.
  • Display the toolbar: اگر این گزینه را فعال کنید امکانات افزونه در نوار ابزار فعال خواهند شد.
  • Automatically make URLs clickable: تا زمانی که این گزینه را فعال نکنید نمی‌توانید بر روی URL‌های موجود در باکس کد کلیک کنید.
  • 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: اگر تیک این گزینه را بزنید خطوط طولانی به خط بعد منتقل می‌شوند و دیگر نیازی به استفاده از اسکرول بار افقی نیست. (این ویژگی تنها برای نسخه ۲ به کار می‌رود)
  • Additional CSS Class(es): برای اینکه بتوانید کدهایتان را با استفاده از استایل خاص نمایش دهید، باید آی‌دی مربوط به css آن را در این گزینه وارد کنید.
  • Starting Line Number: در این گزینه می‌توانید تعیین کنید که شماره‌ خط کدها از چند شروع شوند.
  • Line Number Padding: از این گزینه می‌توانید تعیین کنید که شماره‌ خط کدها چندرقمی باشند.
  • Tab Size: از این گزینه می‌توانید سایز تب‌های مورد استفاده را مشخص کنید.
  • Title: در این گزینه می‌توانید برای بلوک کد خود عنوان مناسب انتخاب کنید.

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

  • preview: در این بخش پس از اعمال تنظیمات مانند تصویر زیر می‌توانید پیش‌نمایشی از باکس کد را مشاهده کنید.

نمایش کد در سایت وردپرسی با افزونه SyntaxHighlighter-Evolved

  • Shortcode Parameters: با استفاده از شورت‌کدهای موجود در این بخش می‌توانید افزونه را شخصی سازی کنید.

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

ممکن است بپرسید پس از نصب افزونه و اعمال تنظیمات، چگونه کد خود را در سایت نمایش دهیم؟

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

نحوه کار با افزونه hightlighter

همان طور که در تصویر زیر مشاهده می‌کنید، کد css در بخش نوشته‌ها قرار داده شده است:

نمایش کد در سایت وردپرسی با افزونه SyntaxHighlighter-Evolved

دموی نهایی

پس از انجام مراحل ساخت باکس کد، می‌توانید کدها را با قالب ویژه در سایت خود مشاهده کنید.

نمایش کد در سایت وردپرسی با افزونه SyntaxHighlighter-Evolved

جمع بندی نهایی‌

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

امیدوارم از آموزش نمایش کد های php و html در سایت راضی بوده باشید. موفق باشید. 🙂

دانلود افزونه و قالب وردپرس- download worpress plugin and theme دانلود افزونه نمایش کدهای PHP,HTML‌ و CSS

دانلود  صفحه‌ی افزونه

نمایش کد در سایت وردپرسی با افزونه SyntaxHighlighter Evolved
5 ستاره از ۳ رای

درباره نویسنده

7 نوشته تا کنون
اگر مسیرم (در هدف) از جهنم هم بگذرد ، به راهم ادامه خواهم داد...چرچیل

پاسخ دهید

دیدگاه شما برای ما ارزشمند است. در کمترین زمان ممکن به آن پاسخ خواهیم داد.

دیدگاه های این نوشته

دیدگاهی برای این نوشته وجود ندارد.