diff --git a/src/demo/css/style.css b/src/demo/css/style.css
index 3b46a3f4..f57b550d 100644
--- a/src/demo/css/style.css
+++ b/src/demo/css/style.css
@@ -296,7 +296,7 @@ input:focus:invalid {
   border-left: 4px solid var(--yellow);
 }
 
-.output .md,
+.output .code-container,
 .output .json {
   background: var(--border);
   border-radius: 6px;
diff --git a/src/demo/index.php b/src/demo/index.php
index dac7ad9b..a168c0bf 100644
--- a/src/demo/index.php
+++ b/src/demo/index.php
@@ -223,15 +223,28 @@ function gtag() {
                 <p class="warning">
                     Note: The stats above are just examples and not from your GitHub profile.
                 </p>
-
-                <h2>Markdown</h2>
-                <div class="md">
-                    <code></code>
+                
+                <div>
+                    <h2>Markdown</h2>
+                    <div class="code-container md">
+                        <code></code>
+                    </div>
+                    
+                    <button class="copy-button btn tooltip copy-md" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
+                        Copy To Clipboard
+                    </button>
+                </div>
+                
+                <div>
+                    <h2>HTML</h2>
+                    <div class="code-container html">
+                        <code></code>
+                    </div>
+                    
+                    <button class="copy-button btn tooltip copy-html" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
+                        Copy To Clipboard
+                    </button>
                 </div>
-
-                <button class="copy-button btn tooltip" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
-                    Copy To Clipboard
-                </button>
             </div>
             <div class="bottom">
                 <a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
diff --git a/src/demo/js/script.js b/src/demo/js/script.js
index d164d463..903f9d9f 100644
--- a/src/demo/js/script.js
+++ b/src/demo/js/script.js
@@ -43,8 +43,10 @@ const preview = {
     if (params.type !== "json") {
       const repoLink = "https://git.io/streak-stats";
       const md = `[![GitHub Streak](${imageURL})](${repoLink})`;
+      const html = `<a href="${repoLink}"><img src="${imageURL}" alt="GitHub Streak" /></a>`;
       document.querySelector(".output img").src = demoImageURL;
       document.querySelector(".md code").innerText = md;
+      document.querySelector(".html code").innerText = html;
       document.querySelector(".output img").style.display = "block";
       document.querySelector(".output .json").style.display = "none";
     } else {
@@ -55,10 +57,13 @@ const preview = {
         .then((data) => (document.querySelector(".output .json pre").innerText = JSON.stringify(data, null, 2)))
         .catch(console.error);
       document.querySelector(".md code").innerText = imageURL;
+      document.querySelector(".html code").innerText = imageURL;
     }
     // disable copy button if username is invalid
-    const copyButton = document.querySelector(".copy-button");
-    copyButton.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
+    const copyButtons = document.querySelectorAll(".copy-button");
+    copyButtons.forEach((button) => {
+      button.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
+    });
     // disable clear button if no added advanced options
     const clearButton = document.querySelector("#clear-button");
     clearButton.disabled = !document.querySelectorAll(".minus").length;
@@ -379,7 +384,11 @@ const clipboard = {
   copy(el) {
     // create input box to copy from
     const input = document.createElement("input");
-    input.value = document.querySelector(".md code").innerText;
+    if (el.classList.contains("copy-md")) {
+      input.value = document.querySelector(".md code").innerText;
+    } else if (el.classList.contains("copy-html")) {
+      input.value = document.querySelector(".html code").innerText;
+    }
     document.body.appendChild(input);
     // select all
     input.select();