diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index d430a572c..8809a9314 100644
--- a/docs/rules/valid-v-bind.md
+++ b/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
 
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 4927fc093..34ae27f72 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/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
 
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index edc29c9ec..203e9a3be 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/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
 
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 7a0d63887..b1f5e0bb4 100644
--- a/docs/rules/valid-v-else.md
+++ b/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
 
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index cfb14c284..3211e0d60 100644
--- a/docs/rules/valid-v-for.md
+++ b/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
 
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index fcd74dc9e..ccc4dfc60 100644
--- a/docs/rules/valid-v-html.md
+++ b/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
 
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index d036fc8a7..6e38ae81c 100644
--- a/docs/rules/valid-v-if.md
+++ b/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
 
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 25538933c..78dbca74d 100644
--- a/docs/rules/valid-v-model.md
+++ b/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
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index 0f05d0cbb..c38c6c21e 100644
--- a/docs/rules/valid-v-on.md
+++ b/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
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index be3f5f425..f4d29de3d 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -12,19 +12,19 @@ This rule reports `v-once` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-once.bbb></div>`
 - The directive has that attribute value. E.g. `<div v-once="ccc"></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-once:aaa/>
-<div v-once.bbb/>
-<div v-once="ccc"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-once': ['error']}">
 ```html
-<div v-once/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-once/>
+
+  <!-- ✗ BAD -->
+  <div v-once:aaa/>
+  <div v-once.bbb/>
+  <div v-once="ccc"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index 693a416ee..b38b3534b 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -12,19 +12,19 @@ This rule reports `v-pre` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-pre.bbb></div>`
 - The directive has that attribute value. E.g. `<div v-pre="ccc"></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-pre:aaa/>
-<div v-pre.bbb/>
-<div v-pre="ccc"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-pre': ['error']}">
 ```html
-<div v-pre/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-pre/>
+
+  <!-- ✗ BAD -->
+  <div v-pre:aaa/>
+  <div v-pre.bbb/>
+  <div v-pre="ccc"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index 3dfd20fa5..8e54db32c 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -14,19 +14,20 @@ This rule reports `v-show` 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:
 
+<eslint-code-block :rules="{'vue/valid-v-show': ['error']}">
 ```html
-<div v-show/>
-<div v-show:aaa="foo"/>
-<div v-show.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div v-show="foo"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-show="foo"/>
+
+  <!-- ✗ BAD -->
+  <div v-show/>
+  <div v-show:aaa="foo"/>
+  <div v-show.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -36,7 +37,6 @@ Nothing.
 
 - [no-parsing-error]
 
-
 [no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index 5109126ae..86272c309 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -14,19 +14,19 @@ This rule reports `v-text` 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-text/>
-<div v-text:aaa="foo"/>
-<div v-text.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-text': ['error']}">
 ```html
-<div v-text="foo"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-text="foo"/>
+
+  <!-- ✗ BAD -->
+  <div v-text/>
+  <div v-text:aaa="foo"/>
+  <div v-text.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -36,7 +36,6 @@ Nothing.
 
 - [no-parsing-error]
 
-
 [no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation