diff --git a/docs/styles/align.md b/docs/styles/align.md
index 8f299d0e3..0bbb7eddf 100644
--- a/docs/styles/align.md
+++ b/docs/styles/align.md
@@ -61,7 +61,7 @@ Each label has been aligned differently inside its container, and its text shows
 
 === "align_all.css"
 
-    ```sass
+    ```sass hl_lines="2 6 10 14 18 22 26 30 34"
     --8<-- "docs/examples/styles/align_all.css"
     ```
 
diff --git a/docs/styles/background.md b/docs/styles/background.md
index 936a350db..8bfdc3fd8 100644
--- a/docs/styles/background.md
+++ b/docs/styles/background.md
@@ -29,7 +29,7 @@ This example creates three widgets and applies a different background to each.
 
 === "background.css"
 
-    ```sass
+    ```sass hl_lines="9 13 17"
     --8<-- "docs/examples/styles/background.css"
     ```
 
@@ -50,7 +50,7 @@ The next example creates ten widgets layed out side by side to show the effect o
 
 === "background_transparency.css"
 
-    ```sass
+    ```sass hl_lines="2 6 10 14 18 22 26 30 34 38"
     --8<-- "docs/examples/styles/background_transparency.css"
     ```
 
@@ -64,10 +64,10 @@ background: blue;
 background: red 20%;
 
 /* RGB color */
-background: rgb(100,120,200);
+background: rgb(100, 120, 200);
 
 /* HSL color */
-background: hsl(290,70%,80%);
+background: hsl(290, 70%, 80%);
 ```
 
 ## Python
diff --git a/docs/styles/border.md b/docs/styles/border.md
index 3b01cdfbb..fd6f117dd 100644
--- a/docs/styles/border.md
+++ b/docs/styles/border.md
@@ -71,7 +71,7 @@ This examples shows three widgets with different border styles.
 
 === "border.css"
 
-    ```sass
+    ```sass hl_lines="4 10 16"
     --8<-- "docs/examples/styles/border.css"
     ```
 
@@ -86,7 +86,7 @@ The next example shows a grid with all the available border types.
 
 === "border_all.py"
 
-    ```py
+    ```py hl_lines="2 6 10 14 18 22 26 30 34 38 42 46 50 54 58"
     --8<-- "docs/examples/styles/border_all.py"
     ```
 
@@ -116,7 +116,7 @@ This example also shows that a widget cannot contain both a `border` and an `out
 
 === "outline_vs_border.css"
 
-    ```sass
+    ```sass hl_lines="5-7 9-11"
     --8<-- "docs/examples/styles/outline_vs_border.css"
     ```
 
diff --git a/docs/styles/box_sizing.md b/docs/styles/box_sizing.md
index 97bc9f288..f8c99f4cf 100644
--- a/docs/styles/box_sizing.md
+++ b/docs/styles/box_sizing.md
@@ -34,7 +34,7 @@ The bottom widget has `box-sizing: content-box` which increases the size of the
 
 === "box_sizing.css"
 
-    ```sass
+    ```sass hl_lines="2 6"
     --8<-- "docs/examples/styles/box_sizing.css"
     ```
 
diff --git a/docs/styles/color.md b/docs/styles/color.md
index f4c6c5efa..901c33b22 100644
--- a/docs/styles/color.md
+++ b/docs/styles/color.md
@@ -31,7 +31,7 @@ This example sets a different text color for each of three different widgets.
 
 === "color.css"
 
-    ```sass
+    ```sass hl_lines="8 12 16"
     --8<-- "docs/examples/styles/color.css"
     ```
 
@@ -66,7 +66,7 @@ color: blue;
 color: red 20%;
 
 /* RGB color */
-color: rgb(100,120,200);
+color: rgb(100, 120, 200);
 
 /* Automatically choose color with suitable contrast for readability */
 color: auto;
diff --git a/docs/styles/content_align.md b/docs/styles/content_align.md
index 89ae21d81..2902d9a84 100644
--- a/docs/styles/content_align.md
+++ b/docs/styles/content_align.md
@@ -61,7 +61,7 @@ Each label has its text aligned differently.
 
 === "content_align_all.css"
 
-    ```sass
+    ```sass hl_lines="2 5 8 11 14 17 20 23 26"
     --8<-- "docs/examples/styles/content_align_all.css"
     ```
 
diff --git a/docs/styles/display.md b/docs/styles/display.md
index d0d37a3c1..8077776b1 100644
--- a/docs/styles/display.md
+++ b/docs/styles/display.md
@@ -32,7 +32,7 @@ Note that the second widget is hidden by adding the `"remove"` class which sets
 
 === "display.css"
 
-    ```sass
+    ```sass hl_lines="13"
     --8<-- "docs/examples/styles/display.css"
     ```
 
