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

سلام به دوستان عزیزم. این پست رو با توجه به درخواست های متعدد از طرف کاربران عزیز میزارم , در اینجا میخوام به دوستان عزیز نشون بدم که چجوری یک کد رو توی سایت خودمون به صورت رنگی شده نشون بدیم , نمیخوایم از عکس استفاده کنیم 😀 کد رنگی شده قابل انتخاب شدن و کپی شدن توسط کاربر خواهد بود.(پیش نمایش نهایی رو میتونید از اینجا ببینید – کلیک کنید)

ما برای رنگی کردن کدهای خودمون یا هایلایت کردن کدها (syntax highlight) میتونیم از کتابخونه های مختلف استفاده کنیم و نیازی نیست خودمون رو توی دردسر بندازیم و برنامه نویسی کنیم! چرخ رو نباید از اول ساخت!!!

در اینجا قصد دارم طریقه ی استفاده از prism رو به شما دوستان عزیز اموزش بدم , برای استفاده از کتابخونه ی پریسم (Prism.js) باید سه مرحله رو انجام بدید:

  1. اون رو با توجه به نیاز خودتون دانلود کنید.
  2. به صفحه خودتون اظافه کنید
  3. یه تگ pre که توش تگ code هست توی صفحه ایجاد کنید و لذت ببرید 😐 به همین راحتی.

حالا بریم این سه مرحله رو انجام بدیم:

مرحله اول : دانلود Prism.js رو میتونید از سایت اصلی اون از اینجا (کلیک کنید) انجام بدید , بعد از اینکه به سایت رفتید روی دکمه ی دانلود که در بالای صفحه قرار داره کلیک کنید , بعد از کلیک کردن روی دکمه ی دانلود به یه صفحه ی دیگه خواهید رفت که پر از تنظیمات مختلف هست!!!! تنظیمات رو به صورت زیر میتونید انجام بدید:

  1. در قسمت Compression level بهتره که minified version رو انتخاب کنید تا ورژن فشرده شده به شما داده بشه
  2. در قسمت Themes یکی از استایل هایی (تم یا پوسته) که دوسدارید رو انتخاب کنید.
  3. در قسمت Languages زبان های برنامه نویسی که میخواید به صورت رنگی نشون بدید رو انتخاب کنید! اگه نمیدونید که چی رو باید انتخاب کرد بهتره که روی دکمه ی Select/unselect all یکبار کلیک کنید تا تمامی زبان های برنامه نویسی انتخاب بشن و خیالتون راحت باشه که همه چیز رو دارید.
  4. بعد از اینکه قسمت languages رو انجام دادید به پایین صفحه برید تا به قسمت Plugins برسید. در این قسمت پلاگین های اظافی نشون داده شده. این پلاگین ها قابلیت های اظافه تری به شما میدن! هرکدوم رو که میخواید میتونید انتخاب کنید. (همه رو انتخاب نکنید حجمش زیاد میشه) بهتون پیشنهاد میدم که پلاگین های زیر رو انتخاب کنید: (اگه نتونستید دانلود کنید نگران نباشید چون در اخر پست برای دانلود قرار دادم)
  • Line Highlight : برای هایلایت کردن و متمایز کردن خط مشخصی از کد مورد استفاده قرار میگیره.
  • Line Numbers : برای نشون دادن شماره ی خط کدها مورد استفاده قرار میگیره.
  • Show Language : بالای کد شما درج میکنه که از چه زبان برنامه نویسی استفاده کردید (اگه دوسندارید این رو انتخاب نکنید)
  • Normalize Whitespace : فاصله های فضای خالی رو نرمالسازی میکنه تا کد شما زیباتر نمایش داده بشه.

بعد از اینکه تنظیمات رو انجام دادید در پایین صفحه روی دوتا دکمه ی download js و download css کلیک کنید و این دوتا فایل رو دانلود کنید. بعد از دانلود , یک پوشه با هر نامی که میخواید بسازید (مثلا من یه پوشه با نام mahdi ساختم) و این دوتا فایل رو توی اون پوشه بریزید. بعدش یه فایل با پسوند html بسازید و کنار این دوتا فایل قرار بدید و با ادامه ی آموزش با من همراه باشید 🙂

