কম্পিউটার টিউটোরিয়াল

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


সিনট্যাক্স হাইলাইটার তৈরি এবং ব্যবহার করার কোড নিচে দেওয়া হলো -

উদাহরণ

<!DOCTYPE html> <html> <head> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .colorLinks {       color: rgb(131, 44, 212);       text-decoration: none;       font-size: 20px;       font-weight: bold;    }    .setColor {       margin: 20px;       padding: 10px;       border: none;       font-size: 18px;       background-color: rgb(226, 43, 89);       color: white;    } </style> </head> <body> <h1>Syntax Highlighting example</h1> <div class="CodeDiv"> <a href="https://www.google.com">Go to google.com</a> <a href="https://www.facebook.com">Go to facebook.com</a> </div> <button class="setColor" onclick="highlightLinks()">Click Here</button> <h2>Click the above button to highlight the links</h2> <script>    var anchrorRg = /[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g;    function highlightLinks() {       var text = document.querySelector(".CodeDiv").innerHTML;       text = text.replace(anchrorRg, function() {          function check(arguments) {             let tempArr = [];             tempArr.push(Array.prototype.slice.call(arguments, 2, 4));             return `<a class="colorLinks" href=${tempArr[0][0]}>${tempArr[0][1]}</a><br>`;          }          return check(arguments);       });       document.querySelector(".CodeDiv").innerHTML = text;    } </script> </body> </html>

আউটপুট

উপরের কোড ৭০০px-এর বেশি উইন্ডো সাইজে নিচের আউটপুট দেবে -

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

'Click Here' বাটনে ক্লিক করলে -

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


  1. সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে কোল্যাপসিবল সেকশন তৈরি করা

  2. সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে স্ন্যাকবার/টোস্ট তৈরি করা

  3. HTML এবং জাভাস্ক্রিপ্ট দিয়ে ওয়েট কনভার্টার তৈরি

  4. CSS এবং JavaScript দিয়ে অ্যাকর্ডিয়ন (Accordion) তৈরি করা