diff --git a/scripts/tdd.js b/scripts/tdd.js
index 2c77df306..e5ff078a1 100644
--- a/scripts/tdd.js
+++ b/scripts/tdd.js
@@ -61,11 +61,6 @@ snippetFiles
       .split('\n')
       .map(line => line)
       .filter((_, i) => blockMarkers[0] < i && i < blockMarkers[1]);
-    // Grab snippet example based on code markers
-    const fileExample = fileCode
-      .split('\n')
-      .map(line => line)
-      .filter((_, i) => blockMarkers[2] < i && i < blockMarkers[3]);
 
     // Export template for snippetName.js
     const exportFile = `${fileFunction.join('\n')}\nmodule.exports = ${fileName};\n`;
diff --git a/scripts/web.js b/scripts/web.js
index 6af0ede0e..372a446d4 100644
--- a/scripts/web.js
+++ b/scripts/web.js
@@ -39,6 +39,39 @@ const unescapeHTML = str =>
         '&quot;': '"'
       }[tag] || tag)
   );
+const generateSnippetCard = (snippetList, snippetKey, addCornerTag = false) => `<div class="card code-card">
+${addCornerTag ? `<div class="corner ${
+    snippetKey[1].includes('advanced')
+      ? 'advanced'
+      : snippetKey[1].includes('beginner')
+        ? 'beginner'
+        : 'intermediate'
+  }"></div>`: ''}
+  ${md
+  .render(`\n${addCornerTag ? snippetList[snippetKey[0] + '.md'] : snippetList[snippetKey[0]]}`)
+  .replace(
+    /<h3/g,
+  `<div class="section card-content"><h4 id="${snippetKey[0].toLowerCase()}"`
+  )
+  .replace(/<\/h3>/g, '</h4>')
+  .replace(
+    /<pre><code class="language-js">/m,
+    '</div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre><code class="language-js">'
+  )
+  .replace(
+    /<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
+    (match, p1) =>
+      `<pre class="language-js">${Prism.highlight(
+        unescapeHTML(p1),
+        Prism.languages.javascript
+      )}</pre>`
+  )
+  .replace(/<\/div>\s*<pre class="/g, '</div><pre class="section card-code ')
+  .replace(
+    /<\/pre>\s+<pre class="/g,
+    '</pre><label class="collapse">examples</label><pre class="section card-examples '
+  )}
+  </div>`;
 const filterSnippets = (snippetList, excludedFiles) =>
   Object.keys(snippetList)
     .filter(key => !excludedFiles.includes(key))
@@ -169,40 +202,7 @@ try {
       .render(`## ${util.capitalize(tag, true)}\n`)
       .replace(/<h2>/g, '<h2 class="category-name">');
     for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
-      localOutput +=
-        '<div class="card code-card">' +
-        `<div class="corner ${
-          taggedSnippet[1].includes('advanced')
-            ? 'advanced'
-            : taggedSnippet[1].includes('beginner')
-              ? 'beginner'
-              : 'intermediate'
-        }"></div>` +
-        md
-          .render(`\n${snippets[taggedSnippet[0] + '.md']}`)
-          .replace(
-            /<h3/g,
-            `<div class="section card-content"><h4 id="${taggedSnippet[0].toLowerCase()}"`
-          )
-          .replace(/<\/h3>/g, '</h4>')
-          .replace(
-            /<pre><code class="language-js">/m,
-            '</div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre><code class="language-js">'
-          )
-          .replace(
-            /<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
-            (match, p1) =>
-              `<pre class="language-js">${Prism.highlight(
-                unescapeHTML(p1),
-                Prism.languages.javascript
-              )}</pre>`
-          )
-          .replace(/<\/div>\s*<pre class="/g, '</div><pre class="section card-code ')
-          .replace(
-            /<\/pre>\s+<pre class="/g,
-            '</pre><label class="collapse">examples</label><pre class="section card-examples '
-          ) +
-        '</div>';
+      localOutput += generateSnippetCard(snippets, taggedSnippet, true);
     // Add the ending static part
     localOutput += `\n${endPart + '\n'}`;
     // Optimize punctuation nodes
@@ -252,30 +252,7 @@ try {
 
   // Generate archived snippets from md files
   for (let snippet of Object.entries(filteredArchivedSnippets))
-    archivedOutput +=
-      '<div class="card code-card">' +
-      md
-        .render(`\n${filteredArchivedSnippets[snippet[0]]}`)
-        .replace(/<h3/g, `<div class="section card-content"><h4 id="${snippet[0].toLowerCase()}"`)
-        .replace(/<\/h3>/g, '</h4>')
-        .replace(
-          /<pre><code class="language-js">/m,
-          '</div><div class="copy-button-container"><button class="copy-button" aria-label="Copy to clipboard"></button></div><pre><code class="language-js">'
-        )
-        .replace(
-          /<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
-          (match, p1) =>
-            `<pre class="language-js">${Prism.highlight(
-              unescapeHTML(p1),
-              Prism.languages.javascript
-            )}</pre>`
-        )
-        .replace(/<\/div>\s*<pre class="/g, '</div><pre class="section card-code ')
-        .replace(
-          /<\/pre>\s+<pre class="/g,
-          '</pre><label class="collapse">examples</label><pre class="section card-examples '
-        ) +
-      '</div>';
+    archivedOutput += generateSnippetCard(filteredArchivedSnippets, snippet, false);
 
   // Optimize punctuation nodes
   archivedOutput = util.optimizeNodes(
@@ -318,7 +295,7 @@ try {
 
   // Generate glossary snippets from md files
   for (let snippet of Object.entries(filteredGlossarySnippets))
-    glossaryOutput +=
+    glossaryOutput += 
       '<div class="card code-card"><div class="section card-content">' +
       md
         .render(`\n${filteredGlossarySnippets[snippet[0]]}`)