Fix the <pre> styling so that things indent properly.

Author: tabatkins

selectors4/Overview.html

@@ -1580,7 +1580,8 @@ <h4 id=typenmsp><span class=secno>5.1.1. </span> Type selectors and
   <div class=example>
    <p>CSS examples:</p>
 
-   <pre>@namespace foo url(http://www.example.com);
+   <pre>
+   @namespace foo url(http://www.example.com);
    foo|h1 { color: blue }  /* first rule */
    foo|* { color: yellow } /* second rule */
    |h1 { color: red }      /* ...*/
@@ -1874,7 +1875,8 @@ <h3 id=attrnmsp><span class=secno>6.4. </span> Attribute selectors and
   <div class=example>
    <p>CSS examples:</p>
 
-   <pre>@namespace foo "http://www.example.com";
+   <pre>
+  @namespace foo "http://www.example.com";
   [foo|att=val] { color: blue }
   [*|att] { color: yellow }
   [|att] { color: green }
@@ -1985,7 +1987,8 @@ <h3 id=class-html><span class=secno>6.6. </span> Class selectors</h3>
    <p>Given these rules, the first <code>H1</code> instance below would not
     have green text, while the second would:</p>
 
-   <pre>&lt;H1&gt;Not green&lt;/H1&gt;
+   <pre>
+  &lt;H1&gt;Not green&lt;/H1&gt;
   &lt;H1 class="pastoral"&gt;Very green&lt;/H1&gt;</pre>
 
    <p>The following rule matches any <code>P</code> element whose
@@ -2245,7 +2248,8 @@ <h3 id=target-pseudo><span class=secno>7.4. </span> The target pseudo-class
    <p>Here, the <code>:target</code> pseudo-class is used to make the target
     element red and place an image before it, if there is one:</p>
 
-   <pre>*:target { color : red }
+   <pre>
+  *:target { color : red }
   *:target::before { content : url(target.png) }</pre>
   </div>
 
@@ -2538,7 +2542,8 @@ <h3 id=lang-pseudo><span class=secno>10.2. </span> The language
     <code>:lang(fr)</code> (because both are in French). The P does not match
     the <code>[lang|=fr]</code> because it does not have a LANG attribute.</p>
 
-   <pre>&lt;body lang=fr>
+   <pre>
+  &lt;body lang=fr>
     &lt;p>Je suis français.&lt;/p>
   &lt;/body></pre>
   </div>
@@ -2783,7 +2788,8 @@ <h3 id=nth-child-pseudo><span class=secno>12.2. </span> ’‘<code
   <div class=example>
    <p>Examples:</p>
 
-   <pre>:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
+   <pre>
+  :nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
   :nth-child(10n+9)  /* Same */
   :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>
   </div>
@@ -2986,20 +2992,23 @@ <h3 id=first-child-pseudo><span class=secno>12.8. </span> ‘<code
    <p>This selector can represent the <code>p</code> inside the
     <code>div</code> of the following fragment:</p>
 
-   <pre>&lt;p&gt; The last P before the note.&lt;/p&gt;
+   <pre>
+  &lt;p&gt; The last P before the note.&lt;/p&gt;
   &lt;div class="note"&gt;
      &lt;p&gt; The first P inside the note.&lt;/p&gt;
   &lt;/div&gt;</pre>
    but cannot represent the second <code>p</code> in the following fragment:
-   <pre>&lt;p&gt; The last P before the note.&lt;/p&gt;
+   <pre>
+  &lt;p&gt; The last P before the note.&lt;/p&gt;
   &lt;div class="note"&gt;
      &lt;h2&gt; Note &lt;/h2&gt;
      &lt;p&gt; The first P inside the note.&lt;/p&gt;
   &lt;/div&gt;</pre>
 
    <p>The following two selectors are usually equivalent:</p>
 
-   <pre>* &gt; a:first-child /* a is first child of any element */
+   <pre>
+  * &gt; a:first-child /* a is first child of any element */
   a:first-child /* Same (assuming a is not the root element) */</pre>
   </div>
 
@@ -3038,7 +3047,8 @@ <h3 id=first-of-type-pseudo><span class=secno>12.10. </span> ‘<code
    <p>It is a valid description for the first two <code>dt</code> elements in
     the following example but not for the third one:</p>
 
-   <pre>&lt;dl&gt;
+   <pre>
+  &lt;dl&gt;
    &lt;dt&gt;gigogne&lt;/dt&gt;
    &lt;dd&gt;
     &lt;dl&gt;
@@ -3140,7 +3150,8 @@ <h3 id=descendant-combinators><span class=secno>13.1. </span> Descendant
     <code>h1</code> element. It is a correct and valid, but partial,
     description of the following fragment:</p>
 
-   <pre>&lt;h1&gt;This &lt;span class="myclass"&gt;headline
+   <pre>
+  &lt;h1&gt;This &lt;span class="myclass"&gt;headline
   is &lt;em&gt;very&lt;/em&gt; important&lt;/span&gt;&lt;/h1&gt;</pre>
 
    <p>The following selector:</p>
@@ -3238,7 +3249,8 @@ <h3 id=general-sibling-combinators><span class=secno>13.4. </span>
    <p>represents a <code>pre</code> element following an <code>h1</code>. It
     is a correct and valid, but partial, description of:</p>
 
-   <pre>&lt;h1&gt;Definition of the function a&lt;/h1&gt;
+   <pre>
+  &lt;h1&gt;Definition of the function a&lt;/h1&gt;
   &lt;p&gt;Function a(x) has to be applied to all figures in the table.&lt;/p&gt;
   &lt;pre&gt;function a(x) = 12x/13.5&lt;/pre&gt;</pre>
   </div>
@@ -3385,7 +3397,8 @@ <h2 id=specificity><span class=secno>15. </span> Calculating a selector's
   <div class=example>
    <p>Examples:</p>
 
-   <pre>*               /* a=0 b=0 c=0 -&gt; specificity =   0 */
+   <pre>
+  *               /* a=0 b=0 c=0 -&gt; specificity =   0 */
   LI              /* a=0 b=0 c=1 -&gt; specificity =   1 */
   UL LI           /* a=0 b=0 c=2 -&gt; specificity =   2 */
   UL OL+LI        /* a=0 b=0 c=3 -&gt; specificity =   3 */
@@ -3519,7 +3532,8 @@ <h3 id=lex><span class=secno>16.2. </span> Lexical scanner</h3>
    point in Unicode/ISO-10646. <a href="#UNICODE"
    rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>
 
-  <pre>%option case-insensitive
+  <pre>
+  %option case-insensitive
 
   ident     [-]?{nmstart}{nmchar}*
   name      {nmchar}+

selectors4/Overview.src.html

@@ -925,7 +925,8 @@ <h4 id="typenmsp">
   <div class="example">
    <p>CSS examples:</p>
 
-   <pre>@namespace foo url(http://www.example.com);
+   <pre>
+   @namespace foo url(http://www.example.com);
    foo|h1 { color: blue }  /* first rule */
    foo|* { color: yellow } /* second rule */
    |h1 { color: red }      /* ...*/
@@ -1193,7 +1194,8 @@ <h3 id="attrnmsp">
 
   <div class="example">
     <p>CSS examples:</p>
-    <pre>@namespace foo "http://www.example.com";
+    <pre>
+  @namespace foo "http://www.example.com";
   [foo|att=val] { color: blue }
   [*|att] { color: yellow }
   [|att] { color: green }
@@ -1301,7 +1303,8 @@ <h3 id="class-html">
     <p>Given these rules, the first <code>H1</code> instance below would not have
     green text, while the second would:</p>
 
-    <pre>&lt;H1&gt;Not green&lt;/H1&gt;
+    <pre>
+  &lt;H1&gt;Not green&lt;/H1&gt;
   &lt;H1 class="pastoral"&gt;Very green&lt;/H1&gt;</pre>
 
     <p>The following rule matches any <code>P</code> element whose <code>class</code>
@@ -1538,7 +1541,8 @@ <h3 id="target-pseudo">
    <p>CSS example:</p>
    <p>Here, the <code>:target</code> pseudo-class is used to make the
    target element red and place an image before it, if there is one:</p>
-   <pre>*:target { color : red }
+   <pre>
+  *:target { color : red }
   *:target::before { content : url(target.png) }</pre>
   </div>
 
@@ -1812,7 +1816,8 @@ <h3 id="lang-pseudo">
     the BODY and the P match <code>:lang(fr)</code> (because both are in
     French). The P does not match the <code>[lang|=fr]</code> because it
     does not have a LANG attribute.</p>
-    <pre>&lt;body lang=fr>
+    <pre>
+  &lt;body lang=fr>
     &lt;p>Je suis fran&ccedil;ais.&lt;/p>
   &lt;/body></pre>
   </div>
@@ -2034,7 +2039,8 @@ <h3 id="nth-child-pseudo">
 
   <div class="example">
   <p>Examples:</p>
-  <pre>:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
+  <pre>
+  :nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc, element */
   :nth-child(10n+9)  /* Same */
   :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */</pre>
   </div>
@@ -2218,18 +2224,21 @@ <h3 id="first-child-pseudo">
     <pre>div &gt; p:first-child</pre>
     <p>This selector can represent the <code>p</code> inside the
     <code>div</code> of the following fragment:</p>
-    <pre>&lt;p&gt; The last P before the note.&lt;/p&gt;
+    <pre>
+  &lt;p&gt; The last P before the note.&lt;/p&gt;
   &lt;div class="note"&gt;
      &lt;p&gt; The first P inside the note.&lt;/p&gt;
   &lt;/div&gt;</pre>but cannot represent the second <code>p</code> in the following
   fragment:
-    <pre>&lt;p&gt; The last P before the note.&lt;/p&gt;
+    <pre>
+  &lt;p&gt; The last P before the note.&lt;/p&gt;
   &lt;div class="note"&gt;
      &lt;h2&gt; Note &lt;/h2&gt;
      &lt;p&gt; The first P inside the note.&lt;/p&gt;
   &lt;/div&gt;</pre>
     <p>The following two selectors are usually equivalent:</p>
-    <pre>* &gt; a:first-child /* a is first child of any element */
+    <pre>
+  * &gt; a:first-child /* a is first child of any element */
   a:first-child /* Same (assuming a is not the root element) */</pre>
   </div>
 
@@ -2262,7 +2271,8 @@ <h3 id="first-of-type-pseudo">
   <pre>dl dt:first-of-type</pre>
   <p>It is a valid description for the first two <code>dt</code>
   elements in the following example but not for the third one:</p>
-  <pre>&lt;dl&gt;
+  <pre>
+  &lt;dl&gt;
    &lt;dt&gt;gigogne&lt;/dt&gt;
    &lt;dd&gt;
     &lt;dl&gt;
@@ -2353,7 +2363,8 @@ <h3 id="descendant-combinators">
    <p>It represents an <code>em</code> element being the descendant of
    an <code>h1</code> element. It is a correct and valid, but partial,
    description of the following fragment:</p>
-   <pre>&lt;h1&gt;This &lt;span class="myclass"&gt;headline
+   <pre>
+  &lt;h1&gt;This &lt;span class="myclass"&gt;headline
   is &lt;em&gt;very&lt;/em&gt; important&lt;/span&gt;&lt;/h1&gt;</pre>
    <p>The following selector:</p>
    <pre>div * p</pre>
@@ -2438,7 +2449,8 @@ <h3 id="general-sibling-combinators">
    <pre>h1 ~ pre</pre>
    <p>represents a <code>pre</code> element following an <code>h1</code>. It
    is a correct and valid, but partial, description of:</p>
-   <pre>&lt;h1&gt;Definition of the function a&lt;/h1&gt;
+   <pre>
+  &lt;h1&gt;Definition of the function a&lt;/h1&gt;
   &lt;p&gt;Function a(x) has to be applied to all figures in the table.&lt;/p&gt;
   &lt;pre&gt;function a(x) = 12x/13.5&lt;/pre&gt;</pre>
   </div>
@@ -2580,7 +2592,8 @@ <h2 id="specificity">
 
   <div class="example">
   <p>Examples:</p>
-  <pre>*               /* a=0 b=0 c=0 -&gt; specificity =   0 */
+  <pre>
+  *               /* a=0 b=0 c=0 -&gt; specificity =   0 */
   LI              /* a=0 b=0 c=1 -&gt; specificity =   1 */
   UL LI           /* a=0 b=0 c=2 -&gt; specificity =   2 */
   UL OL+LI        /* a=0 b=0 c=3 -&gt; specificity =   3 */
@@ -2713,7 +2726,8 @@ <h3 id="lex">
   should be read as "\4177777" (decimal 1114111), which is the highest
   possible code point in Unicode/ISO-10646. [[!UNICODE]]</p>
 
-  <pre>%option case-insensitive
+  <pre>
+  %option case-insensitive
 
   ident     [-]?{nmstart}{nmchar}*
   name      {nmchar}+