Peak Fiction is a website where we talk about Anime, Manga, Comics, Blogger, Films, Superhero, Marvel, DC, Tutorial, Tech, News and more pop culture.

আজকের এই পোস্ট এর মধ্যে দেখব কিভাবে আপনার ব্লগার ওয়েবসাইট এর মধ্যে একটি সুন্দর ও প্রফেশনাল কোড বক্স যোগ করতে পারবেন। ব্লগার ওয়েবসাইটে একটি প্রফেশনাল কোড বক্স যোগ করার মাধ্যমে আপনার ব্লগার ওয়েবসাইট টি দেখতে অনেক সুন্দর এবং প্রফেশনাল লাগবে। এর ফলে আপনার ভিজিটর এর সংখ্যাও বেড়ে যাবে। ডেমো হিসেবে এই ছবির কোড বক্স টা দেখতে পারেন -

ব্লগারে সুন্দর একটি কোড বক্স যোগ করুন। Professional and Beautiful code box for blogger, How to Add Code Syntax Highlighting to Blogger
How to Add Code Syntax Highlighting to Blogger

ব্লগারে কোড বক্স এড  করার উপায়:

ব্লগারে যদি কোড বক্স এড করতে চান তাহলে নিচের এই স্টেপ গুলো ফলো করুন। 
  • স্টেপ ১:
আপনার ব্লগার ওয়েবসাইট এ লগিন করুন এবং থিম এর ব্যাক আপ নিয়ে নিন।
  • স্টেপ ২:
"Edit Html" থেকে </head> লিখে সার্চ দিন এবং নিচের কোড গুলো এর উপর পেস্ট করো দিন। ডেমো হিসেবে এই কোড বক্স টা দেখতে পারেন -
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-dark.min.css' rel='stylesheet'/>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js'></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

  $('pre').each(function(i, block) {

    hljs.highlightBlock(block);

  });

});

//]]>

</script>
  • স্টেপ ৩:
এবার আপনার কোড গুলো <pre> ট্যাগ এর মধ্যে পেস্ট করতে হবে। তবে <pre> কোড এ পেস্ট করার আগে অবশ্যই আপনাকে এই কোড গুলো পার্স বা ইনকোড করে নিতে হবে না হলে কোড অনেক ক্ষেত্রে কাজ করে না। এইখান থেকে কোড গুলো পার্স করতে পারবেন। কোড পার্স হলে <pre> ট্যাগ এর মধ্যে পেস্ট করে দিবেন।
  • স্টেপ ৪: 
এবার আপনার যেই পোস্ট এর মধ্যে কোড পেস্ট করতে চান সেটি ওপেন করুন। এবং compose View থেকে html view তে সুইচ করে নিন। এর পর যেই জায়গায় আপনার কোড পেস্ট করতে চান সেই জায়গায় এই কোড গুলো পেস্ট করে দিন। এবং মার্ক করা জায়গায় উপরের যেই লিংক থেকে কোড পার্স করেছিলেন তা পেস্ট করে দিন।

Css এর জন্য -

<pre class='css'>

<!-- CSS code paste here -->

</pre>

Html এর জন্য - 

<pre class='xml'>

<!-- HTML code -->

</pre>;

JavaScript এর জন্য - 

<pre class='javascript'>

<!-- paste javascript -->

</pre>
তো এই ভাবে আপনারা আপনার কোড বক্স এর মধ্যে একটি প্রফেশনাল ডার্ক কালার এর সিএসএস কোড বক্স এড করতে পারবেন। কোনো সমস্যার সম্মুখীন হলে কমেন্ট করে জানাবেন। ধন্যবাদ।