<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .hljs {
      display: block;
      overflow-x: auto;
      padding: 0.5em;
      background: #1E1E1E;
      color: #DCDCDC;
      font-weight: normal;
      font-size: 1.15em !important;
    }

    .hljs-keyword,
    .hljs-literal,
    .hljs-symbol,
    .hljs-name {
      color: #569CD6;
    }

    .hljs-link {
      color: #569CD6;
      text-decoration: underline;
    }

    .hljs-built_in,
    .hljs-type {
      color: #4EC9B0;
    }

    .hljs-number,
    .hljs-class {
      color: #B8D7A3;
    }

    .hljs-string,
    .hljs-meta-string {
      color: #D69D85;
    }

    .hljs-regexp,
    .hljs-template-tag {
      color: #9A5334;
    }

    .hljs-subst,
    .hljs-function,
    .hljs-title,
    .hljs-params,
    .hljs-formula {
      color: #DCDCDC;
    }

    .hljs-comment,
    .hljs-quote {
      color: #57A64A;
      font-style: italic;
    }

    .hljs-doctag {
      color: #608B4E;
    }

    .hljs-meta,
    .hljs-meta-keyword,
    .hljs-tag {
      color: #9B9B9B;
    }

    .hljs-variable,
    .hljs-template-variable {
      color: #BD63C5;
    }

    .hljs-attr,
    .hljs-attribute,
    .hljs-builtin-name {
      color: #9CDCFE;
    }

    .hljs-section {
      color: gold;
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: bold;
    }

    .hljs-bullet,
    .hljs-selector-tag,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo {
      color: #D7BA7D;
    }

    .hljs-addition {
      background-color: #144212;
      display: inline-block;
      width: 100%;
    }

    .hljs-deletion {
      background-color: #600;
      display: inline-block;
      width: 100%;
    }
  </style>
</head>

<body>
  <!--Code written by blogtriggers website developers-->
  <h1>Responsive Syntax Highlighter for Website </h1>
  <pre><code class="hljs" id="code">
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;body&gt;

&lt;h1&gt;Welcome to BlogTriggers CodePen&lt;/h1&gt;

&lt;p&gt;Blog triggers will help you to get in touch with the latest information in SEO, Blogging, hosting, and many
other topics
that are updated regularly.&lt;/p&gt;
&lt;/body&gt;

&lt;/html&gt;
    </code></pre>
  <h3>
    Made by <a href="https://www.blogtriggers.com">BlogTriggers</a> Developers named as a Bhavya J Shah
  </h3>

  <script>
    hljs.initHighlightingOnLoad();
  </script>

  <script>
    let toggles = document.getElementsByClassName("toggle");
    let contentDiv = document.getElementsByClassName("content");
    let icons = document.getElementsByClassName("icon");
    for (let i = 0; i < toggles.length; i++) {
      toggles[i].addEventListener("click", () => {
        if (parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight) {
          contentDiv[i].style.height = contentDiv[i].scrollHeight + "px";
          toggles[i].style.color = "#0084e9";
          icons[i].classList.remove("fa-plus");
          icons[i].classList.add("fa-minus");
        } else {
          contentDiv[i].style.height = "0px";
          toggles[i].style.color = "#111130";
          icons[i].classList.remove("fa-minus");
          icons[i].classList.add("fa-plus");
        }
        for (let j = 0; j < contentDiv.length; j++) {
          if (j !== i) {
            contentDiv[j].style.height = 0;
            toggles[j].style.color = "#111130";
            icons[j].classList.remove("fa-minus");
            icons[j].classList.add("fa-plus");
          }
        }
      });
    }
  </script>

</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.