Use white-space: pre-wrap for code formatting (#810)

* Use `white-space: pre-wrap` for code formatting

Apparently code formatting is used for the entire user comments. Use
`white-space: pre-wrap` to avoid horizontal scrolling of the plaintext
description.


see 7d40388

* Unify `highlight_php()` with PhD

see php/phd@01d6beb

* Fix markup for notes in add-note.php

Author: TimWolla

include/layout.inc

@@ -20,26 +20,14 @@ function highlight_php($code, $return = false)
     }
 
     // Fix output to use CSS classes and wrap well
-    $highlighted = '<div class="phpcode">' . str_replace(
+    $highlighted = '<div class="phpcode">' . strtr(
+        $highlighted,
         [
-            '&nbsp;',
-            '<br>',
-            '<span style="color: ',
-            '</font>',
-            "\n ",
-            '  ',
-            '  '
-        ],
-        [
-            ' ',
-            "<br>\n",
-            '<span class="',
-            '</span>',
-            "\n&nbsp;",
-            '&nbsp; ',
-            '&nbsp; '
+            '&nbsp;' => ' ',
+            "\n" => '',
+
+            '<span style="color: ' => '<span class="',
         ],
-        $highlighted
     ) . '</div>';
 
     if ($return) { return $highlighted; }

manual/add-note.php

@@ -190,11 +190,7 @@
       </div>
       <div class="text">
         <div class="phpcode">
-          <code>
-            <span class="html">
-              <p>eval() is the best for all sorts of things</p>
-            </span>
-          </code>
+          <code><span class="html">eval() is the best for all sorts of things</span></code>
         </div>
       </div>
     </div>
@@ -220,11 +216,7 @@
   </div>
   <div class="text">
     <div class="phpcode">
-      <code>
-        <span class="html">
-        <p>If eval() is the answer, you're almost certainly asking the wrong question.</p>
-        </span>
-      </code>
+      <code><span class="html">If eval() is the answer, you're almost certainly asking the wrong question.</span></code>
     </div>
   </div>
 </div>
@@ -250,11 +242,7 @@
   </div>
   <div class="text">
     <div class="phpcode">
-      <code>
-        <span class="html">
-        <p>egg bacon sausage spam spam baked beans</p>
-        </span>
-      </code>
+      <code><span class="html">egg bacon sausage spam spam baked beans</span></code>
     </div>
   </div>
 </div>

styles/theme-base.css

@@ -1325,10 +1325,10 @@ div.tip p:first-child {
     margin-bottom: 1.5rem;
 }
 
-.docs .phpcode code {
+.phpcode code {
     display: block;
     overflow-x: auto;
-    white-space: pre;
+    white-space: pre-wrap;
 }
 
 .docs .qandaentry dt .phpcode * {