مرحله ی دوم و سوم (فینال مسابقات – همون مرحله اخر) : بعد از اینکه مراحل بالا رو انجام دادید نیاز دارید تا فایل های js و css که دانلود کردید رو به صفحه خودتون اظافه کنید تا بتونید ازشون استفاده کنید , مثلا من به صورت زیر این دو فایل رو به صفحه خودم اظافه کردم :

در کد بالا من فایل css که دانلود کردم (prism.css) در head صفحه اظافه کردم و فایل js رو نیز (prism.js) در انتهای body اظافه کردم. حالا برای رنگی نشون دادن کدهای خودم باید یه تگ pre که داخلش تگ code قرار داره ایجاد کنم و کدهای خودم رو درون تگ code قرار بدم تا رنگی نشون داده بشن! برای اینکه مشخص کنم از چه زبان برنامه نویسی دارم استفاده میکنم باید به تگ code یک کلاس به صورت language-css (در اینجا کد من از نوع css هست) اظافه کنم. اون کلمه ی css رو باید با توجه به زبان برنامه نویسی که استفاده میکنید قرار بدید , به مثال زیر دقت کنید:

در مثال بالا من یه صفحه ساختم و کد خودم رو که از نوع css هست به صورت رنگی نمایش میدم! میتونید پیش نمایش کد بالا رو از اینجا ببینید(کلیک کنید) , به همین راحتی شما کدهای خودتون رو به صورت خوشکل و رنگی نمایش دادید 😀

حالا بریم سراغ کار کردن با plugin هایی که اونها رو انتخاب کردیم:

پلاگین Line Numbers در prism : این پلاگین شماره خطوط کد رو نیز نمایش میده. برای فعال کردن این پلاگین نیاز دارید تا کلاس line-numbers رو به تگ pre خودتون اظافه کنید. به مثال زیر دقت کنید:

در مثال بالا من کد خودم که از نوع php هست رو رنگی نمایش میدم و همچنین شماره خطوط کد رو نیز در کنار هر خط نمایش میدم , پیش نمایش مثال بالا رو میتونید از اینجا ببینید (کلیک کنید).

پلاگین Line Highlight در prism : این پلاگین برای تمایز کردن خط خاصی از کد مورد استفاده قرار میگیره برای اینکه شما بتونید این پلاگین رو فعالسازی کنید کافیه که در تگ pre ابتدا کلمه ی data-line رو بنویسید و بعدش اون رو برابر با شماره خطی که میخواید متمایز بشه قرار بدید. به مثال زیر دقت کنید:

در مثال بالا من از قالب coy استفاده میکنم (خفن تره انگار) و کد خودم که از نوع جاوا اسکریپت هست رو میخوام رنگی نشون بدم و همچنین خط ۲ از کد خودم رو میخوام علامت گذاری کنم(متمایز کنم). پیش نمایش رو میتونید از اینجا ببینید(کلیک کنید).

اگه میخواید چندین خط رو علامت گذاری کنید(متمایز کنید) میتونید شماره خطوط رو با ویرگول از هم جدا کنید یا اینکه به صورت بازه عمل کنید مثلا اگه بخوام از خط ۵ تا ۱۰ رو متمایز کنم به صورت ۱۰-۵ به data-line مقدار میدم.

پلاگین های Show Language و Normalize Whitespace خودشون عمل میکنن و نیاز به فعالسازی ندارند 😀

دوستان عزیز میتونید قالب های مختلف prism.js رو به صورت لیست زیر ببینید:

همچنین اگه نتونستید کد prism مربوط به این قالب ها رو از سایت اصلیش دانلود کنید نگران نباشید چون در انتهای همین پست هرکدوم از قالب ها رو به همراه پلاگین هایی که معرفی کردم  به تفکیک براتون قرار دادم(توی فولدر skin برید بعد از دانلود) امیدوارم که بدردتون بخوره.

موفق و پیروز باشیددددددددددددددددد. اگه سوالی دارید یا مشکلی بود مطرح کنید حتما بررسی و رفع میکنیم براتون. از برنامه نویسی لذت ببرید 😀 بابای.

prism - به همراه پوسته ها و پلاگین های معرفی شده
579.6 KiB
7 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