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

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

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

افزونه SyntaxHighlighter

افزونه SyntaxHighlighter یک افزونه حرفه‌ای و کاربردی برای وردپرس می‌باشد که توسط آن قادر به نمایش کد و در دسترس قرار دادن آن برای کاربران سایت وردپرسی خود خواهید بود. این افزونه توانسته است از میان +۵۰,۰۰۰ نصب خود امتیاز  ۴/۵ از ۵ را به خود اختصاص دهد که نشان از رضایت کاربران استفاده‌کننده از این افزونه می‌باشد.

نصب و راه‌اندازی افزونه SyntaxHighlighter

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

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

Color Theme: با استفاده از این گزینه می‌توانید نوع قالب خود جهت نمایش کد در سایت را انتخاب کنید؛ در این بخش نیز چندین گزینه در دسترس است که می‌توانید یکی از استایل‌های موجود را متناسب با نیاز خود شخصی‌سازی کنید.

Load All Brushes: با استفاده از این گزینه می‌توانید تمامی زبان‌های تحت وب را فعال کنید؛ اگرچه در بخش افزودن کد می‌توانید زبان مورد نظر خود را مشخص کنید اما با استفاده از این گزینه تمامی زبان‌های برنامه‌نویسی فعال می‌شود و دیگر مشکلی جهت نمایش کد زبان‌های مختلف برنامه نویسی نخواهید داشت.

Defaults

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

Miscellaneous: این بخش مربوط به نمایش تنظیمات ظاهری و امکانات افزونه است که می‌توانید آنها را فعال یا غیرفعال کنید.

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 (v2.x only, disabling this will make a scrollbar show instead): این بخش مربوط به ورژن ۲ افزونه است که با استفاده از آن ابزار اسکرول بار در بخش نمایش کد نمایان می‌شود.

Additional CSS Class(es): اگر برای این افزونه از استایل اختصاصی سایت خود استفاده کرده‌اید کافی است آیدی مربوط به CSS آن را در این بخش وارد کنید تا کدها شما با استفاده از استایل اختصاصی نمایش داده شوند.

Starting Line Number: شماره خط اول کدهای خود را در این بخش وارد کنید؛ برخی از کاربران می‌خواهند کدهای خود را با صفر آغاز کنند و برخی دیگر می‌خواهند کدهای نمایشی در سایت آنها با استفاده یک نمایش داده شود.

Line Number Padding: اگر نیاز دارید بین خط‌های کد فاصله‌ای باشد با استفاده از این فاصله موردنیاز خود را بر اساس پیکسل در این بخش وارد کنید.

Tab Size: در این بخش می‌توانید سایز تب‌های مورد استفاده خود را در افزونه وارد کنید تا کاربران آن را با سایز مشخص شده توسط شما مشاهده کنند.

Title: با استفاده از این گزینه می‌‍توانید عنوانی را پیش از نمایش کدها در سایت وردپرسی خود وارد کنید تا کدهای شما با استفاده از این سرفصل نمایش داده شوند.

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

ِ

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

در پایان بر روی ذخیره کلیک کنید تا تنظیمات ذخیره شوند. برای درج کدها نیز کافی است در بخش ارسال مطلب از بخش نوار ابزار گزینه مربوط به این افزونه را بزنید و کد مورد نظر خود را جهت نمایش در سایت وارد کنید.

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

 

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

Leave a comment

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