Highlight rule usage in references.

[skip ci]

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"
     ```
 

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

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"
     ```
 

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"
     ```
 

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;

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"
     ```
 

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"
     ```
 

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

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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,

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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"
     ```
 

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);

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"
     ```
 

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