diff --git a/docs/styles/grid/column_span.md b/docs/styles/grid/column_span.md
index bddd24d4a..2ea6261e6 100644
--- a/docs/styles/grid/column_span.md
+++ b/docs/styles/grid/column_span.md
@@ -31,14 +31,14 @@ The example below shows a 4 by 4 grid where many placeholders span over several
 
 === "column_span.css"
 
-    ```sass
+    ```sass hl_lines="2 5 8 11 14 20"
     --8<-- "docs/examples/styles/column_span.css"
     ```
 
 ## CSS
 
 ```sass
-column-span: 3
+column-span: 3;
 ```
 
 ## Python
diff --git a/docs/styles/grid/grid_columns.md b/docs/styles/grid/grid_columns.md
index 3c145e638..e1d34e28d 100644
--- a/docs/styles/grid/grid_columns.md
+++ b/docs/styles/grid/grid_columns.md
@@ -42,7 +42,7 @@ Because there are more rows than scalars in the style rule, the scalars will be
 
 === "grid_columns.css"
 
-    ```sass
+    ```sass hl_lines="3"
     --8<-- "docs/examples/styles/grid_columns.css"
     ```
 
diff --git a/docs/styles/grid/grid_gutter.md b/docs/styles/grid/grid_gutter.md
index 1b61a1ae1..98a6d2d1e 100644
--- a/docs/styles/grid/grid_gutter.md
+++ b/docs/styles/grid/grid_gutter.md
@@ -37,7 +37,7 @@ The example below employs a common trick to apply visually consistent spacing ar
 
 === "grid_gutter.css"
 
-    ```sass
+    ```sass hl_lines="3"
     --8<-- "docs/examples/styles/grid_gutter.css"
     ```
 
diff --git a/docs/styles/grid/grid_rows.md b/docs/styles/grid/grid_rows.md
index 4303a9029..eb53264fa 100644
--- a/docs/styles/grid/grid_rows.md
+++ b/docs/styles/grid/grid_rows.md
@@ -42,7 +42,7 @@ Because there are more rows than scalars in the style rule, the scalars will be
 
 === "grid_rows.css"
 
-    ```sass
+    ```sass hl_lines="3"
     --8<-- "docs/examples/styles/grid_rows.css"
     ```
 
diff --git a/docs/styles/grid/grid_size.md b/docs/styles/grid/grid_size.md
index e8dd30293..d4d746bf9 100644
--- a/docs/styles/grid/grid_size.md
+++ b/docs/styles/grid/grid_size.md
@@ -60,7 +60,7 @@ In the second example, we create a grid with 2 columns and however many rows are
 
 === "grid_size_columns.css"
 
-    ```sass
+    ```sass hl_lines="2"
     --8<-- "docs/examples/styles/grid_size_columns.css"
     ```
 
diff --git a/docs/styles/grid/row_span.md b/docs/styles/grid/row_span.md
index 12d1670ac..d55da6bfa 100644
--- a/docs/styles/grid/row_span.md
+++ b/docs/styles/grid/row_span.md
@@ -34,7 +34,7 @@ After placing the placeholders `#p1`, `#p2`, `#p3`, and `#p4`, the next availabl
 
 === "row_span.css"
 
-    ```sass
+    ```sass hl_lines="2 5 8 11 14 17 20"
     --8<-- "docs/examples/styles/row_span.css"
     ```
 
diff --git a/docs/styles/height.md b/docs/styles/height.md
index cdaec0018..15d5399a3 100644
--- a/docs/styles/height.md
+++ b/docs/styles/height.md
@@ -30,7 +30,7 @@ This examples creates a widget with a height of 50% of the screen.
 
 === "height.css"
 
-    ```python
+    ```sass hl_lines="3"
     --8<-- "docs/examples/styles/height.css"
     ```
 
