برای پیدا کردن مطالب آموزشی در وب سایت ، لطفاً کلمات کلیدی آن مطلب را سرچ کنید.

به وب سایت حباب ها خوشامدید | ما را در شبکه های اجتماعی دنبال کنید:

نمایش کد در وب سایت

  /  WordPress   /  نمایش کد در وب سایت
متین برونسی | Matin Boronsi

نمایش کد در وب سایت


شما با این آموزشی قادر به نمایش کد در وب سایت خود خواهید بود.

در این پست آموزشی به چند روش جهت نمایش سورس کد های HTML و CSS و Javascript و PHP و… در سایت اشاره خواهیم کرد.

توجه داشته باشید که شما با استفاده از روش اول به راحتی می توانید سورس کد های خود را به نمایش گذاشته و حتی اگر وب سایت شما وردپرسی نمی باشد باز هم با آموزش روش اول قادر به انجام این کار خواهید بود.

خودم تا قبل از اینکه این روش رو پیاده سازی کنم ، از خیلی پلاگین ها استفاده کردم که هرکدوم مشکلات خاص خود را داشت… به همین خاطر تصمیم گرفتم که خودم شروع به کد زنی کنم.

اگر پست های وب سایت حباب هارو مشاهده کرده باشید ، دیده اید که نمایش کد های داخل سایت به چه صورت است ، همچنین در تصاویر زیر می توانید مشاهده کنید:

نمایش کد در وب سایت وردپرسی
نمایش کد در وب سایت وردپرسی

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

روش اول: نمایش کد در سایت وردپرسی با استفاده از افزونه ویژوال کامپوزر

افزونه ویژوال کامپوزر به طور پیش فرض این قابلیت را تعریف نکرده ولی می توان با استفاده از چند خط کد ساده و یکی از المان های ویژوال کامپوزر این کار را به راحتی انجام داد.

اطلاعات فایل:

  • فیلم آموزشی گام به گام
  • سورس کد های پروژه

در فیلم آموزشی شما یاد میگیرید که چطور با استفاده از سورس کد های ارائه شده مانند وب سایت حباب ها ، کد های خود را به نمایش در آورید.

می توانید نسخه نمایشی این محصول را آخر همین پست در روش نصب افزونه SyntaxHighlighter Evolved مشاهده کنید.

مزایا:

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

با تهیه کردن این آموزش شما چه چیز هایی یاد خواهید گرفت ؟

  • شما یاد میگیرید که با استفاده از سورس کد های موجود داخل فایل زیپ شده و با استفاده از افزونه ویژوال کامپوزر هرگونه سورس کدی رو داخل سایت خودتون به نمایش در بیارید.
  • حتی اگر وب سایت شما وردپرسی نیست ، باز هم با این آموزش قادر خواهید بود که کد های خودتون رو داخل سایت به نمایش در بیارید.

روش دوم: استفاده از افزونه Crayon Syntax Highlighter

خوده من قبل از اینکه از روش اول یا همون روش خودم این کارو بکنم از این افزونه استفاده می کردم ، که متأسفانه این افزونه برای نمایش کد های HTML و CSS و Javascript اصلاً مناسب نیست ، حالا وقتی خودتون نصب کردید و امتحانش کردید دلیلشو متوجه میشید !

و از اون بدتر ، طبق آخرین آماری که من در آوردم توسعه دهنده این افزونه به دلیل مبتلا بودن به یک بیماری خاص فوت کرده و ظاهراً دیگه این افزونه بروزرسانی نمیشه.

همچنین چند وقت پیش هم از طرف افزونه Wordfence Security یک ایمیل برای من ارسال شد که این افزونه دارای یک حفره امنیتی هست و میشه از طریق حملات XSS به وب سایت کد تزریق کرد.

خب با این شرایط فکر نمیکنم علاقه ای به نصب این افزونه داشته باشید ولی اگه تمایل دارید که از این افزونه استفاده کنید میتونید اون رو دانلود کرده و طبق آموزش های موجود پیش برید و استفاده کنید.

روش نصب و راه اندازی افزونه SyntaxHighlighter Evolved

افزونه SyntaxHighlighter Evolved افزونه ای می باشد جهت نمایش کد در وب سایت وردپرسی، با این افزونه می توانید در پست ها و صفحات سایت خودتون کد های مختلف را با زبان های برنامه نویسی مختلف به کاربران نمایش دهید.

بعد از نصب و فعالسازی افزونه به بخش تنظیمات > Syntax Highlighter برای تنظیم و سفارشی سازی افزونه مراجعه کنید.

بصورت پیشفرض، تنظیمات این افزونه برای استفاده در سایت های مختلف برنامه ریزی شده، با این حال شما می توانید این تنظیمات را با توجه به زبان برنامه نویسی آموزشی سایتتان و با توجه با سلایق دلخواه خودتان تنظیم کنید.

این افزونه از یک شورت کد ساده استفاده می کند. به عنوان مثال برای نمایش یک کد php یا هر کد دیگه میتونید از این روش استفاده کنید:

به همین راحتی می توانید یک کد php را نمایش دهید.

حال می توانید برای نمایش کد css از شورت کد زیر به این صورت استفاده کنید ، هرچند که فرقی باهم ندارند:

مدیر حباب ها

متین برونسی مدیر و مؤسس حباب ها می باشد ، او علاقه مند به دنیای کامپیوتر و زبان های برنامه نویسی است... از تخصص های او می توان به برنامه نویسی frontend و backend اشاره کرد... او تجربیات زیادی در زبان های برنامه نویسی مختلف دارد... ، او گاهاً تجربیات خود را در قالب آموزش در وب سایت حباب ها منتشر می کند...

ارسال یک نظر