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

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

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

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

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

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

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

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

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

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


[ html ]....[/ html ]


[ css ]....[/ css ]


[ php ]....[/ php ]

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

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

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

حذف اسکرول بار افقی افزونه syntaxhighlighter

برای این کار باید به مسیر زیر برید و فایل 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;
}

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

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

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

امتیاز شما برای این مقاله
21 نظرات
  1. حسین می گوید

    ممنون از اینکه پاسخ من را دادید
    اول یه مشکل داشتم که کدها راست چین میشدن .. با دایرکشن دادن به css ها حل شد
    بعد وقتی که از استفاده میکنم کلی کد اضافی هم با نوشته ها ذخیره میشه مثل br یا nbsp و pre و غیره که بخاطر scapestring فکر کنم اضافه میشه .. هر کار میکردم درست نمیشد بعد افزونه syntaxhighlighter button رو اضافه کردم و یکم شرایط بهتر شد . اما بازم یه مشکلاتی هست
    نمیدونم چرا اینطوری میشه

  2. hossein می گوید

    سلام مهندس
    من وقتی از افزونه استفاده میکنم کلی کد به کدام اضافه میشه ؟
    چرا ؟
    مثلا کلی و  

    1. آرش حیدری می گوید

      سلام
      یعنی چی کد به کدهاتون اضافه میشه ؟ کجا رو میفرماید ؟
      بیشتر توضیح میدید ؟
      ممنون

  3. سعید می گوید

    با سلام .داداش این افزونه تو سایت من خراب کار میکنه !!!!یعنی مث شما قشنگ نشون نمیده .میشه کمکم کنید؟؟

    1. آرش حیدری می گوید

      سلام
      لطفا قالبتون رو عوض کنید و تست کنید شاید مشکل از قالبتون هستش .
      ممنون

  4. رمان صمیمی می گوید

    با سلام دوست عزیز
    یک هفته هستش دنبال این می گردم ولی پیدا نمی شد که از سایت 7learn دربارش پرسیدم اونام اسم افزونه رو دادن گفتن جست و جو کن و شما رو پیدا کردم
    تشکر

  5. پدرام می گوید

    جالب بود
    ممنون :)

  6. پیمان بندی می گوید

    امتحان میکنیم

    ....
    1. پیمان بندی می گوید

      اقا مو به مو انجام دادم برای من نشد

  7. AryanP می گوید

    جالب بود ممنون : )

  8. سامانه پیام کوتاه می گوید

    با تشکر از مدیر گرامی
    بسیار مفید بود

  9. محمد می گوید

    سلام.
    عالی بود ممنون.

  10. عـلیـــــرضــ ــا می گوید

    سلام آرش جان . این syntaxhighlighter فقط برای همین اچ تی ام ال و سی اس اس و پی اچ پی هستش یا برای زبان های دیگه هم کاربرد داره؟ مثلا اکشن اسکریپت!

    1. آرش حیدری می گوید

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

  11. عـلیـــــرضــ ــا می گوید

    مــــرسی
    خیلی خوبه :D

  12. عـلیـــــرضــ ــا می گوید
    <?php
    echo 'hello arash heydari';
    ?>
    

    خواستم امتحان کنم!

    1. آرش حیدری می گوید

      درست هستش : )

  13. حسین می گوید

    سلام
    خدا عمرتون بده!
    کارمو راه انداختین.
    خیلی ممنونم

  14. محسن کریمیان می گوید

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

    1. آرش حیدری می گوید

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

  15. جواد می گوید

    کاربردی بود
    تشکر

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.