From 389f6ab6ee2c9cbb7755828ff64ad877e25af742 Mon Sep 17 00:00:00 2001
From: Jengamon <uche.okwo1@gmail.com>
Date: Sun, 17 Apr 2022 21:02:17 +0000
Subject: [PATCH] Add incorrect code block support (#348)

This should resolve #343 by adding a shortcode that goes around code blocks that should be marked incorrect (`incorrect_code_block()`), highlights them in a dark red, and makes the left border red. Looks like this:
<img width="1213" alt="Screen Shot 2022-04-16 at 4 50 25 PM" src="https://user-images.githubusercontent.com/1479994/163690976-77abfe98-fd71-4988-afcb-02e3be35491a.png">

from:

~~~markdown
Just keep in mind that `&World` will conflict with _any_ mutable Query:

{% incorrect_code_block() %}
```rust
fn invalid_system(world: &World, transforms: Query<&mut Transform>) {
}
```
{% end %}

In these cases, consider using our new [ParamSets](/news/bevy-0-7/#paramsets) to resolve the conflict:

```rust
fn valid_system(set: ParamSet<(&World, Query<&mut Transform>)>) {
}
```
~~~
---
 content/news/2022-04-15-bevy-0.7/index.md     |   2 +
 sass/components/_syntax-theme.scss            | 228 ++++++++++++------
 .../shortcodes/incorrect_code_block.html      |   3 +
 3 files changed, 163 insertions(+), 70 deletions(-)
 create mode 100644 templates/shortcodes/incorrect_code_block.html

diff --git a/content/news/2022-04-15-bevy-0.7/index.md b/content/news/2022-04-15-bevy-0.7/index.md
index 568cb05ef4..9d68be8eaf 100644
--- a/content/news/2022-04-15-bevy-0.7/index.md
+++ b/content/news/2022-04-15-bevy-0.7/index.md
@@ -554,10 +554,12 @@ fn system(world: &World, transforms: Query<&Transform>) {
 
 Just keep in mind that `&World` will conflict with _any_ mutable Query:
 
+{% incorrect_code_block() %}
 ```rust
 fn invalid_system(world: &World, transforms: Query<&mut Transform>) {
 }
 ```
+{% end %}
 
 In these cases, consider using our new [ParamSets](/news/bevy-0-7/#paramsets) to resolve the conflict:
 
diff --git a/sass/components/_syntax-theme.scss b/sass/components/_syntax-theme.scss
index 80df341a41..1270375172 100644
--- a/sass/components/_syntax-theme.scss
+++ b/sass/components/_syntax-theme.scss
@@ -1,161 +1,243 @@
 .z-code {
- color: #c0c5ce;
- background-color: $syntax-theme-background;
+    color: #c0c5ce;
+    background-color: $syntax-theme-background;
+}
+
+div.incorrect {
+    background-color: #542326;
+    border-left: 10px solid red;
+    border-radius: 10px;
+
+    .z-code,
+    .z-code code {
+        background-color: #542326;
+    }
 }
 
 .z-variable.z-parameter.z-function {
- color: #c0c5ce;
+    color: #c0c5ce;
 }
-.z-comment, .z-punctuation.z-definition.z-comment {
- color: #65737e;
+
+.z-comment,
+.z-punctuation.z-definition.z-comment {
+    color: #65737e;
 }
-.z-punctuation.z-definition.z-string, .z-punctuation.z-definition.z-variable, .z-punctuation.z-definition.z-string, .z-punctuation.z-definition.z-parameters, .z-punctuation.z-definition.z-string, .z-punctuation.z-definition.z-array {
- color: #c0c5ce;
+
+.z-punctuation.z-definition.z-string,
+.z-punctuation.z-definition.z-variable,
+.z-punctuation.z-definition.z-string,
+.z-punctuation.z-definition.z-parameters,
+.z-punctuation.z-definition.z-string,
+.z-punctuation.z-definition.z-array {
+    color: #c0c5ce;
 }
+
 .z-none {
- color: #c0c5ce;
+    color: #c0c5ce;
 }
+
 .z-keyword.z-operator {
- color: #c0c5ce;
+    color: #c0c5ce;
 }
+
 .z-keyword {
- color: #c594c5ff;
+    color: #c594c5ff;
 }
+
 .z-variable {
- color: #c0c5ce;
+    color: #c0c5ce;
 }
-.z-entity.z-name.z-function, .z-meta.z-require, .z-support.z-function.z-any-method {
- color: #6699ccff;
+
+.z-entity.z-name.z-function,
+.z-meta.z-require,
+.z-support.z-function.z-any-method {
+    color: #6699ccff;
 }
-.z-support.z-class, .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class {
+
+.z-support.z-class,
+.z-entity.z-name.z-class,
+.z-entity.z-name.z-type.z-class {
     color: #dfc479;
 }
+
 .z-meta.z-class {
- color: #eff1f5;
+    color: #eff1f5;
 }
+
 .z-keyword.z-other.z-special-method {
- color: #8fa1b3;
+    color: #8fa1b3;
 }
+
 .z-storage {
- color: #b48ead;
+    color: #b48ead;
 }
+
 .z-support.z-function {
- color: #6699ccff;
+    color: #6699ccff;
 }
-.z-string, .z-constant.z-other.z-symbol, .z-entity.z-other.z-inherited-class {
- color: #9fc37f;
+
+.z-string,
+.z-constant.z-other.z-symbol,
+.z-entity.z-other.z-inherited-class {
+    color: #9fc37f;
 }
+
 .z-none {
- color: #e79e6d;
+    color: #e79e6d;
 }
+
 .z-constant {
- color: #e79e6d;
+    color: #e79e6d;
 }
+
 .z-entity.z-name.z-tag {
- color: #e05a67;
+    color: #e05a67;
 }
+
 .z-entity.z-other.z-attribute-name {
- color: #d08770;
+    color: #d08770;
 }
-.z-entity.z-other.z-attribute-name.z-id, .z-punctuation.z-definition.z-entity {
- color: #8fa1b3;
+
+.z-entity.z-other.z-attribute-name.z-id,
+.z-punctuation.z-definition.z-entity {
+    color: #8fa1b3;
 }
+
 .z-meta.z-selector {
- color: #b48ead;
+    color: #b48ead;
 }
-.z-markup.z-heading .z-punctuation.z-definition.z-heading, .z-entity.z-name.z-section {
- color: #8fa1b3;
+
+.z-markup.z-heading .z-punctuation.z-definition.z-heading,
+.z-entity.z-name.z-section {
+    color: #8fa1b3;
 }
+
 .z-keyword.z-other.z-unit {
- color: #e79e6d;
+    color: #e79e6d;
 }
-.z-markup.z-bold, .z-punctuation.z-definition.z-bold {
+
+.z-markup.z-bold,
+.z-punctuation.z-definition.z-bold {
     color: #dfc479;
     font-weight: bold;
 }
-.z-markup.z-italic, .z-punctuation.z-definition.z-italic {
- color: #b48ead;
-font-style: italic;
+
+.z-markup.z-italic,
+.z-punctuation.z-definition.z-italic {
+    color: #b48ead;
+    font-style: italic;
 }
+
 .z-markup.z-raw.z-inline {
- color: #a3be8c;
+    color: #a3be8c;
 }
+
 .z-string.z-other.z-link {
- color: #bf616a;
+    color: #bf616a;
 }
+
 .z-meta.z-link {
- color: #e79e6d;
+    color: #e79e6d;
 }
+
 .z-markup.z-list {
- color: #bf616a;
+    color: #bf616a;
 }
+
 .z-markup.z-quote {
- color: #e79e6d;
+    color: #e79e6d;
 }
+
 .z-meta.z-separator {
- color: #c0c5ce;
- background-color: #4f5b66;
+    color: #c0c5ce;
+    background-color: #4f5b66;
 }
-.z-markup.z-inserted, .z-markup.z-inserted.z-git_gutter {
- color: #a3be8c;
+
+.z-markup.z-inserted,
+.z-markup.z-inserted.z-git_gutter {
+    color: #a3be8c;
 }
-.z-markup.z-deleted, .z-markup.z-deleted.z-git_gutter {
- color: #bf616a;
+
+.z-markup.z-deleted,
+.z-markup.z-deleted.z-git_gutter {
+    color: #bf616a;
 }
-.z-markup.z-changed, .z-markup.z-changed.z-git_gutter {
- color: #b48ead;
+
+.z-markup.z-changed,
+.z-markup.z-changed.z-git_gutter {
+    color: #b48ead;
 }
-.z-markup.z-ignored, .z-markup.z-ignored.z-git_gutter {
- color: #4f5b66;
+
+.z-markup.z-ignored,
+.z-markup.z-ignored.z-git_gutter {
+    color: #4f5b66;
 }
-.z-markup.z-untracked, .z-markup.z-untracked.z-git_gutter {
- color: #4f5b66;
+
+.z-markup.z-untracked,
+.z-markup.z-untracked.z-git_gutter {
+    color: #4f5b66;
 }
+
 .z-constant.z-other.z-color {
- color: #96b5b4;
+    color: #96b5b4;
 }
+
 .z-string.z-regexp {
- color: #96b5b4;
+    color: #96b5b4;
 }
+
 .z-constant.z-character.z-escape {
- color: #96b5b4;
+    color: #96b5b4;
 }
-.z-punctuation.z-section.z-embedded, .z-variable.z-interpolation {
- color: #ab7967;
+
+.z-punctuation.z-section.z-embedded,
+.z-variable.z-interpolation {
+    color: #ab7967;
 }
+
 .z-invalid.z-illegal {
- color: #2b303b;
- background-color: #bf616a;
+    color: #2b303b;
+    background-color: #bf616a;
 }
+
 .z-markup.z-deleted.z-git_gutter {
- color: #f92672;
+    color: #f92672;
 }
+
 .z-markup.z-inserted.z-git_gutter {
- color: #a6e22e;
+    color: #a6e22e;
 }
+
 .z-markup.z-changed.z-git_gutter {
- color: #967efb;
+    color: #967efb;
 }
+
 .z-markup.z-ignored.z-git_gutter {
- color: #565656;
+    color: #565656;
 }
+
 .z-markup.z-untracked.z-git_gutter {
- color: #565656;
+    color: #565656;
 }
 
 
 // RUST OVERRIDES
 
-.z-meta.z-generic.z-rust, .z-entity.z-name.z-struct.z-rust, .z-entity.z-name.z-impl.z-rust {
+.z-meta.z-generic.z-rust,
+.z-entity.z-name.z-struct.z-rust,
+.z-entity.z-name.z-impl.z-rust {
     color: #dfc479;
-} 
+}
 
 .z-punctuation.z-definition.z-generic.z-rust {
     color: #c0c5ce;
 }
 
-.z-storage.z-type.z-function, .z-keyword.z-operator.z-rust, .z-storage.z-type.z-struct.z-rust,
-.z-punctuation.z-accessor.z-rust, .z-storage.z-modifier.z-rust {
+.z-storage.z-type.z-function,
+.z-keyword.z-operator.z-rust,
+.z-storage.z-type.z-struct.z-rust,
+.z-punctuation.z-accessor.z-rust,
+.z-storage.z-modifier.z-rust {
     color: #c594c5ff;
 }
 
@@ -171,19 +253,25 @@ font-style: italic;
     color: #56b6c2;
 }
 
-.z-meta.z-annotation.z-rust, .z-variable.z-annotation.z-rust {
+.z-meta.z-annotation.z-rust,
+.z-variable.z-annotation.z-rust {
     color: #d19a66;
 }
 
 .z-meta.z-annotation.z-parameters.z-rust {
-    .z-begin, .z-end, .z-punctuation {
+
+    .z-begin,
+    .z-end,
+    .z-punctuation {
         color: #d19a66;
     }
+
     color: #d1af8f;
 }
 
 // SHELL OVERRIDES
-.z-variable.z-function.z-shell, .z-support.z-function.z-shell {
+.z-variable.z-function.z-shell,
+.z-support.z-function.z-shell {
     color: #6699ccff;
 }
 
diff --git a/templates/shortcodes/incorrect_code_block.html b/templates/shortcodes/incorrect_code_block.html
new file mode 100644
index 0000000000..938a18e43e
--- /dev/null
+++ b/templates/shortcodes/incorrect_code_block.html
@@ -0,0 +1,3 @@
+<div class="incorrect">
+    {{ body | markdown | safe }}
+</div>
\ No newline at end of file