আসসালামুয়ালাইকুম।আপনারা যারা ব্লগস্পট ব্যবহার করেন তারা অনেকই দেখেছেন HTML ও জাভাস্ক্রিপ্ট এর কোড সমুহ ব্লগ পোস্টে ডিসপ্লে করে না।ওয়ার্ডপ্রেস ব্যবহারকারীরাও এ সমস্যা থেকে মুক্ত নয় ।ব্লগস্পটে সাধারনত কোডসমূহের আউটপুট ডিসপ্লে করে কিন্তু কোডসমুহ সরাসরি ডিসপ্লে করা যার না। যেমন ট্যাগ( > এবং < ) দিয়ে শুরু করা কোনো লেখা যদি ব্লগপোস্টে লেখেন তাহলে এর প্রিভিউতে কিছুই দেখতে পাবেন না।এই ধরনের সমস্যা থেকে মুক্তি পাওয়ার জন্য আপনি কাস্টম ডিসপ্লে বক্স ব্যাবহার করতে পারেন। ওয়ার্ডপ্রেসে একইভাবে করা যায় তবে ওয়ার্ডপ্রেসে একাউন্ট না থাকায় আমি সঠিক সিস্টেমটা বলতে পারছিনা। কাস্টম প্রিভিউ বক্সে কোড অপরিবর্তিত অবস্থায় সরাসরি ডিসপ্লে করে। ডেমো দেখতে চাইলে এখানে ক্লিক করুন। ব্লগস্পটে কাস্টম ডিসপ্লে বক্স তৈরি করতে প্রথমে আপনার একাউন্টে লগিন করে ড্যাসবোর্ড থেকে ডিজাইনে যান।এর পর Expand Widget Templates এ ক্লিক করুন। (এখানে স্মরন করিয়ে দেয়া ভাল যে,আপনার টেম্পলেটের যে কোনো পরিবর্তন করার আগে তা হার্ডডিস্কে সেভ করে রাখুন যাতে পরবর্তীতে কোনো সমস্যা হলে পুনরায় আগের অবস্থায় ফিরে যাওয়া যায়)

এরপর নিম্নোত্ত কোডটি খুজে বের করুন।কোড না পেলে Ctrl + F চেপে যে বক্স আসবে তাতে কোডটি লিখে সার্চ করুন।

]]21/b:skin2

কোডটি খুজে পেলে নিচের কোডটি তার ঠিক আগে কপি করে পেস্ট করুন নিচে দেয়া চিত্র অনুসারে ,

pre{background:#efefef;border:1px solid #A6B0BF;font-size:120%;line-height:100%;overflow:auto;padding:10px;color:#000000 }pre:hover {border:1px solid #efefef;}code {font-size:120%;text-align:left;margin:0;padding:0;color: #000000;}.clear { clear:both;overflow:hidden;}

এবার টেম্পপ্লেট সেভ করে বের হয়ে আসুন। কাজ ৯০% শেষ।

এবার যখনই HTML ও জাভাস্ক্রিপ্ট অরিজিনাল কোড ডিসপ্লে করার দরকার হবে তখন এডিটর থেকে HTML ভিউ দিয়ে কোড সমুহের আগে

1pre2 এবং পরে 1/pre2

দিলেই কোডসমুহ পোস্টে ডিসপ্লে হবে।অর্থাৎ ট্যাগটি নিম্নোক্ত রকমে হবে,

1pre2 এইচটিএমএল ও জাভাস্ক্রিপ্ট কোডসমুহ 1/pre2

(এইমাত্র খেয়াল করলাম ওয়ার্ডপ্রেসেও ট্যাগ শুরুর কোডের প্রিভিউ আসে না তাই 1 এবং 2 দিয়ে ট্যাগ শুরুর চিহ্নগুলোকে বুজালাম)