Update style for rule fail/pass examples (4/5) (#2756)

Author: stephenwade

docs/rules/prefer-dom-node-dataset.md

@@ -9,54 +9,56 @@
 
 Use [`.dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) on DOM elements over `getAttribute(…)`, `.setAttribute(…)`, `.removeAttribute(…)` and `.hasAttribute(…)`.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const unicorn = element.getAttribute('data-unicorn');
-```
-
-```js
-element.setAttribute('data-unicorn', '🦄');
-```
 
-```js
-element.removeAttribute('data-unicorn');
-```
-
-```js
-const hasUnicorn = element.hasAttribute('data-unicorn');
-```
-
-## Pass
-
-```js
+// ✅
 const {unicorn} = element.dataset;
 ```
 
 ```js
+// ❌
+element.setAttribute('data-unicorn', '🦄');
+
+// ✅
 element.dataset.unicorn = '🦄';
 ```
 
 ```js
+// ❌
+element.removeAttribute('data-unicorn');
+
+// ✅
 delete element.dataset.unicorn;
 ```
 
 ```js
+// ❌
+const hasUnicorn = element.hasAttribute('data-unicorn');
+
+// ✅
 const hasUnicorn = Object.hasOwn(element.dataset, 'unicorn');
 ```
 
 ```js
+// ✅
 const foo = element.getAttribute('foo');
 ```
 
 ```js
+// ✅
 element.setAttribute('not-dataset', '🦄');
 ```
 
 ```js
+// ✅
 element.removeAttribute('not-dataset');
 ```
 
 ```js
+// ✅
 const hasFoo = element.hasAttribute('foo');
 ```

docs/rules/prefer-dom-node-remove.md

@@ -9,16 +9,20 @@
 
 Enforces the use of, for example, `child.remove();` over `child.parentNode.removeChild(child);`. The DOM function [`Node#remove()`](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove) is preferred over the indirect removal of an object with [`Node#removeChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild).
 
-## Fail
+## Examples
 
 ```js
+// ❌
 parentNode.removeChild(foo);
-parentNode.removeChild(this);
-```
 
-## Pass
+// ✅
+foo.remove();
+```
 
 ```js
-foo.remove();
+// ❌
+parentNode.removeChild(this);
+
+// ✅
 this.remove();
 ```

docs/rules/prefer-dom-node-text-content.md

@@ -13,30 +13,28 @@ There are [some advantages of using `.textContent`](https://developer.mozilla.or
 
 Note that there are [differences](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext) between them.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const text = foo.innerText;
-```
-
-```js
-const {innerText} = foo;
-```
 
-```js
-foo.innerText = '🦄';
-```
-
-## Pass
-
-```js
+// ✅
 const text = foo.textContent;
 ```
 
 ```js
+// ❌
+const {innerText} = foo;
+
+// ✅
 const {textContent} = foo;
 ```
 
 ```js
+// ❌
+foo.innerText = '🦄';
+
+// ✅
 foo.textContent = '🦄';
 ```

docs/rules/prefer-event-target.md

@@ -11,24 +11,24 @@ This rule reduces the bundle size and makes your code more cross-platform friend
 
 See the [differences](https://nodejs.org/api/events.html#eventtarget-and-event-api) between `EventEmitter` and `EventTarget`.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 import {EventEmitter} from 'node:event';
 
 class Foo extends EventEmitter {}
-```
-
-```js
-const emitter = new EventEmitter();
-```
-
-## Pass
 
-```js
+// ✅
 class Foo extends EventTarget {}
 ```
 
 ```js
+// ❌
+import {EventEmitter} from 'node:event';
+
+const emitter = new EventEmitter();
+
+// ✅
 const target = new EventTarget();
 ```

docs/rules/prefer-export-from.md

@@ -9,48 +9,46 @@
 
 When re-exporting from a module, it's unnecessary to import and then export. It can be done in a single `export…from` declaration.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 import defaultExport from './foo.js';
 export default defaultExport;
+
+// ✅
+export {default} from './foo.js';
 ```
 
 ```js
+// ❌
 import {named} from './foo.js';
 export {named};
+
+// ✅
+export {named} from './foo.js';
 ```
 
 ```js
+// ❌
 import * as namespace from './foo.js';
 export {namespace};
+
+// ✅
+export * as namespace from './foo.js';
 ```
 
 ```js
+// ❌
 import defaultExport, {named} from './foo.js';
 export default defaultExport;
 export {
 	defaultExport as renamedDefault,
 	named,
 	named as renamedNamed,
 };
-```
-
-## Pass
-
-```js
-export {default} from './foo.js';
-```
 
-```js
-export {named} from './foo.js';
-```
-
-```js
-export * as namespace from './foo.js';
-```
-
-```js
+// ✅
 export {
 	default,
 	default as renamedDefault,
@@ -60,6 +58,7 @@ export {
 ```
 
 ```js
+// ✅
 // There is no substitution
 import * as namespace from './foo.js';
 export default namespace;
@@ -74,21 +73,19 @@ Default: `false`
 
 When `true`, if an import is used in other places than just a re-export, all variables in the import declaration will be ignored.
 
-#### Fail
-
 ```js
 // eslint unicorn/prefer-export-from: ["error", {"ignoreUsedVariables": false}]
+// ❌
 import {named1, named2} from './foo.js';
 
 use(named1);
 
 export {named1, named2};
 ```
 
-#### Pass
-
 ```js
 // eslint unicorn/prefer-export-from: ["error", {"ignoreUsedVariables": true}]
+// ✅
 import {named1, named2} from './foo.js';
 
 use(named1);

docs/rules/prefer-global-this.md

@@ -19,58 +19,98 @@ The complete list of permitted APIs can be found in the rule's [source code](../
 ## Examples
 
 ```js
-window; // ❌
-globalThis; // ✅
+// ❌
+window;
+
+// ✅
+globalThis;
 ```
 
 ```js
-window.foo; // ❌
-globalThis.foo; // ✅
+// ❌
+window.foo;
+
+// ✅
+globalThis.foo;
 ```
 
 ```js
-window[foo]; // ❌
-globalThis[foo]; // ✅
+// ❌
+window[foo];
+
+// ✅
+globalThis[foo];
 ```
 
 ```js
-global; // ❌
-globalThis; // ✅
+// ❌
+global;
+
+// ✅
+globalThis;
 ```
 
 ```js
-global.foo; // ❌
-globalThis.foo; // ✅
+// ❌
+global.foo;
+
+// ✅
+globalThis.foo;
 ```
 
 ```js
-const {foo} = window; // ❌
-const {foo} = globalThis; // ✅
+// ❌
+const {foo} = window;
+
+// ✅
+const {foo} = globalThis;
 ```
 
 ```js
-window.location; // ❌
-globalThis.location; // ✅
+// ❌
+window.navigator;
 
-window.innerWidth; // ✅ (Window specific API)
-window.innerHeight; // ✅ (Window specific API)
+// ✅
+globalThis.navigator;
 ```
 
 ```js
-window.navigator; // ❌
-globalThis.navigator; // ✅
+// ❌
+window.location;
+
+// ✅
+globalThis.location;
 ```
 
 ```js
-self.postMessage('Hello'); // ✅ (Web Worker specific API)
-self.onmessage = () => {}; // ✅ (Web Worker specific API)
+// ✅
+window.innerWidth;
+
+// ✅
+window.innerHeight;
 ```
 
 ```js
-window.addEventListener('click', () => {}); // ❌
-globalThis.addEventListener('click', () => {}); // ✅
+// ✅
+self.postMessage('Hello');
+
+// ✅
+self.onmessage = () => {};
+```
+
+```js
+// ❌
+window.addEventListener('click', () => {});
+
+// ✅
+globalThis.addEventListener('click', () => {});
+
+// ✅
+window.addEventListener('resize', () => {});
+
+// ✅
+window.addEventListener('load', () => {});
 
-window.addEventListener('resize', () => {}); // ✅ (Window specific event)
-window.addEventListener('load', () => {}); // ✅ (Window specific event)
-window.addEventListener('unload', () => {}); // ✅ (Window specific event)
+// ✅
+window.addEventListener('unload', () => {});
 ```