Classify what is an example and what isn't (#1343)

* Classify what is an example and what isn't

When in doubt I cross-referenced with the proof

* Minor

* Don't try to compare output blocks

* Some kind of gap between Ch12 and lab12

* For now, make .output work

book/accessibility.md

@@ -579,6 +579,7 @@ we also need to set dark mode when changing tabs, since all tabs should
 be either dark or light:
 
 ``` {.python}
+class Browser:
    def set_active_tab(self, tab):
         # ...
         task = Task(self.active_tab.set_dark_mode, self.dark_mode)
@@ -1135,7 +1136,7 @@ If you print out `focusable_nodes` for the
 [focus example](examples/example14-focus.html), you should
 get this:
 
-``` {.python .example}
+``` {.python .output}
 [<a tabindex="1" href="/">,
  <button tabindex="2">,
  <div tabindex="3">,
@@ -1353,7 +1354,9 @@ means you can write a selector like this:
 
 [pseudoclass]: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
 
-    div:focus { ... }
+``` {.css .example}
+div:focus { ... }
+```
 
 And then that selector applies only to `<div>` elements that are
 currently focused.[^why-pseudoclass]
@@ -1422,7 +1425,9 @@ customize the focus outline itself and not just the element. That can be done
 by adding support for the CSS [`outline` property][outline], which looks like
 this (for a 3-pixel-thick red outline):[^outline-syntax]
 
-    outline: 3px solid red;
+``` {.css .example}
+outline: 3px solid red;
+```
 
 [outline]: https://developer.mozilla.org/en-US/docs/Web/CSS/outline
 
@@ -1695,7 +1700,7 @@ class AccessibilityNode:
 Here is the accessibility tree for the
 [focus example](examples/example14-focus.html):
 
-``` {.text .example}
+``` {.output}
  role=document
    role=button
      role=focusable text
@@ -1965,7 +1970,7 @@ This text construction logic is, of course, pretty naive, but it's
 enough to demonstrate the idea. Here is how it works out for the
 [focus example](examples/example14-focus.html):
 
-``` {.text .example}
+``` {.output}
  role=document text=Document
    role=button text=Button
      role=focusable text text=Focusable text: This is a button

book/animations.md

@@ -268,9 +268,9 @@ browser is using; this will help you verify that it's actually using
 your GPU. I'm using a Chromebook to write this chapter, so for me it
 says:[^virgl]
 
-::: {.example}
-    OpenGL initialized: vendor=b'Red Hat', renderer=b'virgl'
-:::
+``` {.output}
+OpenGL initialized: vendor=b'Red Hat', renderer=b'virgl'
+```
 
 [^virgl]: The `virgl` renderer stands for "virtual GL", a way of
 hardware-accelerating the Linux subsystem of ChromeOS that works with
@@ -448,21 +448,21 @@ class Tab:
 For our opacity example, the (key part of) the display list for one frame
 might look like this:
 
-::: {.example}
-    Blend(alpha=0.119866666667)
-      DrawText(text=This)
-      DrawText(text=text)
-      DrawText(text=fades)
-:::
+``` {.output}
+Blend(alpha=0.119866666667)
+  DrawText(text=This)
+  DrawText(text=text)
+  DrawText(text=fades)
+```
 
 On the next frame, it instead might like this:
 
-::: {.example}
-    Blend(alpha=0.112375)
-      DrawText(text=This)
-      DrawText(text=text)
-      DrawText(text=fades)
-:::
+``` {.output}
+Blend(alpha=0.112375)
+  DrawText(text=This)
+  DrawText(text=text)
+  DrawText(text=fades)
+```
 
 In each case, rastering this display list means first rastering the three words
 to a Skia surface created by `Blend`, and then copying that to the root
@@ -473,29 +473,29 @@ The idea is to first raster the three words to a separate surface (but this time
 owned by us, not Skia), which we'll call a *composited layer*, that is saved
 for future use:
 
-::: {.example}
-    Composited Layer:
-      DrawText(text=This)
-      DrawText(text=text)
-      DrawText(text=fades)
-:::
+``` {.output}
+Composited Layer:
+  DrawText(text=This)
+  DrawText(text=text)
+  DrawText(text=fades)
+```
 
 Now instead of rastering those three words, we can just copy over the
 composited layer with a `DrawCompositedLayer` command:
 
-::: {.example}
-    Blend(alpha=0.112375)
-      DrawCompositedLayer()
-:::
+``` {.output}
+Blend(alpha=0.112375)
+  DrawCompositedLayer()
+```
 
 Importantly, on the next frame, the `Blend` changes but the
 `DrawText`s don't, so on that frame all we need to do is re-run the
 `Blend`:
 
-::: {.example}
-    Blend(alpha=0.119866666667)
-      DrawCompositedLayer()
-:::
+``` {.output}
+Blend(alpha=0.119866666667)
+  DrawCompositedLayer()
+```
 
 In other words, the idea behind compositing is to split the display
 list into two pieces: a set of composited layers, which are rastered

book/chrome.md

@@ -30,7 +30,7 @@ contain a `TextLayout` for each word in that line. These new classes
 can make the layout tree look different from the HTML tree. So to
 avoid surprises, let's look at a simple example:
 
-``` {.html}
+``` {.html .example}
 <html>
   <body>
     Here is some text that is
@@ -43,21 +43,23 @@ avoid surprises, let's look at a simple example:
 The text in the `body` element wraps across two lines (because of the
 `br` element), so the layout tree will have this structure:
 
-    DocumentLayout
-      BlockLayout[block] (html element)
-        BlockLayout[inline] (body element)
-          LineLayout (first line of text)
-            TextLayout ("Here")
-            TextLayout ("is")
-            TextLayout ("some")
-            TextLayout ("text")
-            TextLayout ("that")
-            TextLayout ("is")
-          LineLayout (second line of text)
-            TextLayout ("spread")
-            TextLayout ("across")
-            TextLayout ("multiple")
-            TextLayout ("lines")
+``` {.output}
+DocumentLayout
+  BlockLayout[block] (html element)
+    BlockLayout[inline] (body element)
+      LineLayout (first line of text)
+        TextLayout ("Here")
+        TextLayout ("is")
+        TextLayout ("some")
+        TextLayout ("text")
+        TextLayout ("that")
+        TextLayout ("is")
+      LineLayout (second line of text)
+        TextLayout ("spread")
+        TextLayout ("across")
+        TextLayout ("multiple")
+        TextLayout ("lines")
+```
 
 Note how one `body` element corresponds to a `BlockLayout` with two
 `LineLayout`s inside, and how two text nodes turn into a total of ten

book/embeds.md

@@ -1688,12 +1688,12 @@ window.Node = function(handle) { this.handle = handle; }
 Do the same for every function or variable in the `runtime.js` file.
 If you miss one, you'll get errors like this:
 
-::: {.example}
-    dukpy.JSRuntimeError: ReferenceError: identifier 'Node'
-        undefined
-    	duk_js_var.c:1258
-    	eval src/pyduktape.c:1 preventsyield
-:::
+``` {.output}
+dukpy.JSRuntimeError: ReferenceError: identifier 'Node'
+    undefined
+    duk_js_var.c:1258
+    eval src/pyduktape.c:1 preventsyield
+```
 
 If you see this error, it means you need to find where you need
 to write `window.Node` instead of `Node`. You'll also need to modify

book/forms.md

@@ -26,7 +26,7 @@ form might be written like this (see results in Figure 1):
     represent different kinds of user controls, like dropdowns and
     multi-line inputs.
 
-``` {.html}
+``` {.html .example}
 <form action="/submit" method="post">
     <p>Name: <input name=name value=1></p>
     <p>Comment: <input name=comment value=2></p>
@@ -47,7 +47,7 @@ to the URL given by the `form` element's `action` attribute, with the
 usual rules of relative URLs---so in this case, `/submit`. The `POST`
 request looks like this:
 
-``` {.example}
+``` {.output}
 POST /submit HTTP/1.0
 Host: example.org
 Content-Length: 16

book/html.md

@@ -310,7 +310,7 @@ print_tree(nodes)
 
 You'll see something like this at the beginning:
 
-``` {.example}
+``` {.output}
  <!doctype html>
    '\n'
    <html lang="en-US" xml:lang="en-US">
@@ -366,7 +366,7 @@ def add_text(self, text):
 The first part of the parsed HTML tree for the `browser.engineering` home page now
 looks something like this:
 
-``` {.example}
+``` {.output}
  <html lang="en-US" xml:lang="en-US">
    <head>
      <meta charset="utf-8" /="">
@@ -514,16 +514,16 @@ def add_tag(self, tag):
 Remember to use `tag` and `attribute` instead of `text` in `add_tag`,
 and try your parser again:
 
-``` {.example}
-<html>
-   <head>
-     <meta>
-     <link>
-     <link>
-     <link>
-     <link>
-     <link>
-     <meta>
+``` {.output}
+ <html>
+    <head>
+      <meta>
+      <link>
+      <link>
+      <link>
+      <link>
+      <link>
+      <meta>
 ```
 
 It's close! Yes, if you print the attributes, you'll see that
