infra: Convert one listing to use <Listing>

- Add CSS for `figure.listing`; this now renders identically to how the
  existing listings render.
- Convert the first listing in the book to use `<Listing>` instead of
  a bunch of `<span>`s.

book.toml

@@ -6,7 +6,7 @@ title = "The Rust Programming Language"
 authors = ["Steve Klabnik", "Carol Nichols", "Contributions from the Rust Community"]
 
 [output.html]
-additional-css = ["ferris.css", "theme/2018-edition.css", "theme/semantic-notes.css"]
+additional-css = ["ferris.css", "theme/2018-edition.css", "theme/semantic-notes.css", "theme/listing.css"]
 additional-js = ["ferris.js"]
 git-repository-url = "https://github.com/rust-lang/book"
 

src/ch01-02-hello-world.md

@@ -49,15 +49,15 @@ convention is to use an underscore to separate them. For example, use
 
 Now open the *main.rs* file you just created and enter the code in Listing 1-1.
 
-<span class="filename">Filename: main.rs</span>
+<Listing number="1-1" file-name="main.rs" caption="A program that prints `Hello, world!`">
 
 ```rust
 fn main() {
     println!("Hello, world!");
 }
 ```
 
-<span class="caption">Listing 1-1: A program that prints `Hello, world!`</span>
+</Listing>
 
 Save the file and go back to your terminal window in the
 *~/projects/hello_world* directory. On Linux or macOS, enter the following

theme/listing.css

@@ -0,0 +1,3 @@
+figure.listing {
+    margin: 0;
+}