Spec's source markup is broken

[tabatkins]

On line 287 (the end of the first code sample in the Examples chapter), you accidentally omitted the </pre> to close the code sample. This happens to work (for a given definition of "work" - the entire rest of the document is parsed as "raw" by Bikeshed's markdown parser, which means zero markdown features work for the rest of the document; luckily HTML's error recovery means the </div> causes the <pre> to auto-close so the rest of the doc isn't monospace), but is definitely wrong, and while I was fiddling around in that section of Bikeshed's code I happened to trip over this.

I'll also note that all your code samples appear to be written assuming that you're working with raw HTML, as well, with the code undented to the left margin and with manual <br>s added. None of that is necessary; you can keep your <pre>s and their contents indented to the normal level for whatever section you're in, and Bikeshed automatically removes any common indentation for you. You could also switch to <xmp> and avoid having to escape anything.

That is, instead of the current spec's markup like:

    <div class="example" title="Example 1">
      <p>FastCorp Inc. have a carousel of images at the top of a page with the first image visible and the remaining images
        images off screen. The markup of this carousel may look as follows:</p>
      <pre highlight="html">
&lt;ul class=&quot;carousel&quot;&gt;
<br/> &lt;!-- The first image is visible --&gt;
<br/> &lt;img src=&quot;img/carousel-1.jpg&quot;&gt;
<br/> &lt;!-- The other carousel images are not --&gt;
<br/> &lt;img src=&quot;img/carousel-2.jpg&quot;&gt;
<br/> &lt;img src=&quot;img/carousel-3.jpg&quot;&gt;
<br/> &lt;img src=&quot;img/carousel-4.jpg&quot;&gt;
<br/>&lt;/ul&gt;
</div>

you could be writing:

    <div class="example" title="Example 1">
      <p>FastCorp Inc. have a carousel of images at the top of a page with the first image visible and the remaining images
        images off screen. The markup of this carousel may look as follows:</p>
      <xmp highlight="html">
        <ul class="carousel">
         <!-- The first image is visible -->
         <img src="img/carousel-1.jpg">
         <!-- The other carousel images are not -->
         <img src="img/carousel-2.jpg">
         <img src="img/carousel-3.jpg">
         <img src="img/carousel-4.jpg">
        </ul>
      </xmp>
    </div>

which, in addition to being easier to read and write, is also much more obvious that you've left out the ending tag.

[pmeenan]

Thanks, that's a LOT easier to read. While I was in there I cleaned up the examples to better match the explainer since they had diverged a bit and the ones in the explainer were a lot clearer.