@@ -649,7 +649,7 @@ with dozens of ever-more-special cases forming a taxonomy of human
 error, but one of its nicer features is *implicit* tags. Normally, an
 HTML document starts with a familiar boilerplate:
 
-``` {.html}
+``` {.html .example}
 <!doctype html>
 <html>
   <head>

book/http.md

@@ -109,9 +109,11 @@ manager, usually from packages called `telnet` and `netcat`.
 
 You'll get output that looks like this:
 
-    Trying 93.184.216.34...
-    Connected to example.org.
-    Escape character is '^]'.
+``` {.output}
+Trying 93.184.216.34...
+Connected to example.org.
+Escape character is '^]'.
+```
 
 This means that the OS converted the host name `example.org` into the
 IP address `93.184.216.34` and was able to connect to it.[^10] You can
@@ -513,7 +515,7 @@ types to text and to bytes:
     character encoding and will work on many pages, but in the real
     world you would need to be more careful.
 
-``` {.python .example}
+``` {.python .output}
 >>> type("text")
 <class 'str'>
 >>> type("text".encode("utf8"))
@@ -880,7 +882,9 @@ class URL:
 Custom ports are handy for debugging. Python has a built-in web server
 you can use to serve files on your computer. For example, if you run
 
-    python3 -m http.server 8000 -d /some/directory
+``` {.sh}
+python3 -m http.server 8000 -d /some/directory
+```
 
 then going to `http://localhost:8000/` should show you all the files
 in that directory. This is a good way to test your browser.
@@ -897,7 +901,7 @@ Here is what it should output for [a simple example][example-simple]:
 
 [example-simple]: examples/example1-simple.html
 
-``` {.example}
+``` {.output}
 
   
     This is a simple