قصد دارید بخشی از کد ها را در پست های وبلاگ نمایش دهید ؟ اگر از وردپرس یا هر سرویس انتشار محتوای دیگری استفاده کنید. باید بدانید این ویژگی بصورت اولیه تعریف نشده، یعنی اگر هم بخواهید با بالا پایین کردن کاراکترها، کد خود را به نمایش بگذارید، ممکن است بخشی از کدها تبدیل شود یا به درستی نمایش داده نشود. در این مقاله، نحوه استفاده از ابزار قدرتمندی به نام Prism.js را برای ایجاد جعبه‌های کد با تم های مختلف در وبلاگ خود بررسی خواهیم کرد که نمونه‌های کد شما را در دسترس‌تر و جذاب‌تر می‌کند.
چرا باید از Code Highlighter برای وبلاگ خود استفاده کنید؟
تصور کنید که یک آموزش CSS را خوانده‌اید، و قصد دارید نمونه کدی از آن را به اشتراک بگذارید. اگر مستقیما بدون هیچ ابزاری کد را کپی پیست کنید، با یک متن سیاه و سفید ساده مواجه می‌شوید. این مورد گاهی میتواند گیج کننده باشد ؟ چرا ؟
در زبان های مختلف برنامه نویسی، چیزی به نام Syntax وجود دارد. این یعنی با توجه به زبانی که از آن استفاده می‌کنید. خاصیت و پارامتر های مختلفی در کد شما وجود دارند که وظایفی اصلی انجام می‌دهند. شاید 15 نوع مختلف ویژگی attribute همگی تقریبا یک وظیفه را به طرق مختلف انجام دهند. آیا متمایز کردن این ۱۵ نوع کلمه در کد شما با دیگر ویژگی‌ها با یک رنگ مشخص، خوانا بودن آن را بهبود نمی‌بخشد ؟ وقتی از ویژگی Code Highlighter برای جایگذاری کد در نوشته خود استفاده می‌کنید. این ویژگی ها بطور خودکار با توجه به زبان برنامه نویسی شما متمایز می‌شوند و کد شما با رنگ‌ها و سبک‌های مختلف بر اساس زبان آن نمایش داده می‌شود. این یعنی:
- افزایش قابلیت خوانا بودن کد
- قابل فهم بودن کد با استفاده از ویژگی تمایز
- استفاده از دکمه‌های (کپی) و تم های زیبا
- ایجاد ظاهری حرفه‌ای برای وبلاگ شما
چرا از پلاگین وردپرس برای اضافه کردن باکس کد یا highlighter استفاده نکنیم ؟
به عنوان یک وبمستر با دارا بودن بیش از 9 سال سابقه در کار با وردپرس. اکیدا به شما پیشنهاد می‌کنم که سایت وردپرسی خود را سبک نگه دارید و کاری را که با کدنویسی می‌توانید انجام دهید هیچ گاه با پلاگین انجام ندهید. این کار باعث اضافه شدن سیلی از ویژگی ها به وبسایت شما می‌شود که شاید اصلا به آنها نیاز نداشته باشید. ناگهان با یک وبسایت کند و سنگین مواجه می‌شوید ! بنابراین برای داشتن یک سایت حرفه‌ای، سبک، سریع و کارامد، سعی کنید از پلاگین برای انجام کارهای ساده استفاده نکنید !.
همچنین بخوانید : آموزش کامل ساخت دکمه ورود با گوگل به پنل ووکامرس بدون پلاگین
شروع به کار با Prism.js نصب آسان
Prism.js یک برجسته کننده کد رایگان، سبک و با استفاده آسان است. بهترین قسمت آن ؟ برای تنظیم آن نیازی نیست که برنامه نویس باشید! اینجا در یوبنر نحوه نصب آسان و سریع این ویژگی را برای شما آماده کردیم. کافی است فقط دو خط کد را کپی پیست کنید.
کدهای HTML و جاوا اسکریپت زیر را به قالب نوشته های خود اضافه کنید.
کد زیر یک کد HTML است که استایل و تم های مختلف را فراخانی می‌کند. فایل منیجر هاست خود را باز کنید. در موقعیت wp-content<theme فایل قالب خود را باز کنید.
در قالب خود بگردید و ببینید کدام فایل مربوط به نمایش نوشته های سایت شماست. این فایل معمولا با نام single-post.php در پوشه قالب شما موجود است. با توجه به این که از چه قالبی استفاده می‌کنید این فایل ممکن است در مکان های مختلفی باشد. در ادامه دو کد زیر را به ترتیب دنباله یکدیگر وارد و تغییرات را ذخیره کنید.
– کد اول
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css”>
– کد دوم جاوا اسکریپت زیر را به ادامه کد بالا به قالب نوشته های خود اضافه کنید
<script src=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js”></script>
کار تمام شد ! با شورت کد زیر باکس کد خود را به قسمت دلخواه اضافه کنید
حال می‌توانید نوشته خود را ویرایش کنید. یا نوشته‌ای جدید ایجاد کنید. هرکجا که خواستید باکس کد را به نوشته خود اضافه کنید. کد خود را بین تگ‌های زیر قرار دهید.
<code class=“language-css“> مکان کد شما css اینجا است </code>
<code class=“language-php“> مکان کد شما php اینجا است </code>
<code class=“language-html“> مکان کد شما html اینجا است </code>
کلاس language-php به Prism.js می‌گوید که این کد PHP است، بنابراین باکس کد، ورژن درست را نشان می‌دهد. با توجه به زبان برنامه نویسی کدی که می‌خواهید آن را نمایش دهید. می توانید php را به زبان های دیگری مانند html css javascript و غیره تغییر دهید.
چگونه تم باکس کد خود را سفارشی کنیم
Prism.js تم های مختلفی را برای طراحی باکس کد شما ارائه می دهد. برای بررسی استایل و تم های مختلف روی کتابخانه cdnjs.com/libraries/prism کلیک کنید. برای استفاده از یک تم متفاوت، کافی است URL تم مورد نظرتان را کپی کنید و آن را در قسمت آدرس کد اول که در قالب نوشته ها جایگذاری کرده بودید (قسمت قرمز) جای‌گزین کنید.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css“>
همچنین تم هایی را برای شما همراه با آدرس URL آن در زیر قرار دادیم. هر مورد را که پسندیدید آدرس آن را در قسمت قرمز جایگذاری و تغییرات را در فایل single-post.php (قالب نوشته ها) ذخیره کنید.
قالب اول – funky
https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-funky.min.css
قالب دوم – okaidia
قالب سوم – Coy
تم های متنوع تری در (https://cdnjs.com/libraries/prism) وجود دارد. اگر از تم‌های بالا خوشتان نیامد ! کافی است. در این لینک هر url با قسمت قرمز کد html که اول گفته شد، جابجا کنید و صفحه نوشته خود را رفرش کنید تا قالب مناسب را با توجه به تم سایت خود انتخاب کنید. در صورت وجود هرگونه سوال یا مشکل، در نظرات همین بخش اقدام کنید. نهایتا تا یک روز به نظر شما پاسخ داده خواهد شد.
