[vuepress] Add valid-* eslint-code-block

docs/rules/valid-v-bind.md

@@ -15,20 +15,22 @@ This rule does not report `v-bind` directives which do not have their argument (
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
+<eslint-code-block :rules="{'vue/valid-v-bind': ['error']}">
 ```html
-<div v-bind/>
-<div :aaa/>
-<div v-bind:aaa.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div v-bind="foo"/>
-<div v-bind:aaa="foo"/>
-<div :aaa="foo"/>
-<div :aaa.prop="foo"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-bind="foo"/>
+  <div v-bind:aaa="foo"/>
+  <div :aaa="foo"/>
+  <div :aaa.prop="foo"/>
+
+  <!-- ✗ BAD -->
+  <div v-bind/>
+  <div :aaa/>
+  <div v-bind:aaa.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/valid-v-cloak.md

@@ -12,19 +12,19 @@ This rule reports `v-cloak` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-cloak.bbb></div>`
 - The directive has that attribute value. E.g. `<div v-cloak="ccc"></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-cloak:aaa/>
-<div v-cloak.bbb/>
-<div v-cloak="ccc"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-cloak': ['error']}">
 ```html
-<div v-cloak/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-cloak/>
+
+  <!-- ✗ BAD -->
+  <div v-cloak:aaa/>
+  <div v-cloak.bbb/>
+  <div v-cloak="ccc"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/valid-v-else-if.md

@@ -16,20 +16,20 @@ This rule reports `v-else-if` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-else-if/>
-<div v-else-if:aaa="foo"/>
-<div v-else-if.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-else-if': ['error']}">
 ```html
-<div v-if="foo"/>
-<div v-else-if="bar"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo"/>
+  <div v-else-if="bar"/>
+
+  <!-- ✗ BAD -->
+  <div v-else-if/>
+  <div v-else-if:aaa="foo"/>
+  <div v-else-if.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/valid-v-else.md

@@ -14,20 +14,20 @@ This rule reports `v-else` directives in the following cases:
 - The directive is on the elements that the previous element don't have `v-if`/`v-if-else` directives. E.g. `<div v-else></div>`
 - The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. `<div v-if="foo" v-else></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-else="foo"/>
-<div v-else:aaa/>
-<div v-else.bbb/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-else': ['error']}">
 ```html
-<div v-if="foo"/>
-<div v-else/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo"/>
+  <div v-else/>
+
+  <!-- ✗ BAD -->
+  <div v-else="foo"/>
+  <div v-else:aaa/>
+  <div v-else.bbb/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/valid-v-for.md

@@ -22,37 +22,37 @@ The following cases are syntax errors:
 - The directive's value is not the form `alias in expr`. E.g. `<div v-for="foo"></div>`
 - The alias is not LHS. E.g. `<div v-for="foo() in list"></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-for/>
-<div v-for:aaa="todo in todos"/>
-<div v-for.bbb="todo in todos"/>
-<div
-  v-for="todo in todos"
-  is="MyComponent"
-/>
-<MyComponent v-for="todo in todos"/>
-<MyComponent
-  v-for="todo in todos"
-  :key="foo"
-/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-for': ['error']}">
 ```html
-<div v-for="todo in todos"/>
-<MyComponent
-  v-for="todo in todos"
-  :key="todo.id"
-/>
-<div
-  v-for="todo in todos"
-  :is="MyComponent"
-  :key="todo.id"
-/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-for="todo in todos"/>
+  <MyComponent
+    v-for="todo in todos"
+    :key="todo.id"
+  />
+  <div
+    v-for="todo in todos"
+    :is="MyComponent"
+    :key="todo.id"
+  />
+
+  <!-- ✗ BAD -->
+  <div v-for/>
+  <div v-for:aaa="todo in todos"/>
+  <div v-for.bbb="todo in todos"/>
+  <div
+    v-for="todo in todos"
+    is="MyComponent"
+  />
+  <MyComponent v-for="todo in todos"/>
+  <MyComponent
+    v-for="todo in todos"
+    :key="foo"
+  />
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/valid-v-html.md

@@ -14,19 +14,19 @@ This rule reports `v-html` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-html/>
-<div v-html:aaa="foo"/>
-<div v-html.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-html': ['error']}">
 ```html
-<div v-html="foo"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-html="foo"/>
+
+  <!-- ✗ BAD -->
+  <div v-html/>
+  <div v-html:aaa="foo"/>
+  <div v-html.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/valid-v-if.md

@@ -15,29 +15,29 @@ This rule reports `v-if` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-if/>
-<div v-if:aaa="foo"/>
-<div v-if.bbb="foo"/>
-<div
-  v-if="foo"
-  v-else
-/>
-<div
-  v-if="foo"
-  v-else-if="bar"
-/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-if': ['error']}">
 ```html
-<div v-if="foo"/>
-<div v-else-if="bar"/>
-<div v-else/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo"/>
+  <div v-else-if="bar"/>
+  <div v-else/>
+
+  <!-- ✗ BAD -->
+  <div v-if/>
+  <div v-if:aaa="foo"/>
+  <div v-if.bbb="foo"/>
+  <div
+    v-if="foo"
+    v-else
+  />
+  <div
+    v-if="foo"
+    v-else-if="bar"
+  />
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/valid-v-model.md

@@ -18,30 +18,30 @@ This rule reports `v-model` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<input v-model>
-<input v-model:aaa="foo">
-<input v-model.bbb="foo">
-<input v-model="foo + bar">
-<div v-model="foo"/>
-<div v-for="todo in todos">
-  <input v-model="todo">
-</div>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-model': ['error']}">
 ```html
-<input v-model="foo">
-<input v-model.lazy="foo">
-<textarea v-model="foo"/>
-<MyComponent v-model="foo"/>
-<div v-for="todo in todos">
-  <input v-model="todo.name">
-</div>
+<template>
+  <!-- ✓ GOOD -->
+  <input v-model="foo">
+  <input v-model.lazy="foo">
+  <textarea v-model="foo"/>
+  <MyComponent v-model="foo"/>
+  <div v-for="todo in todos">
+    <input v-model="todo.name">
+  </div>
+
+  <!-- ✗ BAD -->
+  <input v-model>
+  <input v-model:aaa="foo">
+  <input v-model.bbb="foo">
+  <input v-model="foo + bar">
+  <div v-model="foo"/>
+  <div v-for="todo in todos">
+    <input v-model="todo">
+  </div>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -51,7 +51,6 @@ Nothing.
 
 - [no-parsing-error]
 
-
 [no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation

docs/rules/valid-v-on.md

@@ -14,25 +14,25 @@ This rule reports `v-on` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-on/>
-<div v-on:click/>
-<div v-on:click.aaa="foo"/>
-<div @click/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-on': ['error']}">
 ```html
-<div v-on="foo"/>
-<div v-on:click="foo"/>
-<div @click="foo"/>
-<div @click.left="foo"/>
-<div @click.prevent/>
-<div @click.stop/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-on="foo"/>
+  <div v-on:click="foo"/>
+  <div @click="foo"/>
+  <div @click.left="foo"/>
+  <div @click.prevent/>
+  <div @click.stop/>
+
+  <!-- ✗ BAD -->
+  <div v-on/>
+  <div v-on:click/>
+  <div v-on:click.aaa="foo"/>
+  <div @click/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -42,7 +42,6 @@ Nothing.
 
 - [no-parsing-error]
 
-
 [no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation