diff --git a/assets/js/theme.js b/assets/js/theme.js
index ed328407..d7d2e086 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -682,7 +682,7 @@ class FixIt {
           const singleLoop = typeitElement.dataset.loop;
           // get the content of the typed element
           stagingElement.innerHTML = '';
-          stagingElement.appendChild(typeitElement.querySelector('template').content);
+          stagingElement.appendChild(typeitElement.querySelector('template').content.cloneNode(true));
           // for shortcodes usage
           let targetEle = typeitElement.firstElementChild
           // for system elements usage
@@ -690,9 +690,10 @@ class FixIt {
             typeitElement.innerHTML = '';
             targetEle = typeitElement
           }
+          const typedContents = stagingElement.querySelector('pre')?.innerHTML || stagingElement.innerHTML
           // create a new instance of TypeIt for each element
           const instance = new TypeIt(targetEle, {
-            strings: stagingElement.innerHTML,
+            strings: typedContents,
             speed: speed,
             lifeLike: true,
             cursorSpeed: cursorSpeed,
diff --git a/layouts/shortcodes/typeit.html b/layouts/shortcodes/typeit.html
index 6f1d9416..4b0023fa 100644
--- a/layouts/shortcodes/typeit.html
+++ b/layouts/shortcodes/typeit.html
@@ -36,6 +36,6 @@
 
 <div {{ $wrapperAttrs | safeHTMLAttr }}>
   {{- printf `<%v %v></%v>` $tag $innerAttrs $tag | safeHTML -}}
-  <template>{{ printf "%v" $content | safeHTML }}</template>
+  <template><pre>{{ printf "%v" $content | safeHTML }}</pre></template>
 </div>
 {{- .Page.Store.Set "hasTyped" true -}}