diff --git a/docs/styles/layout.md b/docs/styles/layout.md
index e3d937340..8de70d561 100644
--- a/docs/styles/layout.md
+++ b/docs/styles/layout.md
@@ -38,7 +38,7 @@ To learn more about the grid layout, you can see the [layout guide](../guide/lay
 
 === "layout.css"
 
-    ```sass
+    ```sass hl_lines="2 8"
     --8<-- "docs/examples/styles/layout.css"
     ```
 
diff --git a/docs/styles/margin.md b/docs/styles/margin.md
index ad6b26bfd..dd922de11 100644
--- a/docs/styles/margin.md
+++ b/docs/styles/margin.md
@@ -51,7 +51,7 @@ In the example below we add a large margin to a label, which makes it move away
 
 === "margin.css"
 
-    ```sass
+    ```sass hl_lines="7"
     --8<-- "docs/examples/styles/margin.css"
     ```
 
@@ -73,7 +73,7 @@ In each cell, we have a placeholder that has its margins set in different ways.
 
 === "margin_all.css"
 
-    ```py
+    ```sass hl_lines="25 29 33 37 41 45 49 53"
     --8<-- "docs/examples/styles/margin_all.css"
     ```
 
@@ -81,7 +81,7 @@ In each cell, we have a placeholder that has its margins set in different ways.
 
 ```sass
 /* Set margin of 1 around all edges */
-margin: 1
+margin: 1;
 /* Set margin of 2 on the top and bottom edges, and 4 on the left and right */
 margin: 2 4;
 /* Set margin of 1 on the top, 2 on the right,
diff --git a/docs/styles/max_height.md b/docs/styles/max_height.md
index b8aa0ae2d..aa89dbade 100644
--- a/docs/styles/max_height.md
+++ b/docs/styles/max_height.md
@@ -29,7 +29,7 @@ Then, we set `max-height` individually on each placeholder.
 
 === "max_height.css"
 
-    ```sass
+    ```sass hl_lines="12 16 20 24"
     --8<-- "docs/examples/styles/max_height.css"
     ```
 
diff --git a/docs/styles/max_width.md b/docs/styles/max_width.md
index 944a5474a..9cf7236b2 100644
--- a/docs/styles/max_width.md
+++ b/docs/styles/max_width.md
@@ -29,7 +29,7 @@ Then, we set `max-width` individually on each placeholder.
 
 === "max_width.css"
 
-    ```sass
+    ```sass hl_lines="12 16 20 24"
     --8<-- "docs/examples/styles/max_width.css"
     ```
 
diff --git a/docs/styles/min_height.md b/docs/styles/min_height.md
index a201e87aa..a25dc9c7a 100644
--- a/docs/styles/min_height.md
+++ b/docs/styles/min_height.md
@@ -29,7 +29,7 @@ Then, we set `min-height` individually on each placeholder.
 
 === "min_height.css"
 
-    ```sass hl_lines="13"
+    ```sass hl_lines="13 17 21 25"
     --8<-- "docs/examples/styles/min_height.css"
     ```
 
diff --git a/docs/styles/min_width.md b/docs/styles/min_width.md
index fe23b9448..15c32b64b 100644
--- a/docs/styles/min_width.md
+++ b/docs/styles/min_width.md
@@ -29,7 +29,7 @@ Then, we set `min-width` individually on each placeholder.
 
 === "min_width.css"
 
-    ```sass hl_lines="13"
+    ```sass hl_lines="13 17 21 25"
     --8<-- "docs/examples/styles/min_width.css"
     ```
 
diff --git a/docs/styles/offset.md b/docs/styles/offset.md
index 33b546637..3c9b69711 100644
--- a/docs/styles/offset.md
+++ b/docs/styles/offset.md
@@ -32,7 +32,7 @@ In this example, we have 3 widgets with differing offsets.
 
 === "offset.css"
 
-    ```sass
+    ```sass hl_lines="13 20 27"
     --8<-- "docs/examples/styles/offset.css"
     ```
 
diff --git a/docs/styles/opacity.md b/docs/styles/opacity.md
index 481181851..88db9ce9e 100644
--- a/docs/styles/opacity.md
+++ b/docs/styles/opacity.md
@@ -31,7 +31,7 @@ When the opacity is zero, all we see is the (black) background.
 
 === "opacity.css"
 
-    ```sass
+    ```sass hl_lines="2 6 10 14 18"
     --8<-- "docs/examples/styles/opacity.css"
     ```
 
@@ -39,9 +39,7 @@ When the opacity is zero, all we see is the (black) background.
 
 ```sass
 /* Fade the widget to 50% against its parent's background */
-Widget {
-    opacity: 50%;
-}
+opacity: 50%;
 ```
 
 ## Python
diff --git a/docs/styles/outline.md b/docs/styles/outline.md
index d0d8fa398..2df963f9b 100644
--- a/docs/styles/outline.md
+++ b/docs/styles/outline.md
@@ -34,7 +34,8 @@ textual borders
 
 ### Basic usage
 
-This example shows a widget with an outline. Note how the outline occludes the text area.
+This example shows a widget with an outline.
+Note how the outline occludes the text area.
 
 === "Output"
 
@@ -49,7 +50,7 @@ This example shows a widget with an outline. Note how the outline occludes the t
 
 === "outline.css"
 
-    ```sass
+    ```sass hl_lines="8"
     --8<-- "docs/examples/styles/outline.css"
     ```
 
@@ -70,7 +71,7 @@ The next example shows a grid with all the available outline types.
 
 === "outline_all.css"
 
-    ```sass
+    ```sass hl_lines="2 6 10 14 18 22 26 30 34 38 42 46 50 54 58"
     --8<-- "docs/examples/styles/outline_all.css"
     ```
 
@@ -94,7 +95,7 @@ This example also shows that a widget cannot contain both a `border` and an `out
 
 === "outline_vs_border.css"
 
-    ```sass
+    ```sass hl_lines="5-7 9-11"
     --8<-- "docs/examples/styles/outline_vs_border.css"
     ```
 
diff --git a/docs/styles/overflow.md b/docs/styles/overflow.md
index 51b8acf89..12edaac15 100644
--- a/docs/styles/overflow.md
+++ b/docs/styles/overflow.md
@@ -47,7 +47,7 @@ The right side has `overflow-y: hidden` which will prevent a scrollbar from bein
 
 === "overflow.css"
 
-    ```sass
+    ```sass hl_lines="19"
     --8<-- "docs/examples/styles/overflow.css"
     ```
 
diff --git a/docs/styles/padding.md b/docs/styles/padding.md
index af3d247fd..ae4a83dc1 100644
--- a/docs/styles/padding.md
+++ b/docs/styles/padding.md
@@ -50,7 +50,7 @@ This example adds padding around some text.
 
 === "padding.css"
 
-    ```sass
+    ```sass hl_lines="7"
     --8<-- "docs/examples/styles/padding.css"
     ```
 
@@ -73,7 +73,7 @@ The effect of each padding setting is noticeable in the colored background aroun
 
 === "padding_all.css"
 
-    ```py
+    ```sass hl_lines="16 20 24 28 32 36 40 44"
     --8<-- "docs/examples/styles/padding_all.css"
     ```
 
diff --git a/docs/styles/text_opacity.md b/docs/styles/text_opacity.md
index 25b26eb0f..ca89a3b0c 100644
--- a/docs/styles/text_opacity.md
+++ b/docs/styles/text_opacity.md
@@ -30,7 +30,7 @@ This example shows, from top to bottom, increasing `text-opacity` values.
 
 === "text_opacity.css"
 
-    ```sass
+    ```sass hl_lines="2 6 10 14 18"
     --8<-- "docs/examples/styles/text_opacity.css"
     ```
 
diff --git a/docs/styles/text_style.md b/docs/styles/text_style.md
index f8a91a2e8..aa0d4fcdd 100644
--- a/docs/styles/text_style.md
+++ b/docs/styles/text_style.md
@@ -29,7 +29,7 @@ Each of the three text panels has a different text style, respectively `bold`, `
 
 === "text_style.css"
 
-    ```sass
+    ```sass hl_lines="9 13 17"
     --8<-- "docs/examples/styles/text_style.css"
     ```
 
@@ -50,7 +50,7 @@ The next example shows all different styles on their own, as well as some combin
 
 === "text_style_all.css"
 
-    ```sass
+    ```sass hl_lines="2 6 10 14 18 22 26 30"
     --8<-- "docs/examples/styles/text_style_all.css"
     ```
 
diff --git a/docs/styles/tint.md b/docs/styles/tint.md
index 3d4c308d3..6ca08b04e 100644
--- a/docs/styles/tint.md
+++ b/docs/styles/tint.md
@@ -21,10 +21,12 @@ This examples shows a green tint with gradually increasing alpha.
 
 === "tint.py"
 
-    ```python
+    ```python hl_lines="11"
     --8<-- "docs/examples/styles/tint.py"
     ```
 
+    1. We set the tint to a `Color` instance with varying levels of transparency, set through the method `.with_alpha`.
+
 === "tint.css"
 
     ```sass
@@ -35,7 +37,7 @@ This examples shows a green tint with gradually increasing alpha.
 
 ```sass
 /* A red tint (could indicate an error) */
-tint: red 20%
+tint: red 20%;
 
 /* A green tint */
 tint: rgba(0, 200, 0, 0.3);
diff --git a/docs/styles/visibility.md b/docs/styles/visibility.md
index 62ae2ac89..2d9e07590 100644
--- a/docs/styles/visibility.md
+++ b/docs/styles/visibility.md
@@ -47,7 +47,7 @@ Note that the second widget is hidden, while leaving a space where it would have
 
 === "visibility.css"
 
-    ```sass
+    ```sass hl_lines="14"
     --8<-- "docs/examples/styles/visibility.css"
     ```
 
diff --git a/docs/styles/width.md b/docs/styles/width.md
index a66e8ae6c..bc1cf055b 100644
--- a/docs/styles/width.md
+++ b/docs/styles/width.md
@@ -30,7 +30,7 @@ This example adds a widget with 50% width of the screen.
 
 === "width.css"
 
-    ```sass
+    ```sass hl_lines="3"
     --8<-- "docs/examples/styles/width.css"
     ```
 
@@ -82,7 +82,7 @@ width: 10;
 width: 50%;
 
 /* Automatic width */
-width: auto
+width: auto;
 ```
 
 ## Python