• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

highlightjs : استایل دهی به کد زبانهای برنامه نویسی مختلف

2 1489 ۲۲ اسفند ۹۳

در این مطلب میخوام یک ابزار بنام highlightjs رو خدمتتون معرفی کنم که با استفاده از اون میتونین کدهایی که درون سایتتون قرار میدین رو استایل دهی کنید و به ظاهر سایتتون زیبایی ببخشید. استفاده از این ابزار خیلی راحته. این ابزار از 112 زبان برنامه نویسی بصورت اتوماتیک پشتیبانی میکنه و همچنین 49 استایل متفاوت رو شامل میشه. در اینجا میتونین تعدادی دمو در مورد این ابزار رو ببینید.

highlightjs

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به فایلهای github.css و highlight.pack.js نیاز داریم.

من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید. حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

فایل Javascript که من قرار دادم ، highlight.pack.js هست. این فایل شامل همه زبانها هست و بهمین دلیل حجمش زیاده. اگه بخواید برای زبان خاصی فقط قرار بدین ، میتونین اینجا برید و فایل مورد نظر رو دانلود کنید.

همچنین برای هر استایل متفاوت که مد نظرتون باشه ، باید فایل CSS متناظرشو در قسمت head قرار بدین. من استایل github.css رو قرار دادم. شما میتونین به اینجا برید و هر کدوم رو که دوس داشتین دانلود و استفاده کنید.

همچنین لیست زبانهایی که این ابزار پشتیبانی میکنه در اینجا قرار گرفته.

اولین کاری که باید بکنید اینه که یک تگ pre قرار بدین و درون اون هم یک تگ code قرار بدین.  بصورت زیر :

حالا بجای ... باید کدهای مورد نظرتون رو قرار بدین. این ابزار بطور اتوماتیک میفهمه که کدهاتون چه زبونی هستن و نیازی نیست که مشخص کنید. ولی کار از محکم کاری عیب نمیکنه ، میتونین یک class به تگ code نسبت بدین و زبون رو مشخص کنید. من در بالا HTML قرار دادم.

بعد از اینکار کافیه که در تگ script نهایی کد زیر رو قرار بدین :

با اینکار کدهاتون استایل مورد نظر رو میگیرن و به هدفتون میرسید. این متد ویژگی های زیادی داره که یکی از مهمتریناش tabReplace هست ، که میتونین با استفاده از اون مشخص کنید که هر تو رفتگی چند space باشه. برای اینکار بصورت زیر عمل میکنیم :

در بالا 4 تا space قرار دادم که شما میتونین اونو بیشتر یا کمتر کنید.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    واقعا عالی نمونه این کد رو در سایت W3school میبینیم که در ادیتور خودش قرار داده

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram