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

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

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

সিএসএস কোড

/* 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 ডাউনলোড করুন