diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 6b201f1b8e..04db7bd725 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -99,6 +99,10 @@ export default class TextualBody extends React.Component {
                     // If there already is a div wrapping the codeblock we want to skip this.
                     // This happens after the codeblock was edited.
                     if (pres[i].parentNode.className == "mx_EventTile_pre_container") continue;
+                    // Add code element if it's missing since we depend on it
+                    if (pres[i].getElementsByTagName("code").length == 0) {
+                        this._addCodeElement(pres[i]);
+                    }
                     // Wrap a div around <pre> so that the copy button can be correctly positioned
                     // when the <pre> overflows and is scrolled horizontally.
                     const div = this._wrapInDiv(pres[i]);
@@ -128,6 +132,12 @@ export default class TextualBody extends React.Component {
         }
     }
 
+    _addCodeElement(pre) {
+        const code = document.createElement("code");
+        code.append(...pre.childNodes);
+        pre.appendChild(code);
+    }
+
     _addCodeExpansionButton(div, pre) {
         // Calculate how many percent does the pre element take up.
         // If it's less than 30% we don't add the expansion button.