diff --git a/src/js/events/components.js b/src/js/events/components.js
index 1e9506b..1de9d91 100644
--- a/src/js/events/components.js
+++ b/src/js/events/components.js
@@ -5,24 +5,29 @@ class HighlightedCode extends ElemJS {
 	constructor(element) {
 		super(element)
 		if (this.element.tagName === "PRE" && this.element.children.length === 1 && this.element.children[0].tagName === "CODE") {
-			// we shouldn't nest code inside a pre. put the text in the pre directly.
+			// we shouldn't nest <code> inside <pre>. put the text in <pre> directly.
 			const code = this.element.children[0]
 			this.clearChildren()
-			for (const child of code.childNodes) {
-				this.element.appendChild(child)
+			while (code.firstChild) {
+				this.element.appendChild(code.firstChild)
 			}
 		}
-		if (this.element.textContent.length > 80) {
+		let shouldHighlight = (
+			// if there are child _elements_, it's already formatted, we shouldn't mess that up
+			this.element.children.length === 0
 			/*
 			  no need to highlight very short code blocks:
 			  - content inside might not be code, some users still use code blocks
-			    for plaintext quotes
+			  for plaintext quotes
 			  - language detection will almost certainly be incorrect
 			  - even if it's code and the language is detected, the user will
-			    be able to mentally format small amounts of code themselves
+			  be able to mentally format small amounts of code themselves
 
 			  feel free to change the threshold number
 			*/
+				&& this.element.textContent.length > 80
+		)
+		if (shouldHighlight) {
 			lazyLoad("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js").then(hljs => hljs.highlightBlock(this.element))
 		}
 	}