[css-pseudo] highlight examples

Author: tabatkins

css-pseudo/Overview.bs

@@ -744,21 +744,23 @@ Overlapping Pseudo-element Interactions</h2>
     The following CSS and HTML example
     illustrates how overlapping pseudo-elements interact:
 
-    <pre>
+    <xmp class="lang-html">
+      <style>
       p { color: red; font-size: 12pt }
       p::first-letter { color: green; font-size: 200% }
       p::first-line { color: blue }
+      </style>
 
-      &lt;P&gt;Some text that ends up on two lines&lt;/P&gt;
-    </pre>
+      <p>Some text that ends up on two lines</p>
+    </xmp>
 
     The first letter of each P element will be green with a font size of ’24pt'.
     The rest of the first formatted line will be blue
     while the rest of the paragraph will be red.
 
     Assuming that a line break will occur before the word "ends",
     the <a>fictional tag sequence</a> for this fragment might be:
-    <xmp>
+    <xmp class="lang-html">
       <p>
         <p::first-line>
           <p::first-letter>