علیرام | علی پیرانی

گاه نوشت های یک توسعه دهنده

آموزش استفاده از کتابخانه highlightjs

2 دیدگاه‌ها

سلام عرض میکنم خدمت کاربران وب سایت aliraam.ir در این آموزش قصد دارم نحوه استفاده از کتابخانه highlightjs برای قرار دادن کد در وب سایت به شما عزیزان آموزش دهم، در ابتدا لازم هست که شما آخرین نسخه این کتابخانه را از وب سایت رسمی highlightjs دریافت نمایید برای دریافت آخرین نسخه روی لینک زیر کلیک نمایید:

دانلود کتابخانه highlightjs

قرار دادن کد در سایت

بعد از دانلود یک فایل HTML ساده ایجاد نمایید و که محتوای آن به شکل زیر می باشد:

فایل را ذخیره کنید highlightjs را دانلود کردید و از حالت زیپ خارج کردین این فایل HTML را در کنار بقیه فایل ها قرار بدین، در ادامه لازم هست شما سه آیتم زیر را به فایل HTML  اضافه کنید:

۱- کتابخانه جی کوئری قابل دریافت از این لینک

۲- کتابخانه highlightjs که در فایل دانلودی موجود می باشد

۳- فایل استایل برای نحوه نمایش کد ها شما میتونید از لینک همه دمو ها رو مشاهده کنید

بعد از اینکه جی کوئری رو دانلود کردید و کنار بقیه فایل ها گذاشتین کد های ما  به شکل زیر میشه:

برای نمایش کد به همان صورتی که وارد میکنیم در وب سایت باید شما کد های مورد نظرتون رو داخل تگ های pre و code قرار بدین به این شکل:

در بالا ما یک تگ pre قرار دادیم و درون اون یک تگ کد با کلاس javascript گذاشتیم چون کد هایی که میخوایم نمایش بدیم کد جاوا اسکریپت هستند، بعد از اینکار شما باید اسکریپت زیر رو در قسمت head کد های فایل HTML قرار بدین:

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

نکات قابل توجه:

در داخل فایلی که از وب سایت highlightjs دریافت میکنید پوشه ای به نام styles وجود داره که میتونید تم های مختلف رو انتخاب کنید برای جایگزینی تم ها کافیه اسم فایل سی اس اس رو با اسم فایل  default.css تو خط ۴ جایگزین کنید.

در صورتی که تو خط اسم کلاس زبان رو هم اضافه نکنید highlightjs به صورت اتوماتیک شناسایی میکنه زبان رو ولی به قول معروف کار از محکم کاری عیب نمیکنه 🙂

در آخر هم میتونید این پروژه رو از لینک زیر دریافت کنید، در صورتی که قسمتی براتون نامفهوم بود تو قسمت نظرات مطرح کنید تا توضیح بیشتر داده بشه 🙂

دانلود فایل نمونه highlightjs

 

 

 



برچسب‌ها:

  1. MRhaghighi گفت:

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

    1. علیرام گفت:

      ممنون از لطفت MRhaghighi عزیزم شاد باشی 🙂

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

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