ব্লগারের থিমে Prism.js যোগ করুন | স্বয়ংক্রিয় কোড হাইলাইটিং গাইড (২০২৬)

ব্লগারের থিমে Prism.js যোগ করার সহজ টিউটোরিয়াল। ছবিতে বাম দিকে ব্লগার লোগো এবং ডান দিকে Prism.js লোগো সহ রঙিন কোড দেখা যাচ্ছে।

আপনার ব্লগে কোড ব্লক সুন্দর এবং পেশাদার করতে এই টিউটোরিয়ালটি অনুসরণ করুন। (ছবিতে দেখানো অনুযায়ী, সহজে কাস্টমাইজ করুন)

আপনি যদি আপনার ব্লগারে কোডিং টিউটোরিয়াল বা স্নিপেট শেয়ার করেন, তবে কোডগুলো সুন্দরভাবে উপস্থাপন করা খুবই জরুরি। সাধারণ টেক্সট হিসেবে কোড দিলে তা পাঠকদের জন্য পড়া এবং বোঝা বেশ কষ্টকর হয়।

Prism.js হলো একটি হালকা, দ্রুত এবং শক্তিশালী সিনট্যাক্স হাইলাইটার যা আপনার সাধারণ কোডগুলোকে আকর্ষণীয় করে তোলে। ২০২৬ সালের আপডেট অনুযায়ী, ব্লগারের থিমে খুব সহজেই Prism.js যুক্ত করা সম্ভব। চলুন দেখে নিই কীভাবে মাত্র কয়েকটি ধাপে এটি আপনার ব্লগে যুক্ত করবেন।

✅ ফলাফল কী পাবেন?

HTML, CSS, JavaScript, Python সহ ২০০+ ভাষার কোড রঙিন দেখাবে।
ভবিষ্যতে কোনো পোস্টে আলাদা করে স্টাইল দিতে হবে না – শুধু <pre><code class="language-html"> লিখলেই হবে।
কপি বাটন সহ আধুনিক কোড ব্লক (আমি এই টিউটোরিয়ালে যে উদাহরণ দিচ্ছি সেরকম)।
ব্লগের লোডিং স্পিডের ওপর খুব সামান্য প্রভাব পড়ে (কারণ CDN দ্রুত)।

ধাপ ১: আপনার বর্তমান থিমের ব্যাকআপ নিন

যেকোনো কোড এডিট করার আগে থিমের ব্যাকআপ রাখা সবচেয়ে গুরুত্বপূর্ণ কাজ। এতে কোনো ভুল হলে সহজেই আগের অবস্থায় ফিরে যাওয়া যায়।

আপনার ব্লগার ড্যাশবোর্ডে লগইন করুন।
বাম পাশের মেন্যু থেকে Theme অপশনে ক্লিক করুন।
'Customize' বাটনের পাশে থাকা ড্রপডাউন অ্যারোতে ক্লিক করে Backup নির্বাচন করুন এবং ফাইলটি ডাউনলোড করে রাখুন।

ধাপ ২: থিমের HTML এডিট করা

আবার Theme অপশনে যান।
ড্রপডাউন অ্যারো থেকে Edit HTML-এ ক্লিক করুন। এতে আপনার থিমের সম্পূর্ণ কোড খুলে যাবে।

ধাপ ৩: Prism.js-এর CSS কোড যুক্ত করা

কোড এডিটরের ভেতরে যেকোনো জায়গায় একবার ক্লিক করুন।
কীবোর্ডে Ctrl + F (উইন্ডোজ) বা Cmd + F (ম্যাক) চাপুন।
সার্চ বক্সে </head> লিখে এন্টার চাপুন।
</head> ট্যাগটির ঠিক উপরে নিচের CSS কোডটি পেস্ট করুন:

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css' rel='stylesheet'/>

⚠️ থিম নোট: আপনি চাইলে prism-tomorrow.min.css-এর জায়গায় prism-okaidia.min.css বা অন্য যেকোনো থিম ব্যবহার করতে পারেন। সকল থিম দেখুন।

ধাপ ৪: Prism.js-এর JavaScript কোড যুক্ত করা

এবার সার্চ বক্সে </body> লিখে সার্চ করুন (এটি সাধারণত কোডের একদম নিচের দিকে থাকে)।
</body> ট্যাগটির ঠিক উপরে নিচের JavaScript কোডগুলো পেস্ট করুন:

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js'></script>

কোড বসানো হয়ে গেলে উপরের ডানদিক থেকে Save (ফ্লপি ডিস্ক) আইকনে ক্লিক করে থিম সেভ করুন।

ধাপ ৫: কোড বক্সে Copy বাটন যুক্ত করা (ঐচ্ছিক)

কোড ব্লকগুলোতে পাঠকদের সুবিধার জন্য একটি 'Copy' বাটন দিতে চাইলে নিচের কোডগুলো যুক্ত করতে হবে।

আবার থিমের <head> অংশে যান এবং আগের CSS-এর নিচে এই লাইনটি দিন:

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css' rel='stylesheet'/>

এরপর </body> এর উপরে থাকা আগের JS কোডগুলোর নিচে এই দুটি লাইন যুক্ত করুন:

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'></script>

