সর্বশেষ আপডেট : মার্চ ২১, ২০১৭ তারিখে ১২:৪৮ অপরাহ্ণ
আজ : ২৫শে মার্চ, ২০১৭ ইং | ১১ই চৈত্র, ১৪২৩ বঙ্গাব্দ

কোন প্লাগইন ছাড়ায় ওয়েবসাইটে কোড প্রদর্শন করা

মেহেদী আকরাম | অক্টোবর ২৬, ২০১৪, ১১:১৪ পূর্বাহ্ণ
Domain

ওয়েব সাইটে php, html বা অনান্য ল্যাঙ্গুয়েজের কোড প্রদর্শনের জন্য আমরা বিভিন্ন প্লাগইন ব্যবহার করে থাকি। যেমন ওয়ার্ডপ্রেসের জন্য SyntaxHighlighter বেশ জনপ্রিয়। তবে চাইলে কোন প্লাগইন ছাড়ায় শুধুমাত্র CSS দ্বারা কোড হাইলাইটার বানানো যায়।
এজন্য নিচের CSS কোড ব্যবহার করুন এবং কোডে pre ট্যাগ ব্যবহার করুন।
pre ট্যাগের ব্যবহার
নিচের মত pre ট্যাগ ব্যবহার করুন
Pre Tag

ওয়েবসাইটের নিচের মত কোড দেখাবে
Show code using css

সিএসএস কোড

/* Show Code using CSS */
pre:before {
  background-image: url("images/code.png");
  content: " ";
  height: 100%;
  left: 0;
  padding-left: 20px;
  position: absolute;
  top: 0;
  width: 16px;
}

code, pre {
  color: #c63;
  font-family: "Courier New",Courier,monospace;
  font-size: 1em;
  padding-left: 35px;
}

pre {
  border: 1px solid #ddd;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 22px;
  max-height: 1740px;
  overflow: auto;
  padding: 5px 10px 4px 40px;
  width: calc(100% - 52px);
  display: block;
  position: relative;
}

code.png ডাউনলোড করুন

মন্তব্য করুন