যাদের Blogger Tutorial ভিত্তিক ব্লগ সাইট আছে সাধারণত তারা তাদের ব্লগ সাইটে বিভিন্ন ধরনের কোড শেয়ার করে। তাদের এই কোড গুলো শেয়ার করার জন্য অবশ্যই Code box ব্যবহার করতে হয়। সাধারণত Code Box এর মাধ্যমে কোড গুলো খুব সুন্দরভাবে উপস্থাপন করা যায়। আবার আমরা আমাদের সাইটে বিভিন্ন Stylish Code Box ব্যবহার করি তবে ব্যবহারকারীদের কোড কপি করার জন্য প্রায়শই পুরো কোড ব্লক উপরে থেকে নীচ পর্যন্ত Select করতে হয়। কোডটি যদি আবার বড় হয় তবে এটি ব্যবহারকারীর জন্য কিছুটা সমস্যা তৈরি করতে পারে। কারন কার্সার ব্যবহার করে মাঝে মাঝে মাউস পয়েন্টারটি deselect হয়ে যায়। সুতরাং এর সমাধান হলো এক ক্লিক করেই Code Box এর পুরো কোড Copy করা। এর পরে কোডটির আরও ব্যবহারের জন্য আমাদের কপি অফশন ব্যবহার করতে হবে। তবে কিছু ব্যবহারকারীর বিরক্ত লাগতে পারে। যদিও এটি খুব সাধারণ উইজেট তবে খুব দরকারী। ডেমো দেখার জন্য এখানে ক্লিক করুন। কেবল এক ক্লিকের মাধ্যমেই আপনি পুরো কোড কপি করতে পারবেন। আর আপনার ব্লগের ভিজিটররা নিশ্চয় এটি ব্যবহার করতে স্বাচ্ছন্দ্য বোধ করবেন। এই Feature টি আপনার ব্লগে ইনস্টল করার জন্য দয়া করে নীচের পদক্ষেপগুলি অনুসরণ করুন-
Steps
1. Add CSS & Javascript CDN
i) copy the below code and paste it before </head> tag.
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.css”/>
ii) copy the below code and paste it before </body> tag.
<script src=”https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js”></script>
2. এখন যে পোস্ট এর মধ্যে আপনি কোড এড করতে চান, সেখানে HTML view তে গিয়ে নির্ধারিত স্থানে <pre> এবং <code> এই দুটি ট্যাগ এর মধ্যে আপনার কাঙ্ক্ষিত কোডটি বসান। যেমন:
<pre>
<code class=”language-html line-numbers”>
<!–//Your Code Goes Here–></code>
</pre>
ব্যাস. এখন আপনি নিজের ব্লগটি পরীক্ষা করতে পারেন এবং ব্লগ থেকে যে কোনো কোডে ক্লিক করে দেখুন। এবং দেখুন সমস্ত কোড একটি ক্লিকের মাধ্যমে কপি করা যায় কি না। এটি আপনার ব্লগের ব্যবহারকারীদের জন্য অনেক স্বাচ্ছন্দ্য বয়ে আনবে বলে আশাকরি।
Code Box Demo
আজ এই পর্যন্তই। আপনাদের আজকের পোস্ট বিষয়ে কোনো প্রশ্ন বা মতামত জানানোর থাকলে অবশ্যই কমেন্ট করে জানাতে ভুলবেন না। ধন্যবাদ
Thanks for share