Docs: Enable example highlighting in rules examples (ref #6444) (#7644)

Some examples showed in the rules docs has outdated examples
without highlight so I've updated them in order to enable it.
I've also change the order in some examples and change some
minimum text to achieve this purpose

docs/rules/arrow-spacing.md

@@ -22,7 +22,7 @@ The default configuration is `{ "before": true, "after": true }`.
 
 `true` means there should be **one or more spaces** and `false` means **no spaces**.
 
-The following patterns are considered problems if `{ "before": true, "after": true }`.
+Examples of **incorrect** code for this rule with the default `{ "before": true, "after": true }` option:
 
 ```js
 /*eslint arrow-spacing: "error"*/
@@ -38,7 +38,7 @@ a=> a;
 () =>{'\n'};
 ```
 
-The following patterns are not considered problems if `{ "before": true, "after": true }`.
+Examples of **correct** code for this rule with the default `{ "before": true, "after": true }` option:
 
 ```js
 /*eslint arrow-spacing: "error"*/
@@ -50,38 +50,46 @@ a => a;
 () => {'\n'};
 ```
 
-The following patterns are not considered problems if `{ "before": false, "after": false }`.
+Examples of **incorrect** code for this rule with the `{ "before": false, "after": false }` option:
+
+```js
+/*eslint arrow-spacing: ["error", { "before": false, "after": false }]*/
+/*eslint-env es6*/
+
+() =>{};
+(a) => {};
+()=> {'\n'};
+```
+
+Examples of **correct** code for this rule with the `{ "before": false, "after": false }` option:
 
 ```js
 /*eslint arrow-spacing: ["error", { "before": false, "after": false }]*/
 /*eslint-env es6*/
 
 ()=>{};
 (a)=>{};
-a=>a;
 ()=>{'\n'};
 ```
 
-The following patterns are not considered problems if `{ "before": true, "after": false }`.
+Examples of **incorrect** code for this rule with the `{ "before": false, "after": true }` option:
 
 ```js
-/*eslint arrow-spacing: ["error", { "before": true, "after": false }]*/
+/*eslint arrow-spacing: ["error", { "before": false, "after": true }]*/
 /*eslint-env es6*/
 
 () =>{};
-(a) =>{};
-a =>a;
-() =>{'\n'};
+(a) => {};
+()=>{'\n'};
 ```
 
-The following patterns are not considered problems if `{ "before": false, "after": true }`.
+Examples of **correct** code for this rule with the `{ "before": false, "after": true }` option:
 
 ```js
 /*eslint arrow-spacing: ["error", { "before": false, "after": true }]*/
 /*eslint-env es6*/
 
 ()=> {};
 (a)=> {};
-a=> a;
 ()=> {'\n'};
 ```

docs/rules/constructor-super.md

@@ -10,7 +10,7 @@ This rule checks whether or not there is a valid `super()` call.
 
 This rule is aimed to flag invalid/missing `super()` calls.
 
-The following patterns are considered problems:
+Examples of **incorrect** code for this rule:
 
 ```js
 /*eslint constructor-super: "error"*/
@@ -38,7 +38,7 @@ class A extends null {
 }
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 /*eslint constructor-super: "error"*/

docs/rules/no-arrow-condition.md

@@ -26,7 +26,7 @@ var x = a <= 1 ? 2 : 3
 
 ## Rule Details
 
-The following patterns are considered warnings:
+Examples of **incorrect** code for this rule:
 
 ```js
 /*eslint no-arrow-condition: "error"*/

docs/rules/no-class-assign.md

@@ -15,7 +15,7 @@ But the modification is a mistake in most cases.
 
 This rule is aimed to flag modifying variables of class declarations.
 
-The following patterns are considered problems:
+Examples of **incorrect** code for this rule:
 
 ```js
 /*eslint no-class-assign: "error"*/
@@ -56,7 +56,7 @@ let A = class A {
 }
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 /*eslint no-class-assign: "error"*/

docs/rules/no-comma-dangle.md

@@ -15,7 +15,7 @@ var foo = {
 
 This rule is aimed at detecting trailing commas in object literals. As such, it will warn whenever it encounters a trailing comma in an object literal.
 
-The following are considered problems:
+Examples of **incorrect** code for this rule:
 
 ```js
 var foo = {
@@ -31,7 +31,7 @@ foo({
 });
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 var foo = {

docs/rules/no-confusing-arrow.md

@@ -15,7 +15,7 @@ var x = a <= 1 ? 2 : 3;
 
 ## Rule Details
 
-The following patterns are considered warnings:
+Examples of **incorrect** code for this rule:
 
 ```js
 /*eslint no-confusing-arrow: "error"*/
@@ -26,7 +26,7 @@ var x = (a) => 1 ? 2 : 3;
 var x = (a) => (1 ? 2 : 3);
 ```
 
-The following patterns are not considered warnings:
+Examples of **correct** code for this rule:
 
 ```js
 /*eslint no-confusing-arrow: "error"*/
@@ -53,7 +53,7 @@ This rule accepts a single options argument with the following defaults:
 1. `true` relaxes the rule and accepts parenthesis as a valid "confusion-preventing" syntax.
 2. `false` warns even if the expression is wrapped in parenthesis
 
-When `allowParens` is set to `true` following patterns are no longer considered as warnings:
+Examples of **correct** code for this rule with the `{"allowParens": true}` option:
 
 ```js
 /*eslint no-confusing-arrow: ["error", {"allowParens": true}]*/

docs/rules/no-const-assign.md

@@ -9,7 +9,7 @@ Under non ES2015 environment, it might be ignored merely.
 
 This rule is aimed to flag modifying variables that are declared using `const` keyword.
 
-The following patterns are considered problems:
+Examples of **incorrect** code for this rule:
 
 ```js
 /*eslint no-const-assign: "error"*/
@@ -35,7 +35,7 @@ const a = 0;
 ++a;
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 /*eslint no-const-assign: "error"*/

docs/rules/no-empty-class.md

@@ -12,7 +12,7 @@ var foo = /^abc[]/;
 
 This rule is aimed at highlighting possible typos and unexpected behavior in regular expressions which may arise from the use of empty character classes.
 
-The following patterns are considered problems:
+Examples of **incorrect** code for this rule:
 
 ```js
 var foo = /^abc[]/;
@@ -22,7 +22,7 @@ var foo = /^abc[]/;
 bar.match(/^abc[]/);
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 var foo = /^abc/;

docs/rules/no-empty-label.md

@@ -9,7 +9,7 @@ Labeled statements are only used in conjunction with labeled break and continue
 
 This error occurs when a label is used to mark a statement that is not an iteration or switch
 
-The following patterns are considered problems:
+Example of **incorrect** code for this rule:
 
 ```js
 /*eslint no-empty-label: "error"*/
@@ -18,7 +18,7 @@ labeled:
 var x = 10;
 ```
 
-The following patterns are not considered problems:
+Example of **correct** code for this rule:
 
 ```js
 /*eslint no-empty-label: "error"*/

docs/rules/no-eval.md

@@ -30,7 +30,7 @@ foo("var a = 0");
 this.eval("var a = 0");
 ```
 
-Examples of **incorrect** code for this rule with browser environment:
+Example of additional **incorrect** code for this rule when `browser` environment is set to `true`:
 
 ```js
 /*eslint no-eval: "error"*/
@@ -39,7 +39,7 @@ Examples of **incorrect** code for this rule with browser environment:
 window.eval("var a = 0");
 ```
 
-Examples of **incorrect** code for this rule with node environment:
+Example of additional **incorrect** code for this rule when `node` environment is set to `true`:
 
 ```js
 /*eslint no-eval: "error"*/
@@ -80,7 +80,7 @@ Indirect calls to `eval` are less dangerous than direct calls to `eval` because
 }
 ```
 
-With this option the following patterns are considered problems:
+Example of **incorrect** code for this rule with the `{"allowIndirect": true}` option:
 
 ```js
 /*eslint no-eval: "error"*/
@@ -90,7 +90,7 @@ var obj = { x: "foo" },
     value = eval("obj." + key);
 ```
 
-With this option the following patterns are not considered problems:
+Examples of **correct** code for this rule with the `{"allowIndirect": true}` option:
 
 ```js
 /*eslint no-eval: "error"*/

docs/rules/no-extra-strict.md

@@ -17,7 +17,7 @@ The `"use strict";` directive applies to the scope in which it appears and all i
 
 This rule is aimed at preventing unnecessary `"use strict";` directives. As such, it will warn when it encounters a `"use strict";` directive when already in strict mode.
 
-The following patterns are considered problems:
+Example of **incorrect** code for this rule:
 
 ```js
 "use strict";
@@ -28,7 +28,7 @@ The following patterns are considered problems:
 }());
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 "use strict";
@@ -38,8 +38,6 @@ The following patterns are not considered problems:
 }());
 ```
 
-
-
 ```js
 (function () {
     "use strict";

docs/rules/no-reserved-keys.md

@@ -18,7 +18,7 @@ ECMAScript 5 loosened the restriction such that keywords and reserved words can
 
 This rule is aimed at eliminating the use of ECMAScript 3 keywords and reserved words as object literal keys. As such, it warns whenever an object key would throw an error in an ECMAScript 3 environment.
 
-The following patterns are considered problems:
+Examples of **incorrect** code for this rule:
 
 ```js
 var superman = {
@@ -31,7 +31,7 @@ var values = {
 };
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 var superman = {

docs/rules/no-space-before-semi.md

@@ -16,7 +16,7 @@ var thing = function () {
 
 This rule prevents the use of spaces before a semicolon in expressions.
 
-The following patterns are considered problems:
+Examples of **incorrect** code for this rule:
 
 ```js
 var foo = "bar" ;
@@ -29,7 +29,7 @@ var foo = function() {
 var foo = 1 + 2 ;
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 ;(function(){}());

docs/rules/no-useless-escape.md

@@ -12,7 +12,7 @@ let baz = /\:/ // same functionality with /:/
 
 This rule flags escapes that can be safely removed without changing behavior.
 
-The following patterns are considered problems:
+Examples of **incorrect** code for this rule:
 
 ```js
 /*eslint no-useless-escape: "error"*/
@@ -29,7 +29,7 @@ The following patterns are considered problems:
 
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 /*eslint no-useless-escape: "error"*/

docs/rules/no-wrap-func.md

@@ -19,13 +19,13 @@ var bar = (function() {
 
 This rule will raise a warning when it encounters a function expression wrapped in parentheses with no following invoking parentheses.
 
-The following patterns are considered problems:
+Example of **incorrect** code for this rule:
 
 ```js
 var a = (function() {/*...*/});
 ```
 
-The following patterns are not considered problems:
+Examples of **correct** code for this rule:
 
 ```js
 var a = function() {/*...*/};