কিভাবে Syntax Highlighter Customize Blockquote যুক্ত করুন আপনার ব্লগে !

যে সকল ব্লগ ওয়েব ডেভেলপমেন্ট বিষয়ে টিউটোরিয়াল শেয়ার করেন সেই সকল ব্লগের বিভিন্ন জায়গাতে কোড শেয়ার করতে হয় বিধায় কোডগুলো সুন্দর ও আকর্ষণীয় করার জন্য Syntax Highlighter ব্যবহার করার প্রয়োজন হয়। Syntax Highlighter দ্বারা ব্লগের কোডের মধ্যে বিভিন্ন ধরনের কালার ও ডিজাইন যুক্ত করা হয়। গুগল ব্লগস্পট ব্লগে ডিফল্টভাবে এ ধরনের কোড হাইলাটারের কোন অপশন থাকে না।

আজকের এই Syntax Highlighter টি আমাদের নিজের ডিজাইন করা নয়। এটি জনপ্রিয় কোড হাইলাইটার Prism তৈরি করেছে। এই কোড হাইলাইটারটি অনেক ভালোমানের ব্লগে ব্যবহার হচ্ছে। আমরা শুধুমাত্র কিভাবে যুক্ত করতে হয় সেটি আপনাদের সাথে শেয়ার করব। Prism এর Syntax Highlighter ব্যবহার করে ব্লগের HTML, CSS, Javascript, Php সহ অন্যান্য যাবতীয় কোড হাইলাইট করতে পারবেন। এটি বর্তমান সময়ের সকল ধরনের ব্রাউজার সাপোর্ট করে বিধায় কোড শো করাতে কোন সমস্যা করবে না। Prism এর Syntax Highlighter আপনার কোডগুলো নিচের ন্যায় হাইলাইট করবে।

কিভাবে Syntax Highlighter Customize Blockquote যুক্ত করুন আপনার ব্লগে !

যে কোন ব্লগে Block Quote অথবা Block Quotation দ্বারা সাধারনত ব্লগ পোষ্টের ভীতরের কিছু লেখাকে Highlight করা হয়। এটি আসলে ভিজিটরদের ব্লগের কোন অংশ সম্পর্কে স্পষ্ট ধারনা দেয়ার জন্য করা হয়। তাছাড়াও ব্লগে যখন কোন ধরনের Html, Css এবং JavaScript কোড শেয়ার করা হয় তখন এগুলিকে সহজে চেনার জন্য Block Quotation ব্যবহার করা হয়।

সব ধরনের ব্লগে বিভিন্ন স্টাইলের Block Quotation ব্যবহার করতে দেখা যায়। আমরা আজ আপনাদের সাথে ১ টি Customize Blockquote Css Style শেয়ার করব।

<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>

কিভাবে করবেন?
প্রথমে আপনার ব্লগে লগইন করুন।
এরপর Template > Edit Html এ ক্লিক করুন।

তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।

এখান থেকে কোডটি  ডাওউনলোড করে Download Click here
  টেমপ্লেট এর </head> ট্যাগের ঠিক উপরে পেষ্ট করুন।

কোড যেভাবে লিখবেনঃ

কিভাবে Syntax Highlighter Customize Blockquote যুক্ত করুন আপনার ব্লগে !

CSS লিখার নিয়ম

<pre class='css'> <!-- একখানে আপনার CSS কোড লিখবেন --> </pre>

HTML লিখার নিয়ম

<pre class='xml'> <!-- একখানে আপনার HTML কোড লিখবেন --> </pre>

JAVASCRIPT লিখার নিয়ম

<pre class='javascript'> <!-- একখানে আপনার JAVASCRIPT কোড লিখবেন --> </pre>

বুঝতে সমস্যা হলে কমেন্ট করুন।