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

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

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

মন্তব্য করুন

×
কপিরাইট © ২০০৬-২০২৪ সমকাল দর্পণ. সর্বস্বত্ব সংরক্ষিত।
সার্বিক তত্ত্বাবধানে রয়েল টেকনোলজিস