diff --git a/public/themes/bootstrap/scss/_common.scss b/public/themes/bootstrap/scss/_common.scss
index 68dc6a7cce..59b371b8e3 100644
--- a/public/themes/bootstrap/scss/_common.scss
+++ b/public/themes/bootstrap/scss/_common.scss
@@ -1225,15 +1225,6 @@ input#auto_increment_opt {
     position: static;
   }
 
-  tbody td span {
-    display: block;
-    overflow: hidden;
-
-    code span {
-      display: inline;
-    }
-  }
-
   th.draggable {
     span {
       margin-right: 10px;
@@ -2400,3 +2391,7 @@ body .ui-dialog {
 .table-responsive-md .data {
   z-index: 9;
 }
+
+pre {
+  margin: 0;
+}
diff --git a/public/themes/metro/scss/_common.scss b/public/themes/metro/scss/_common.scss
index 61977561e0..5931e80b5c 100644
--- a/public/themes/metro/scss/_common.scss
+++ b/public/themes/metro/scss/_common.scss
@@ -1489,15 +1489,6 @@ input#auto_increment_opt {
   td {
     position: static;
   }
-
-  tbody td span {
-    display: block;
-    overflow: hidden;
-
-    code span {
-      display: inline;
-    }
-  }
 }
 
 .modal-copy input {
@@ -2577,3 +2568,7 @@ body {
 .table-responsive-md .data {
   z-index: 9;
 }
+
+pre {
+  margin: 0;
+}
diff --git a/public/themes/original/scss/_common.scss b/public/themes/original/scss/_common.scss
index 3be7de1598..7df89161dd 100644
--- a/public/themes/original/scss/_common.scss
+++ b/public/themes/original/scss/_common.scss
@@ -1229,15 +1229,6 @@ input#auto_increment_opt {
   td {
     position: static;
   }
-
-  tbody td span {
-    display: block;
-    overflow: hidden;
-
-    code span {
-      display: inline;
-    }
-  }
 }
 
 .modal-copy input {
@@ -2402,3 +2393,7 @@ body {
 .table-responsive-md .data {
   z-index: 9;
 }
+
+pre {
+  margin: 0;
+}
diff --git a/public/themes/pmahomme/scss/_common.scss b/public/themes/pmahomme/scss/_common.scss
index 65b2890cbe..f40decf86a 100644
--- a/public/themes/pmahomme/scss/_common.scss
+++ b/public/themes/pmahomme/scss/_common.scss
@@ -1432,15 +1432,6 @@ input#auto_increment_opt {
     position: static;
   }
 
-  tbody td span {
-    display: block;
-    overflow: hidden;
-
-    code span {
-      display: inline;
-    }
-  }
-
   th.draggable {
     span {
       margin-right: 10px;
@@ -2553,3 +2544,7 @@ body .ui-dialog {
 .bg-secondary {
   color: #333;
 }
+
+pre {
+  margin: 0;
+}
diff --git a/resources/js/src/modules/sql-highlight.ts b/resources/js/src/modules/sql-highlight.ts
index eb085e7da0..92cc0b21ad 100644
--- a/resources/js/src/modules/sql-highlight.ts
+++ b/resources/js/src/modules/sql-highlight.ts
@@ -459,15 +459,15 @@ export default function highlightSql ($base) {
     var $elm = $base.find('code.sql');
     $elm.each(function () {
         var $sql = $(this);
-        var $pre = $sql.find('pre');
+        var $pre = $sql.closest('pre');
         /* We only care about visible elements to avoid double processing */
-        if ($pre.is(':visible')) {
+        if ($sql.is(':visible')) {
             var $highlight = $('<div class="sql-highlight cm-s-default"></div>');
-            $sql.append($highlight);
+            $pre.append($highlight);
             if (typeof window.CodeMirror !== 'undefined') {
                 // @ts-ignore
                 window.CodeMirror.runMode($sql.text(), 'text/x-mysql', $highlight[0]);
-                $pre.hide();
+                $sql.hide();
                 $highlight.find('.cm-keyword').each(documentationKeyword);
                 $highlight.find('.cm-builtin').each(documentationBuiltin);
             }
diff --git a/resources/js/src/transformations/json.ts b/resources/js/src/transformations/json.ts
index 8c18dbe56b..e2df1dbf59 100644
--- a/resources/js/src/transformations/json.ts
+++ b/resources/js/src/transformations/json.ts
@@ -8,14 +8,14 @@ AJAX.registerOnload('transformations/json.js', function () {
     var $elm = $('#page_content').find('code.json');
     $elm.each(function () {
         var $json = $(this);
-        var $pre = $json.find('pre');
+        var $pre = $json.closest('pre');
         /* We only care about visible elements to avoid double processing */
-        if ($pre.is(':visible')) {
+        if ($json.is(':visible')) {
             var $highlight = $('<div class="json-highlight cm-s-default"></div>');
-            $json.append($highlight);
+            $pre.append($highlight);
             // @ts-ignore
             window.CodeMirror.runMode($json.text(), 'application/json', $highlight[0]);
-            $pre.hide();
+            $json.hide();
         }
     });
 });
diff --git a/resources/js/src/transformations/xml.ts b/resources/js/src/transformations/xml.ts
index c19ab11205..627fd9deb0 100644
--- a/resources/js/src/transformations/xml.ts
+++ b/resources/js/src/transformations/xml.ts
@@ -8,14 +8,14 @@ AJAX.registerOnload('transformations/xml.js', function () {
     var $elm = $('#page_content').find('code.xml');
     $elm.each(function () {
         var $json = $(this);
-        var $pre = $json.find('pre');
+        var $pre = $json.closest('pre');
         /* We only care about visible elements to avoid double processing */
-        if ($pre.is(':visible')) {
+        if ($json.is(':visible')) {
             var $highlight = $('<div class="xml-highlight cm-s-default"></div>');
-            $json.append($highlight);
+            $pre.append($highlight);
             // @ts-ignore
             window.CodeMirror.runMode($json.text(), 'application/xml', $highlight[0]);
-            $pre.hide();
+            $json.hide();
         }
     });
 });
diff --git a/src/Html/Generator.php b/src/Html/Generator.php
index e8a7a89be3..d4b1dc3a0c 100644
--- a/src/Html/Generator.php
+++ b/src/Html/Generator.php
@@ -450,12 +450,12 @@ class Generator
         /* SQL-Parser-Analyzer */
 
         if (Sql::$showAsPhp === true) {
-            $newLine = '\\n"<br>' . "\n" . '&nbsp;&nbsp;&nbsp;&nbsp;. "';
+            $newLine = '\\n"' . "\n" . '    . "';
             $queryBase = htmlspecialchars(addslashes($sqlQuery));
             $queryBase = preg_replace('/((\015\012)|(\015)|(\012))/', $newLine, $queryBase);
-            $queryBase = '<code class="php" dir="ltr"><pre>' . "\n"
-                . '$sql = "' . $queryBase . '";' . "\n"
-                . '</pre></code>';
+            $queryBase = '<pre><code class="php" dir="ltr">'
+                . '$sql = "' . $queryBase . '";'
+                . '</code></pre>';
         } else {
             $queryBase = self::formatSql($sqlQuery, true);
         }
@@ -1072,9 +1072,9 @@ class Generator
             $sqlQuery = mb_substr($sqlQuery, 0, $config->settings['MaxCharactersInDisplayedSQL']) . '[...]';
         }
 
-        return '<code class="sql" dir="ltr"><pre>' . "\n"
-            . htmlspecialchars($sqlQuery, ENT_COMPAT) . "\n"
-            . '</pre></code>';
+        return '<pre><code class="sql" dir="ltr">'
+            . htmlspecialchars($sqlQuery, ENT_COMPAT)
+            . '</code></pre>';
     }
 
     /**
diff --git a/src/Plugins/Transformations/Output/Text_Plain_Json.php b/src/Plugins/Transformations/Output/Text_Plain_Json.php
index f0ac9af633..73506f2aa6 100644
--- a/src/Plugins/Transformations/Output/Text_Plain_Json.php
+++ b/src/Plugins/Transformations/Output/Text_Plain_Json.php
@@ -52,9 +52,7 @@ class Text_Plain_Json extends TransformationsPlugin
      */
     public function applyTransformation(string $buffer, array $options = [], FieldMetadata|null $meta = null): string
     {
-        return '<code class="json"><pre>' . "\n"
-        . htmlspecialchars($buffer) . "\n"
-        . '</pre></code>';
+        return '<pre><code class="json">' . htmlspecialchars($buffer) . '</code></pre>';
     }
 
     /* ~~~~~~~~~~~~~~~~~~~~ Getters and Setters ~~~~~~~~~~~~~~~~~~~~ */
diff --git a/src/Plugins/Transformations/Output/Text_Plain_Xml.php b/src/Plugins/Transformations/Output/Text_Plain_Xml.php
index b44c917246..ac4b6d69e1 100644
--- a/src/Plugins/Transformations/Output/Text_Plain_Xml.php
+++ b/src/Plugins/Transformations/Output/Text_Plain_Xml.php
@@ -52,9 +52,7 @@ class Text_Plain_Xml extends TransformationsPlugin
      */
     public function applyTransformation(string $buffer, array $options = [], FieldMetadata|null $meta = null): string
     {
-        return '<code class="xml"><pre>' . "\n"
-        . htmlspecialchars($buffer) . "\n"
-        . '</pre></code>';
+        return '<pre><code class="xml">' . htmlspecialchars($buffer) . '</code></pre>';
     }
 
     /* ~~~~~~~~~~~~~~~~~~~~ Getters and Setters ~~~~~~~~~~~~~~~~~~~~ */
diff --git a/tests/unit/Controllers/Server/PrivilegesControllerTest.php b/tests/unit/Controllers/Server/PrivilegesControllerTest.php
index 787dfdad77..c1884cb30c 100644
--- a/tests/unit/Controllers/Server/PrivilegesControllerTest.php
+++ b/tests/unit/Controllers/Server/PrivilegesControllerTest.php
@@ -148,10 +148,10 @@ class PrivilegesControllerTest extends AbstractTestCase
         self::assertStringContainsString("You have updated the privileges for 'pma_test'@'localhost'.", $output);
 
         // phpcs:disable Generic.Files.LineLength.TooLong
-        $expectedSql = '<pre>' . "\n"
+        $expectedSql = '<pre><code class="sql" dir="ltr">'
             . "REVOKE ALL PRIVILEGES ON  `test_db_1`.* FROM 'pma_test'@'localhost'; REVOKE GRANT OPTION ON  `test_db_1`.* FROM 'pma_test'@'localhost'; GRANT SELECT ON  `test_db_1`.* TO 'pma_test'@'localhost'; \n"
-            . "REVOKE ALL PRIVILEGES ON  `test_db_2`.* FROM 'pma_test'@'localhost'; REVOKE GRANT OPTION ON  `test_db_2`.* FROM 'pma_test'@'localhost'; GRANT SELECT ON  `test_db_2`.* TO 'pma_test'@'localhost'; \n"
-            . '</pre>';
+            . "REVOKE ALL PRIVILEGES ON  `test_db_2`.* FROM 'pma_test'@'localhost'; REVOKE GRANT OPTION ON  `test_db_2`.* FROM 'pma_test'@'localhost'; GRANT SELECT ON  `test_db_2`.* TO 'pma_test'@'localhost'; "
+            . '</code></pre>';
         // phpcs:enable
         self::assertStringContainsString($expectedSql, $output);
 
diff --git a/tests/unit/Controllers/Table/FindReplaceControllerTest.php b/tests/unit/Controllers/Table/FindReplaceControllerTest.php
index 8ba1840dfa..ff55100254 100644
--- a/tests/unit/Controllers/Table/FindReplaceControllerTest.php
+++ b/tests/unit/Controllers/Table/FindReplaceControllerTest.php
@@ -54,10 +54,10 @@ final class FindReplaceControllerTest extends AbstractTestCase
         $controller($request);
 
         self::assertStringContainsString(
-            '<pre>' . "\n"
+            '<pre><code class="sql" dir="ltr">'
             . 'UPDATE `test_table` SET `id` = REPLACE(`id`, \'Field\', \'Column\')'
             . ' WHERE `id` LIKE \'%Field%\' COLLATE utf8mb4_bin'
-            . "\n" . '</pre>',
+            . '</code></pre>',
             $responseRenderer->getHTMLResult(),
         );
         self::assertSame([], $responseRenderer->getJSONResult());
@@ -102,9 +102,9 @@ final class FindReplaceControllerTest extends AbstractTestCase
         $controller($request);
 
         self::assertStringContainsString(
-            '<pre>' . "\n"
+            '<pre><code class="sql" dir="ltr">'
             . 'UPDATE `test_table` SET `id` = `id` WHERE `id` RLIKE \'Field\' COLLATE utf8mb4_bin'
-            . "\n" . '</pre>',
+            . '</code></pre>',
             $responseRenderer->getHTMLResult(),
         );
         self::assertSame([], $responseRenderer->getJSONResult());
diff --git a/tests/unit/Controllers/Table/IndexRenameControllerTest.php b/tests/unit/Controllers/Table/IndexRenameControllerTest.php
index 75979fa77c..eb11abe0e7 100644
--- a/tests/unit/Controllers/Table/IndexRenameControllerTest.php
+++ b/tests/unit/Controllers/Table/IndexRenameControllerTest.php
@@ -87,14 +87,14 @@ class IndexRenameControllerTest extends AbstractTestCase
         $dbi->setVersion(['@@version' => '5.5.0']);
         DatabaseInterface::$instance = $dbi;
 
+        // phpcs:disable Generic.Files.LineLength.TooLong
         $expected = <<<'HTML'
-<div class="preview_sql">
-            <code class="sql" dir="ltr"><pre>
-ALTER TABLE `test_db`.`test_table_index_rename` DROP INDEX `old_name`, ADD INDEX `new_name` (`name`) USING BTREE;
-</pre></code>
-    </div>
+        <div class="preview_sql">
+                    <pre><code class="sql" dir="ltr">ALTER TABLE `test_db`.`test_table_index_rename` DROP INDEX `old_name`, ADD INDEX `new_name` (`name`) USING BTREE;</code></pre>
+            </div>
 
-HTML;
+        HTML;
+        // phpcs:enable
 
         $request = ServerRequestFactory::create()->createServerRequest('GET', 'http://example.com/')
             ->withQueryParams(['db' => 'test_db', 'table' => 'test_table_index_rename'])
diff --git a/tests/unit/Html/GeneratorTest.php b/tests/unit/Html/GeneratorTest.php
index c111669a20..10bd74e4e2 100644
--- a/tests/unit/Html/GeneratorTest.php
+++ b/tests/unit/Html/GeneratorTest.php
@@ -277,18 +277,18 @@ class GeneratorTest extends AbstractTestCase
     public function testFormatSql(): void
     {
         self::assertSame(
-            '<code class="sql" dir="ltr"><pre>' . "\n"
-            . 'SELECT 1 &lt; 2' . "\n"
-            . '</pre></code>',
+            '<pre><code class="sql" dir="ltr">'
+            . 'SELECT 1 &lt; 2'
+            . '</code></pre>',
             Generator::formatSql('SELECT 1 < 2'),
         );
 
         Config::getInstance()->settings['MaxCharactersInDisplayedSQL'] = 6;
 
         self::assertSame(
-            '<code class="sql" dir="ltr"><pre>' . "\n"
-            . 'SELECT[...]' . "\n"
-            . '</pre></code>',
+            '<pre><code class="sql" dir="ltr">'
+            . 'SELECT[...]'
+            . '</code></pre>',
             Generator::formatSql('SELECT 1 < 2', true),
         );
     }
@@ -486,9 +486,7 @@ class GeneratorTest extends AbstractTestCase
 <div class="alert alert-primary border-top-0 border-start-0 border-end-0 rounded-bottom-0 mb-0" role="alert">
   <img src="themes/dot.gif" title="" alt="" class="icon ic_s_notice"> Message <em>one</em>.
 </div>
-<div class="card-body sqlOuter"><code class="sql" dir="ltr"><pre>
-SELECT 1;
-</pre></code></div>
+<div class="card-body sqlOuter"><pre><code class="sql" dir="ltr">SELECT 1;</code></pre></div>
 <div class="card-footer tools d-print-none">
 <div class="row align-items-center">
 <div class="col-auto">
@@ -535,9 +533,7 @@ HTML;
 <div class="alert alert-success border-top-0 border-start-0 border-end-0 rounded-bottom-0 mb-0" role="alert">
   <img src="themes/dot.gif" title="" alt="" class="icon ic_s_success"> Message <em>one</em>.
 </div>
-<div class="card-body sqlOuter"><code class="php" dir="ltr"><pre>
-$sql = "EXPLAIN SELECT 1;";
-</pre></code></div>
+<div class="card-body sqlOuter"><pre><code class="php" dir="ltr">$sql = "EXPLAIN SELECT 1;";</code></pre></div>
 <div class="card-footer tools d-print-none">
 <div class="row align-items-center">
 <div class="col-auto">
diff --git a/tests/unit/Plugins/Transformations/TransformationPluginsTest.php b/tests/unit/Plugins/Transformations/TransformationPluginsTest.php
index 161cb0ec6c..c0cc69a21a 100644
--- a/tests/unit/Plugins/Transformations/TransformationPluginsTest.php
+++ b/tests/unit/Plugins/Transformations/TransformationPluginsTest.php
@@ -564,9 +564,9 @@ class TransformationPluginsTest extends AbstractTestCase
             [
                 new Text_Plain_Sql(),
                 ['select *', ['option1', 'option2']],
-                '<code class="sql" dir="ltr"><pre>' . "\n"
-                . 'select *' . "\n"
-                . '</pre></code>',
+                '<pre><code class="sql" dir="ltr">'
+                . 'select *'
+                . '</code></pre>',
             ],
             [new Text_Plain_Link(), ['PMA_TXT_LINK', ['./php/', 'text_name']], './php/PMA_TXT_LINK'],
             [new Text_Plain_Link(), ['PMA_TXT_LINK', []], 'PMA_TXT_LINK'],