ওয়েবসাইটে প্রিজম জেএস সিনট্যাক্স হাইলাইটার ব্যবহার করতে হয় কিভাবে

যারা ব্লগে কোডিং সম্পর্কিত পোস্ট করেন এবং পোস্ট এর মধ্যে কোড দিয়ে থাকেন তাদের জন্য সিনট্যাক্স হাইলাইটার ব্যবহার করা অনেক জরুরী। সিনট্যাক্স হাইলাইটার ব্যবহার করলে কোড গোছানো অনেক সুন্দর দেখায়। বর্তমানে সিনট্যাক্স হাইলাইটার জাভাস্ক্রিপ্ট প্লাগিন গুলোর মধ্যে Prismjs অনেক জনপ্রিয়। Prismjs অনেক লাইটওয়েট, ফ্রী এবং ওপেন সোর্স জাভাস্ক্রিপ্ট প্লাগিন। আপনি ফ্রিতেই এটি ডাউনলোড করে ব্যবহার করতে পারবেন। মূলত যারা জানেন না Prismjs কিভাবে সাইটে ব্যবহার করতে হয় তাদের জন্যই আজকের এই পোস্ট। আজকের এই পোস্টে কিভাবে প্রিজম জেএস সাইটে ব্যবহার করে কোডের সিনট্যাক্স হাইলাইট করতে হয় সে বিষয়ে বিস্তারিত আলোচনা করা হবে। তাহলে জাম্প করা যাক মূল পোস্টে।

Prismjs ব্যবহার করার জন্য প্রথমে আপনাকে Prismjs এর জাভাস্ক্রিপ্ট এবং সিএসএস ফাইল দুটি অফিসিয়াল ওয়েবসাইট থেকে ডাউনলোড করতে হবে। তো ডাউনলোড করার জন্য prismjs.com/download.html এই লিংকে গিয়ে আপনার প্রয়োজন অনুযায়ী কোনো কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ এর জন্য হাইলাইটার হিসেবে ব্যবহার করবেন সেগুলো সিলেক্ট করার পর প্রয়োজন অনুযায়ী প্লাগিন এবং পছন্দমত থিম সিলেক্ট করে নিচের দিকে স্ক্রল করে ডাউনলোড বাটনে ক্লিক করে সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল দুটি ডাউনলোড করে নিন।

যারা মোবাইল থেকে ডাউনলোড করবেন তাদেরকে আমি ব্রাউজার হিসেবে ফায়ারফক্স ব্যবহার করার জন্য রেকমেন্ড করবো, কেননা ক্রোম থেকে ওই সাইটে ঢুকলে ক্রোম হ্যাং হয়ে যায়।

প্লাগিন হিসেবে আমি কমপক্ষে Line Numbers, Copy to Clipboard এবং Show Language সিলেক্ট করার জন্য রেকমেন্ড করবো।

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

সিনট্যাক্স হাইলাইটার এনাবল করুন

সিনট্যাক্স হাইলাইটার ব্যবহার করার জন্য নিচের কোড এর মতো করে <pre> ট্যাগ এর ভিতরে <code> ট্যাগ এবং <code> ট্যাগ এর ভিতরে আপনার কোড দিতে হবে। আর হ্যা, যে প্রোগ্রামিং ল্যাঙ্গুয়েজ এ হাইলাইটার ব্যবহার করবেন সে প্রোগ্রামিং ল্যাঙ্গুয়েজ এর নাম অনুযায়ী নিচের কোড এর মতো করে <code> ট্যাগ এ ক্লাসনেম (যেমন language-html, language-css, language-javascript ইত্যাদি) দিতে হবে এবং মার্কআপ ল্যাংগুয়েজ গুলোর ক্ষেত্রে কোডগুলো অবশ্যই এনকোড করে দিতে হবে।

<pre>
<code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Use Prismjs&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Use Prismjs&lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code>
</pre>

লাইন নাম্বার এনাবল করুন

লাইন নাম্বার দেখানোর জন্য অবশ্যই আপনাকে Prismjs ডাউনলোড করার সময় "Line Numbers" প্লাগিনটি সিলেক্ট করতে হবে। জাভাস্ক্রিপ্ট এর মধ্যে লাইন নাম্বার প্লাগিন থাকলে লাইন নাম্বার এনাবল করার জন্য <pre> ট্যাগ এর মধ্যে নিচের কোড এর মতো করে "line-numbers" ক্লাসনেম ব্যবহার করতে হবে।

<pre class="line-numbers">
<code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Use Prismjs&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Use Prismjs&lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code>
</pre>

Download Project

তো আর্টিকেল মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড (Prismjs এর ল্যাঙ্গুয়েজ হিসেবে শুধু HTML, CSS & JavaScript সিলেক্ট করে ডাউনলোড করা হয়েছে) ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।

Download From Google Drive