basic code embeds (html escaped no style)

src/index.html

@@ -25,6 +25,20 @@
         </header>
         <main>
             <div class="container">
+                <pre style="margin: 0;" class="code">
+                    <code>
+<h1>test</h1>
+code here, escape it yourself.
+                    </code>
+                </pre>
+        
+                <pre>
+                    <code>
+<h1>test</h1>
+code here, escape it yourself.
+<h2>test</h2>
+                    </code>
+                </pre>
                 <h1 style="text-align: center;">Alert Elements</h1>
                 <div class="alert-primary"> test </div><br>
                 <div class="alert-danger"> test </div><br>
@@ -72,5 +86,6 @@
         </main>
         <br><br><br>
         <br><br><br>
+        <script src="js/steevcss.js"></script>
     </body>
 </html>

src/js/steevcss.js

@@ -0,0 +1,16 @@
+var code = document.querySelectorAll("code");
+
+code.forEach(c => {
+    let code = c.innerHTML.toString();
+    var output = "";
+    for(let i = 0; i < code.length; i++){
+        switch(code.charAt(i)){
+            default: output += code.charAt(i); break;
+            case ">": output += "&gt;"; break;
+            case "<": output += "&lt;"; break;
+            case "&": output += "&amp;"; break;
+            case "\"": output += "&quot;"; break;
+        }
+    }
+    c.innerHTML = output;
+})

src/scss/main.sass

@@ -14,6 +14,8 @@ $success: #2ecc71
 $success_dark: #27ae60
 *
   box-sizing: border-box
+pre
+  border: 1px solid black
 body   
   margin: 0
   padding: 0