সর্বশেষ আপডেট : June 6, 2022 তারিখে 9:47 pm
আজ : ২৫শে জুন, ২০২২ ইং | ১১ই আষাঢ়, ১৪২৯ বঙ্গাব্দ

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

মেহেদী আকরাম | October 26, 2014, 11:14 AM

ওয়েব সাইটে 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 ডাউনলোড করুন

মন্তব্য করুন