Support css

book.toml

@@ -4,3 +4,7 @@ language = "en"
 multilingual = false
 src = "src"
 title = "Effective Rust 中文版"
+
+[output.html]
+default-theme = "rust"
+additional-css = [ "src/css/ferris.css" ]

src/chapter_1/use-types-2.md

@@ -59,13 +59,13 @@ println!("op = {:p}", op);
 // Example output: "op = 0x101e9aeb0"
 ```
 
-<div style="border: 1px solid black; padding: 0 1em; border-radius: 5px;">
+<div class="ferris-border">
 
 > 一个需要注意的技术细节：需要显式地将函数强制转换为 `fn` 类型，因为仅仅使用函数的名称并不能得到 `fn` 类型的值；
 
 这段代码无法编译！
 
-<div style="right: 30%; z-index: 99; position: absolute;"><img src="../images/does_not_compile.svg" style="zoom:5%;" /></div>
+<div class="ferris"><img src="../images/does_not_compile.svg" style="zoom:5%;" /></div>
 
 ```rust
 let op1 = sum;
@@ -130,7 +130,7 @@ assert_eq!(data, vec![3, 4, 5,]);
 
 这段代码无法编译！
 
-<div style="right: 30%; z-index: 99; position: absolute;"><img src="../images/does_not_compile.svg" style="zoom:5%;" /></div>
+<div class="ferris"><img src="../images/does_not_compile.svg" style="zoom:5%;" /></div>
 
 ```rust
 let amount_to_add = 3;

src/css/ferris.css

@@ -0,0 +1,36 @@
+body.light .does_not_compile,
+body.light .panics,
+body.light .not_desired_behaviour,
+body.rust .does_not_compile,
+body.rust .panics,
+body.rust .not_desired_behavior {
+  background: #fff1f1;
+}
+
+body.coal .does_not_compile,
+body.coal .panics,
+body.coal .not_desired_behaviour,
+body.navy .does_not_compile,
+body.navy .panics,
+body.navy .not_desired_behaviour,
+body.ayu .does_not_compile,
+body.ayu .panics,
+body.ayu .not_desired_behaviour {
+  background: #501f21;
+}
+
+.ferris {
+  position: absolute;
+  z-index: 99;
+  right: 20%;
+}
+
+.ferris-explain {
+  width: 100px;
+}
+
+.ferris-border {
+  border: 1px solid black;
+  padding: 0 1em;
+  border-radius: 5px;
+}