এবার থিম সেভ করলেই আপনার কোড বক্সে সুন্দর একটি কপি বাটন যুক্ত হয়ে যাবে!

ধাপ ৬: ব্লগ পোস্টে কোড হাইলাইট করার নিয়ম

থিমের কাজ শেষ! এবার যখনই আপনি কোনো পোস্টে কোড যুক্ত করবেন, তখন নিচের নিয়মটি অনুসরণ করতে হবে।

নতুন পোস্ট তৈরি করুন বা পুরোনো পোস্ট এডিট করুন।
পোস্ট এডিটরের বাম দিকের পেন্সিল আইকনে ক্লিক করে HTML view নির্বাচন করুন।
আপনার কোডটি <pre> এবং <code> ট্যাগের ভেতরে নিচের ফরম্যাটে লিখুন:

<pre><code class="language-html">

   [আপনার মূল HTML কোডটি এখানে পেস্ট করুন]

</code></pre>

[1] 💡 সহজ ভাষায় মনে রাখুন:

উপরের কোড বক্সের প্রথম লাইন <pre><code class="language-html"> এবং শেষ লাইন </code></pre> হলো প্রিজম প্লাগইনের ফ্রেম বা খাঁচা। আপনি যখন আপনার ব্লগে কোনো কোড দেখাবেন, তখন এই দুটি লাইনের কোনো পরিবর্তন করবেন না। আপনাকে শুধু মাঝখানের অংশটুকু মুছে সেখানে আপনার নিজের আসল কোডটি পেস্ট করতে হবে।

[2] গুরুত্বপূর্ণ টিপস: language-html এর জায়গায় আপনি যে ভাষার কোড লিখছেন তার নাম দিতে হবে। যেমন CSS কোডের জন্য language-css, জাভাস্ক্রিপ্টের জন্য language-javascript, বা পাইথনের জন্য language-python ব্যবহার করুন। Autoloader প্লাগিনটি স্বয়ংক্রিয়ভাবে প্রয়োজনীয় ভাষার ফাইল লোড করে নেবে।

[3] 💡 প্রো টিপস:

কোডের ভেতরে <, >, & ব্যবহার করলে সেগুলো HTML এন্টিটি আকারে লিখুন। সহজ উপায়: আপনার কোডটি HTML এস্কেপ টুল দিয়ে কনভার্ট করে নিন।
লাইন নম্বর চাইলে class="line-numbers" যোগ করতে পারেন, কিন্তু তার জন্য অতিরিক্ত প্লাগইন দরকার (প্রয়োজনে জানাবেন)।

🧪 ধাপ ৭: পরীক্ষা করা

একটি পরীক্ষামূলক পোস্ট লিখুন:

<pre><code class="language-html">
<!-- আপনার কোড এখানে দিন -->
<!DOCTYPE html>
<html>
<head><title>পরীক্ষা</title></head>
<body>
  <h1>প্রিজম কাজ করছে!</h1>
</body>
</html>
</code></pre>

পোস্ট পাবলিশ করে দেখুন – কোড ব্লকটি রঙিন হবে। যদি না হয়, তাহলে ব্রাউজার ক্যাশ ক্লিয়ার করুন অথবা অন্য ব্রাউজারে চেক করুন।

🚫 সাধারণ সমস্যা ও সমাধান:

রঙিন হয়নি: নিশ্চিত করুন যে Prism.js-এর CSS ও JS সঠিকভাবে লোড হয়েছে (ব্রাউজারের ডেভেলপার টুলসে Network ট্যাব দেখুন)।
থিম পরিবর্তন করলে: আবারও এই সেটআপ করতে হবে। তাই ব্যাকআপ জরুরি।
মোবাইল ভিউতে ওভারফ্লো: pre { overflow-x: auto; } ঠিক আছে, তাও যদি না হয় তাহলে white-space: pre-wrap; ব্যবহার করুন।

🎯 উপসংহার

এই পদ্ধতিতে মাত্র ৫ মিনিট কাজ করে আপনি আপনার ব্লগকে আধুনিক ও পেশাদার করে তুলতে পারেন। একবার থিমে যোগ করার পর আর কোনো পোস্টে আলাদা স্টাইল দিতে হবে না – শুধু সঠিক ক্লাস ব্যবহার করুন।

আপনি যদি চান, এই পোস্টের নিচের কোড ব্লকগুলোর মতো করে আপনার পুরোনো পোস্টগুলো আপডেট করতে পারেন (যদিও সেটা ঐচ্ছিক)।

📢 প্রশ্ন থাকলে কমেন্ট বক্সে জানাবেন। আর ব্লগটি যদি টেকনিক্যাল বিষয়ে হয়, তাহলে এই টিউটোরিয়ালটি আপনার পাঠকদের জন্য অত্যন্ত উপকারী হবে। শেয়ার করতে ভুলবেন না!

⚡ বিঃদ্রঃ এই টিউটোরিয়ালে ব্যবহৃত কোড ব্লক কপি বাটন শুধুমাত্র উদাহরণের জন্য; আপনার থিমে যুক্ত করা Prism.js কপি বাটন না দিলেও চলবে।

ব্লগারের থিমে Prism.js যোগ করুন | স্বয়ংক্রিয় কোড হাইলাইটিং গাইড (২০২৬)