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

- visibility ٢ mode_comment

در این مطلب میخوام یک ابزار بنام 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 قرار دادم که شما میتونین اونو بیشتر یا کمتر کنید.

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

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

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

comment دیدگاه کاربران
Amir Saleh

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

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

محمد اسفندیاری

خوشحالم که بدردتون خورده
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.