GDScript style guide: tint borders of good/bad code examples (#5138)

Add `rst-class` directives before code blocks to allow custom styling.

_static/css/custom.css

@@ -85,6 +85,9 @@
     --kbd-shadow-color: #b0b7bf;
     --kbd-text-color: #444d56;
 
+    --code-example-good-color: #3fb950;
+    --code-example-bad-color: #f85149;
+
     --btn-neutral-background-color: #f3f6f6;
     --btn-neutral-hover-background-color: #e5ebeb;
     --footer-color: #808080;
@@ -173,6 +176,9 @@
         --kbd-shadow-color: #1e2023;
         --kbd-text-color: #e2f2ff;
 
+        --code-example-good-color: #3fb950;
+        --code-example-bad-color: #f85149;
+
         --btn-neutral-background-color: #404040;
         --btn-neutral-hover-background-color: #505050;
         --footer-color: #aaa;
@@ -1057,3 +1063,13 @@ kbd.compound > .kbd,
 .wy-menu.wy-menu-vertical::-webkit-scrollbar-thumb:active {
     background-color: var(--navbar-scrollbar-active-color);
 }
+
+/* Allows to add a green or red bar to code blocks for "good"/"bad" code examples. */
+.code-example-good div.highlight {
+    border-left-color: var(--code-example-good-color);
+    border-left-width: 8px;
+}
+.code-example-bad div.highlight {
+    border-left-color: var(--code-example-bad-color);
+    border-left-width: 8px;
+}

tutorials/scripting/gdscript/gdscript_styleguide.rst

@@ -108,6 +108,8 @@ Each indent level should be one greater than the block containing it.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     for i in range(10):
@@ -115,6 +117,8 @@ Each indent level should be one greater than the block containing it.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     for i in range(10):
@@ -128,6 +132,8 @@ regular code blocks.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     effect.interpolate_property(sprite, "transform/scale",
@@ -136,6 +142,8 @@ regular code blocks.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     effect.interpolate_property(sprite, "transform/scale",
@@ -147,6 +155,8 @@ indentation level to distinguish continuation lines:
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     var party = [
@@ -170,6 +180,8 @@ indentation level to distinguish continuation lines:
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     var party = [
@@ -200,6 +212,8 @@ line doesn't need to be modified when adding new elements.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     enum Tiles {
@@ -211,6 +225,8 @@ line doesn't need to be modified when adding new elements.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     enum Tiles {
@@ -224,12 +240,16 @@ Trailing commas are unnecessary in single-line lists, so don't add them in this
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     enum Tiles {TILE_BRICK, TILE_FLOOR, TILE_SPIKE, TILE_TELEPORT}
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     enum Tiles {TILE_BRICK, TILE_FLOOR, TILE_SPIKE, TILE_TELEPORT,}
@@ -274,6 +294,8 @@ not even with a single line conditional statement.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     if position.x > width:
@@ -284,6 +306,8 @@ not even with a single line conditional statement.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     if position.x > width: position.x = 0
@@ -315,6 +339,8 @@ end of the previous line.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     var angle_degrees = 135
@@ -334,6 +360,8 @@ end of the previous line.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     var angle_degrees = 135
@@ -352,6 +380,8 @@ they only reduce readability.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     if is_colliding():
@@ -359,6 +389,8 @@ they only reduce readability.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     if (is_colliding()):
@@ -377,6 +409,8 @@ This can make long expressions easier to read.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     if (foo and bar) or baz:
@@ -384,6 +418,8 @@ This can make long expressions easier to read.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     if foo && bar || baz:
@@ -397,6 +433,8 @@ This helps differentiate text comments from disabled code.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     # This is a comment.
@@ -404,6 +442,8 @@ This helps differentiate text comments from disabled code.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     #This is a comment.
@@ -423,6 +463,8 @@ in dictionary references and function calls.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
     position.x = 5
@@ -433,6 +475,8 @@ in dictionary references and function calls.
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
     position.x=5
@@ -476,12 +520,20 @@ Don't omit the leading or trailing zero in floating-point numbers. Otherwise,
 this makes them less readable and harder to distinguish from integers at a
 glance.
 
-**Good**::
+**Good**:
+
+.. rst-class:: code-example-good
+
+::
 
     var float_number = 0.234
     var other_float_number = 13.0
 
-**Bad**::
+**Bad**:
+
+.. rst-class:: code-example-bad
+
+::
 
     var float_number = .234
     var other_float_number = 13.
@@ -489,18 +541,30 @@ glance.
 Use lowercase for letters in hexadecimal numbers, as their lower height makes
 the number easier to read.
 
-**Good**::
+**Good**:
+
+.. rst-class:: code-example-good
+
+::
 
     var hex_number = 0xfb8c0b
 
-**Bad**::
+**Bad**:
+
+.. rst-class:: code-example-bad
+
+::
 
     var hex_number = 0xFB8C0B
 
 Take advantage of GDScript's underscores in literals to make large numbers more
 readable.
 
-**Good**::
+**Good**:
+
+.. rst-class:: code-example-good
+
+::
 
     var large_number = 1_234_567_890
     var large_hex_number = 0xffff_f8f8_0000
@@ -508,7 +572,11 @@ readable.
     # Numbers lower than 1000000 generally don't need separators.
     var small_number = 12345
 
-**Bad**::
+**Bad**:
+
+.. rst-class:: code-example-bad
+
+::
 
     var large_number = 1234567890
     var large_hex_number = 0xfffff8f80000
@@ -815,12 +883,16 @@ should set the type explicitly.
 
 **Good**:
 
+.. rst-class:: code-example-good
+
 ::
 
    onready var health_bar: ProgressBar = get_node("UI/LifeBar")
 
 **Bad**:
 
+.. rst-class:: code-example-bad
+
 ::
 
    # The compiler can't infer the exact type and will use Node