افزونه وردپرس نمایش کدها syntaxhighlighter

با عرض سلام و خسته نباشید خدمت شما دوستان وب سایت دکتر وردپرس ، امروز با معرفی افزونه SyntaxHighlighter Evolved که در سایت خودمان هم ازش برای نمایش کدها در وردپرس استفاده می کنیم ، در خدمت شما هستیم.

دانلود و نصب افزونه syntaxhighlighter

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

راهنمای تنظیمات افزونه SyntaxHighlighter

طبق شکل زیر من فکر کنم بهترین تنظیمات افزونه به حالت زیر باشه ، بقیه گزینه ها هم تو شکل نیست دست نزنید به نظرم.

آموزش استفاده از افزونه SyntaxHighlighter Evolved

فقط کافیه که تو نوشته هاتون یا توی دیدگاهاتون و … اون کد مورد نظر رو ما بین یکی از این ۳ کد زیرقرار بدید ( ما این جا به جای کدها ۳نقطه گزاشتیم ! )

[ html ]....[/ html ]

[ css ]....[/ css ]

[ php ]....[/ php ]

نکته : ما چون خودمون هم داریم از این افزونه استفاده میکنیم مجبور شدم تو کدهای بالا از حرف space استفاده کنم تا بتونم نشونتون بدم ، تو ۳ تا کد بالا space ها رو حذف باید کنید !

حذف اسکرول بار افقی افزونه نمایش کدها

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

برای این کار باید به مسیر زیر برید و فایل shCore.css رو پیدا و ادیت کنید و یک چیزی که من بهش میگم اضافه کنید.

wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css

توی فایل shCore.css  عبارت white-space: pre رو سرچ کنید باید یک کد اینطوری حتما پیدا کنید مثل زیر

.syntaxhighlighter .line {
 white-space: pre !important;
}

و اونو باید به شکل زیر تغییر بدید

.syntaxhighlighter .line {
 white-space: pre-wrap !important;
}

با همین کار ساده اسکرول بار افقی حذف میشه و خطوط طولانی به خط بعدی هدایت میشن !!

صفحه افزونه در مخزن وردپرس

منبع نکته آخر (حذف اسکرول بار افقی )