[css-overflow] Markup fixups

Author: frivoal

css-overflow/Overview.bs

@@ -585,7 +585,8 @@ the ''continue/fragments'' value of the 'continue' property.
 	</p>
 
 	<div class="example">
-		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
+		<table class="source-demo-pair"><tr><td>
+<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
 &lt;title&gt;Breaking content into
   equal-sized cards&lt;/title&gt;
 &lt;style&gt;
@@ -612,7 +613,7 @@ the ''continue/fragments'' value of the 'continue' property.
   another one to be created.  The second
   card is created just like it's the
   next sibling of the first.
-&lt;/div&gt;</pre></td><td>
+&lt;/div&gt;</code></pre></td><td>
 			<div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards.  These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
 			<div class="in-cards-demo">one to be created.  The second<br>card is created just like it's the<br>next sibling of the first.</div>
 		</td></tr></table>
@@ -712,7 +713,8 @@ the ''continue/fragments'' value of the 'continue' property.
 	</p>
 
 	<div class="example">
-		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
+		<table class="source-demo-pair"><tr><td>
+<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
 &lt;style&gt;
   .bouncy-columns {
     continue: fragments;
@@ -734,7 +736,7 @@ the ''continue/fragments'' value of the 'continue' property.
 &lt;/style&gt;
 &lt;div class="bouncy-columns"&gt;
   <i>...</i>
-&lt;/div&gt;</pre></td><td>
+&lt;/div&gt;</code></pre></td><td>
 			<div class="bouncy-columns-demo one">In this<br>example, the<br>text in the div<br>is broken into<br>a series of<br>columns.  The<br>author<br>probably</div>
 			<div class="bouncy-columns-demo two">intended the<br>text to fill two<br>columns.  But<br>if it happens to<br>fill three<br>columns, the<br>third column is<br>still created.  It</div>
 			<div class="bouncy-columns-demo">just doesn't<br>have any<br>fragment-specific<br>styling because<br>the author<br>didn't give it<br>any.</div>
@@ -810,7 +812,8 @@ the ''continue/fragments'' value of the 'continue' property.
 	</p>
 
 	<div class="example">
-		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
+		<table class="source-demo-pair"><tr><td>
+<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
 &lt;style&gt;
   .article {
     continue: fragments;
@@ -827,7 +830,7 @@ the ''continue/fragments'' value of the 'continue' property.
 &lt;/style&gt;
 &lt;div class="article"&gt;
   The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
-&lt;/div&gt;</pre></td><td>
+&lt;/div&gt;</code></pre></td><td>
 			<div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
 			<div class="article-font-inherit-demo two">descendants of the fragment.<br>This means that inherited<br>properties can be used<br>reliably on a fragment, as in<br>this example.</div>
 		</td></tr></table>
@@ -884,7 +887,8 @@ the ''continue/fragments'' value of the 'continue' property.
 	</ol>
 
 	<div class="example">
-		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
+		<table class="source-demo-pair"><tr><td>
+<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
 &lt;style&gt;
   .dark-columns {
     continue: fragments;
@@ -916,7 +920,7 @@ the ''continue/fragments'' value of the 'continue' property.
 &lt;/style&gt;
 &lt;div class="dark-columns"&gt;
   <i>...</i>
-&lt;/div&gt;</pre></td><td>
+&lt;/div&gt;</code></pre></td><td>
 			<div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>fragment into<br>another<br>dark-colored</div>
 			<div class="dark-columns-demo two">fragment.  We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>fragments.</div>
 		</td></tr></table>
@@ -999,7 +1003,8 @@ so that you only need to reach for one property rather than 2 to get
 that effect.
 
 	<div class="example">
-		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
+		<table class="source-demo-pair"><tr><td>
+<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
 &lt;style&gt;
   .article {
     continue: fragments;
@@ -1018,7 +1023,7 @@ that effect.
 &lt;/style&gt;
 &lt;div class="article"&gt;
   <i>...</i>
-&lt;/div&gt;</pre></td><td>
+&lt;/div&gt;</code></pre></td><td>
 			<div class="article-max-lines-demo one">The max-lines property allows<br>authors to use a larger font for the first<br>few lines of an article.  Without the</div>
 			<div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br>'height' property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div>
 			<div class="article-max-lines-demo three">particularly hard if the author<br>didn't know what text would<br>be filling the space, exactly<br>what font would be used, or<br>exactly which platform's font<br>rendering would be used to<br>display the font).</div>