تبدیل بلوک [code] حاوی کدهای برنامه نویسی به متن رنگی

توی خیلی از سایت ها حتی در اسکریپتی که خودم نوشتم (اینجا رو ببینید) این قابلیت وجود داره که شما یه تیکه کد از کدهای خودتون رو قرار بدید و سایت مورد نظر کد شما رو به صورت رنگی یا هایلایت شده (syntax highlight) نمایش بده! توی این اموزش میخوام به شما اموزش بدم چجوری قابلیتی ایجاد کنید که کاربر کدهاشو بزاره و کدها به صورت رنگی شده نمایش داده بشن. چیزی که در اخر میسازیم رو میتونید از اینجا(کلیک کنید) ببینید , کافیه توی اون textarea یه تیکه کد بنویسید که بین بلوک [code] قرار گرفته باشه تا رنگی نمایش داده بشه.

کاربرها در بیشتر سایتها کدهای خودتون رو توی بلوک [code] کپی میکنن تا رنگی نمایش داده بشه! به مثال زید دقت کنید:

در مثال بالا هدف من این هست که بلوک کد رو به شما دوستان نشون بدم! کاربر میاد توی سایت شما کدش رو بین [code] و [/code] قرار میده و شما کد رو تشخیص میدید و اون رو رنگی نمایش میدید. حالا من اینجا یه قسمت lang هم گذاشتم که کاربر خودش بتونه زبان برنامه نویسی رو تعیین کنه.

مراحلی که برای تبدیل کدها به سینتکس هایلایت شده انجام میدیم به صورت زیر هستند:

  • دانلود کتابخونه ی prism و اظافه کردن اون به صفحه برای هایلایت کردن کدها
  • تشخیص بلوک code درون متنی که کاربر تایپ کرده و معرفی کدها به prism برای رنگی نمایش داده شدن!

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

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

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

در دستورات بالا اومدیم و فایل های css و js مربوط به prism رو (میتونید از انتهای همین پست دانلودش کنید) به صفحه ی خودمون اظافه کردیم. حالا کافیه که کدهای خودمون رو توی تگ pre درون تگ code قرار بدیم و زبان برنامه نویسی مورد نظر خودمون رو به صورت کلاس به تگ code بدیم تا prism کد رو برامون رنگی نمایش بده! چیزی مثل زیر :

در مثال بالا ما برای اینکه با استفاده از prism بتونیم کد خودمون رو رنگی نمایش بدیم از تگ code درون تگ pre استفاده کردیم و برای معرفی زبان برنامه نویسی هم به تگ code کلاس language-css رو دادیم تا prism بفهمه کد ما از نوع Css هست و اون رو رنگی نمایش بده! خب تا اینجا نحوه ی استفاده از prism رو توضیح دادم حالا میایم و کدهایی که کاربر درون بلوک [code] قرار داده رو با php جدا میکنیم و یه چیزی مثل مثال بالا براش میسازیم و کدها رو توش قرار میدیم تا رنگی نمایش داده بشن! این کارا رو در مرحله ی زیر انجام میدیم 😀

مرحله ی اخر : پیدا کردن کدهای بلوک [code] و نمایش رنگی کدها

برای اینکه بتونید کدهایی که کاربر درون بلوک [code] قرار داده رو از بین کوله باری از متن پیدا کنید باید حتما از Regex استفاده کنید! اگه نمیدونید Regex چیه بهتره اموزش های اینجا (کلیک کنید) رو بخونید.

من برای اینکه بتونم بلوک کدهای خودم رو پیدا کنم یه دستور Regex نوشتم که به صورت زیر هست! (مثال زیر رو میتونید از اینجا تست کنید)

دستورات بالا یک regex هست که برای پیدا کردن کدهای درون بلوک [code] و همچنین زبان نوشته شده در قسمت lang استفاده میشه 😀 خب حالا میایم با استفاده از یک تابع به صورت زیر متن رو میگیریم و تبدیلش میکنیم به چیزی که prism بتونه ازش استفاده کنه!

در کدهای بالا با یه تابع با نام createCodeBlocks نوشتیم که کافیه بهش متن مورد نظر خودتون رو بدید تا براتون کدهای درون بلوک [code] رو پیدا کنه و به چیزی تبدیل کنه که برای prism قابل استفاده هست! حالا میایم و تمامی چیزهایی که تا الان ساختیم رو یکجا میکنیم به صورت زیر :

دستورات بالا یه متن رو میگیرن و کدهایی که توی متن درون بلوک [code] نوشته شدن رو به صورت رنگی نمایش میدن 😀 پیش نمایش چیزی که ساختیم رو میتونید از اینجا(کلیک کنید) ببینید همچنین میتونید سورس کد اون رو از انتهای همین پست دانلود کنید و استفاده کنید.

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

سورس کد نمایش دهنده بلوک کد به صورت رنگی
86.4 KiB
5 Downloads
اطلاعات بیشتر
کتابخونه ی prism
کتابخونه ی prism
prism_2.zip
Version: 2015
85.1 KiB
0 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

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