diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 53feb9c8a..803baab0a 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -15,7 +15,8 @@ description: enforce attribute naming style on custom components in template
 This rule enforces using hyphenated attribute names on custom components in Vue templates.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
-```
+
+```vue
 <template>
   <!-- ✔ GOOD -->
   <MyComponent my-prop="prop" />
@@ -24,6 +25,7 @@ This rule enforces using hyphenated attribute names on custom components in Vue
   <MyComponent myProp="prop" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -46,7 +48,8 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 It errors on upper case letters.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
-```
+
+```vue
 <template>
   <!-- ✔ GOOD -->
   <MyComponent my-prop="prop" />
@@ -55,13 +58,15 @@ It errors on upper case letters.
   <MyComponent myProp="prop" />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"never"`
 It errors on hyphens except `data-`, `aria-` and `slot-scope`.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
-```
+
+```vue
 <template>
   <!-- ✔ GOOD -->
   <MyComponent myProp="prop" />
@@ -73,13 +78,15 @@ It errors on hyphens except `data-`, `aria-` and `slot-scope`.
   <MyComponent my-prop="prop" />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"never", { "ignore": ["custom-prop"] }` 
 Don't use hyphenated name but allow custom attributes
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', { ignore: ['custom-prop']}]}">
-```
+
+```vue
 <template>
   <!-- ✔ GOOD -->
   <MyComponent myProp="prop" />
@@ -92,6 +99,7 @@ Don't use hyphenated name but allow custom attributes
   <MyComponent my-prop="prop" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index d703d7f58..cbd38eee0 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -40,7 +40,8 @@ This rule aims to enforce ordering of component attributes. The default order is
 ### the default order
 
 <eslint-code-block fix :rules="{'vue/attributes-order': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -85,6 +86,7 @@ This rule aims to enforce ordering of component attributes. The default order is
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -113,7 +115,8 @@ This rule aims to enforce ordering of component attributes. The default order is
 #### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
 <eslint-code-block fix :rules="{'vue/attributes-order': ['error', {order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -131,12 +134,14 @@ This rule aims to enforce ordering of component attributes. The default order is
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 #### `[['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
 <eslint-code-block fix :rules="{'vue/attributes-order': ['error', {order: [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -153,6 +158,7 @@ This rule aims to enforce ordering of component attributes. The default order is
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index 7be264cec..9db00825f 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -30,6 +30,7 @@ ESLint doesn't provide any API to enhance `eslint-disable` functionality and ESL
 This rule sends all `eslint-disable`-like comments as errors to the post-process of the `.vue` file processor, then the post-process removes all `vue/comment-directive` errors and the reported errors in disabled areas.
 
 <eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error']}">
+
 ```vue
 <template>
   <!-- eslint-disable-next-line vue/max-attributes-per-line -->
@@ -37,6 +38,7 @@ This rule sends all `eslint-disable`-like comments as errors to the post-process
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index c7ea7ea84..c2bd52900 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -33,7 +33,8 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 ### `"PascalCase"`
 
 <eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <TheComponent />
@@ -44,12 +45,14 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
   <The-component />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"kebab-case"`
 
 <eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'kebab-case']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <the-component />
@@ -61,13 +64,15 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
   <The-component />
 </template>
 ```
+
 </eslint-code-block>
 
 
 ### `"PascalCase", { ignores: ["custom-element"] }`
 
 <eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {ignores: ['custom-element']}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <TheComponent/>
@@ -77,6 +82,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
   <magic-element></magic-element>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index 056905fea..d91987052 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -31,7 +31,8 @@ This rule enforces a line break (or no line break) before tag's closing brackets
 This rule aims to warn the right angle brackets which are at the location other than the configured location.
 
 <eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div id="foo" class="bar">
@@ -48,6 +49,7 @@ This rule aims to warn the right angle brackets which are at the location other
     class="bar">
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -73,7 +75,8 @@ Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-l
 ### `"multiline": "never"`
 
 <eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error', { 'multiline': 'never' }]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -87,6 +90,7 @@ Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-l
   >
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 20292810c..e77b9d7ec 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -15,7 +15,8 @@ description: require or disallow a space before tag's closing brackets
 This rule aims to enforce consistent spacing style before closing brackets `>` of tags.
 
 <eslint-code-block fix :rules="{'vue/html-closing-bracket-spacing': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div>
@@ -36,6 +37,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
   <div foo="bar"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -63,7 +65,8 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
 ### `"startTag": "always", "endTag": "always", "selfClosingTag": "always"`
 
 <eslint-code-block fix :rules="{'vue/html-closing-bracket-spacing': ['error', {startTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div >
@@ -75,6 +78,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
   <div foo="bar" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :couple: Related rules
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index fe8b704bb..9cf5c1105 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -15,7 +15,8 @@ description: enforce end tag style
 This rule aims to disallow lacking end tags.
 
 <eslint-code-block fix :rules="{'vue/html-end-tags': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div></div>
@@ -29,6 +30,7 @@ This rule aims to disallow lacking end tags.
   <p>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index fb5aab263..4c366451c 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -18,7 +18,8 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 - In the expressions, this rule supports ECMAScript 2017 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div class="foo">
@@ -55,6 +56,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
     </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -81,7 +83,8 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 ### `2, {"attribute": 1, "closeBracket": 1}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {attribute: 1, closeBracket: 1}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -96,12 +99,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ### `2, {"attribute": 2, "closeBracket": 1}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {attribute: 2, closeBracket: 1}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -116,12 +121,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ### `2, {"ignores": ["VAttribute"]}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {ignores: ['VAttribute']}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -130,12 +137,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `2, {"alignAttributesVertically": false}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {alignAttributesVertically: false}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div id=""
@@ -150,12 +159,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `2, {"baseIndent": 0}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {baseIndent: 0}]}">
-```
+
+```vue
 <template>
 <!-- ✓ GOOD -->
 <div>
@@ -172,6 +183,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index c63dcbd0d..aa0180de9 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -23,7 +23,8 @@ This rule enforces the quotes style of HTML attributes.
 This rule reports the quotes of attributes if it is different to configured quotes.
 
 <eslint-code-block fix :rules="{'vue/html-quotes': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <img src="./logo.png">
@@ -33,6 +34,7 @@ This rule reports the quotes of attributes if it is different to configured quot
   <img src=./logo.png>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -51,7 +53,8 @@ Default is set to `double`.
 ### `"single"`
 
 <eslint-code-block fix :rules="{'vue/html-quotes': ['error', 'single']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <img src='./logo.png'>
@@ -61,6 +64,7 @@ Default is set to `double`.
   <img src=./logo.png>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index bf818a016..da83e5b73 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -22,7 +22,8 @@ In Vue.js template, we can use either two styles for elements which don't have t
 Self-closing is simple and shorter, but it's not supported in the HTML spec.
 
 <eslint-code-block fix :rules="{'vue/html-self-closing': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div/>
@@ -37,6 +38,7 @@ Self-closing is simple and shorter, but it's not supported in the HTML spec.
   <svg><path d=""></path></svg>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -70,7 +72,8 @@ Every option can be set to one of the following values:
 ### `html: {normal: "never", void: "always"}`
 
 <eslint-code-block fix :rules="{'vue/html-self-closing': ['error', {html: {normal: 'never', void: 'always'}}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div></div>
@@ -85,6 +88,7 @@ Every option can be set to one of the following values:
   <svg><path d=""></path></svg>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index d7c3e2d55..97e0402ed 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -21,7 +21,8 @@ An attribute is considered to be in a new line when there is a line break betwee
 There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 1).
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent lorem="1"/>
@@ -46,6 +47,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -69,7 +71,8 @@ There is a configurable number of attributes that are acceptable in one-line cas
 ### `"singleline": 3`
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {singleline: 3}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent lorem="1" ipsum="2" dolor="3" />
@@ -78,12 +81,14 @@ There is a configurable number of attributes that are acceptable in one-line cas
   <MyComponent lorem="1" ipsum="2" dolor="3" sit="4" />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"multiline": 2`
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {multiline: 2}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent
@@ -98,12 +103,14 @@ There is a configurable number of attributes that are acceptable in one-line cas
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"multiline": 1, "allowFirstLine": true`
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {multiline: { allowFirstLine: true }}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent lorem="1"
@@ -112,6 +119,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 1e9357a78..9fe8d45af 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -15,6 +15,7 @@ description: require a line break before and after the contents of a multiline e
 This rule enforces a line break before and after the contents of a multiline element.
 
 <eslint-code-block fix :rules="{'vue/multiline-html-element-content-newline': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -68,6 +69,7 @@ This rule enforces a line break before and after the contents of a multiline ele
   ></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -89,6 +91,7 @@ This rule enforces a line break before and after the contents of a multiline ele
 ### `"ignores": ["VueComponent", "pre", "textarea"]`
 
 <eslint-code-block fix :rules="{'vue/multiline-html-element-content-newline': ['error', { ignores: ['VueComponent', 'pre', 'textarea'] }]}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -103,6 +106,7 @@ This rule enforces a line break before and after the contents of a multiline ele
   Defines the Vue component that accepts preformatted text.</VueComponent>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index f9bea9956..05db8ed48 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -15,7 +15,8 @@ description: enforce unified spacing in mustache interpolations
 This rule aims at enforcing unified spacing in mustache interpolations.
 
 <eslint-code-block fix :rules="{'vue/mustache-interpolation-spacing': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div>{{ text }}</div>
@@ -25,6 +26,7 @@ This rule aims at enforcing unified spacing in mustache interpolations.
   <div>{{text}}</div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -41,7 +43,8 @@ This rule aims at enforcing unified spacing in mustache interpolations.
 ### `"never"`
 
 <eslint-code-block fix :rules="{'vue/mustache-interpolation-spacing': ['error', 'never']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div>{{text}}</div>
@@ -51,6 +54,7 @@ This rule aims at enforcing unified spacing in mustache interpolations.
   <div>{{ text }}</div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index b5d307b5b..98aa4a26c 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -15,7 +15,8 @@ description: enforce specific casing for the name property in Vue components
 This rule aims at enforcing the style for the `name` property casing for consistency purposes.
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error']}">
-```
+
+```vue
 <script>
   /* ✓ GOOD */
   export default {
@@ -23,10 +24,12 @@ This rule aims at enforcing the style for the `name` property casing for consist
   }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error']}">
-```
+
+```vue
 <script>
   /* ✗ BAD */
   export default {
@@ -34,6 +37,7 @@ This rule aims at enforcing the style for the `name` property casing for consist
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -50,7 +54,8 @@ This rule aims at enforcing the style for the `name` property casing for consist
 ### `"kebab-case"`
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
-```
+
+```vue
 <script>
   /* ✓ GOOD */
   export default {
@@ -58,10 +63,12 @@ This rule aims at enforcing the style for the `name` property casing for consist
   }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
-```
+
+```vue
 <script>
   /* ✗ BAD */
   export default {
@@ -69,6 +76,7 @@ This rule aims at enforcing the style for the `name` property casing for consist
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index 92205af86..7e2a39629 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -17,7 +17,8 @@ If you need async computed properties you might want to consider using additiona
 This rule is aimed at preventing asynchronous methods from being called in computed properties.
 
 <eslint-code-block :rules="{'vue/no-async-in-computed-properties': ['error']}">
-```
+
+```vue
 <script>
 export default {
   computed: {
@@ -56,6 +57,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 9e76e8cd1..4e8fccbd7 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -18,7 +18,8 @@ This rule reports the elements which have both `v-for` and `v-if` directives in
 In that case, the `v-if` should be written on the wrapper element.
 
 <eslint-code-block :rules="{'vue/no-confusing-v-for-v-if': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <TodoItem
@@ -41,6 +42,7 @@ In that case, the `v-if` should be written on the wrapper element.
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 70bbf88b2..2cbed8ebb 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -16,7 +16,8 @@ This rule prevents to use duplicated names.
 This rule is aimed at preventing duplicated property names.
 
 <eslint-code-block :rules="{'vue/no-dupe-keys': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -37,6 +38,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -54,7 +56,8 @@ export default {
 ### `"groups": ["firebase"]`
 
 <eslint-code-block :rules="{'vue/no-dupe-keys': ['error', {groups: ['firebase']}]}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -67,6 +70,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 5658370fa..bdccf50bd 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -18,7 +18,8 @@ This rule reports duplicate attributes.
 `v-bind:foo` directives are handled as the attributes `foo`.
 
 <eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent :foo="abc" />
@@ -33,6 +34,7 @@ This rule reports duplicate attributes.
   <MyComponent class="abc" class="def" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -55,13 +57,15 @@ This rule reports duplicate attributes.
 ### `"allowCoexistClass": false, "allowCoexistStyle": false`
 
 <eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error', {allowCoexistClass: false, allowCoexistStyle: false}]}">
-```
+
+```vue
 <template>
   <!-- ✗ BAD -->
   <MyComponent class="abc" :class="def" />
   <MyComponent style="abc" :style="def" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index bc21e0a63..72655e99e 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -15,7 +15,8 @@ description: disallow multiple spaces
 This rule aims at removing multiple spaces in tags, which are not used for indentation.
 
 <eslint-code-block fix :rules="{'vue/no-multi-spaces': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -39,6 +40,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -56,6 +58,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
 ### `"ignoreProperties": true`
 
 <eslint-code-block fix :rules="{'vue/no-multi-spaces': ['error', { 'ignoreProperties': true }]}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -67,6 +70,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index b9dd2ee4a..502104724 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -25,7 +25,8 @@ This rule tries to parse directives/mustaches in `<template>` by the parser whic
 Then reports syntax errors if exist.
 
 <eslint-code-block :rules="{'vue/no-parsing-error': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✗ BAD -->
   {{ . }}
@@ -35,6 +36,7 @@ Then reports syntax errors if exist.
   </div id="ghi">
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index ec2d99206..f16da3e25 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -14,7 +14,8 @@ description: disallow overwriting reserved keys
 This rule prevents to use [reserved names](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue-reserved.json) to avoid conflicts and unexpected behavior.
 
 <eslint-code-block :rules="{'vue/no-reserved-keys': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -35,6 +36,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -54,7 +56,8 @@ export default {
 ### `"reserved": ["foo", "foo2"], "groups": ["firebase"]`
 
 <eslint-code-block :rules="{'vue/no-reserved-keys': ['error', {reserved: ['foo', 'foo2'], groups: ['firebase']}]}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -67,6 +70,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index 5c6d15f3e..cfa87ede8 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -17,7 +17,8 @@ When using the data property on a component (i.e. anywhere except on `new Vue`),
 When the value of `data` is an object, it’s shared across all instances of a component.
 
 <eslint-code-block fix :rules="{'vue/no-shared-component-data': ['error']}">
-```
+
+```vue
 <script>
 /* ✓ GOOD */
 Vue.component('some-comp', {
@@ -37,10 +38,12 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block fix :rules="{'vue/no-shared-component-data': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 Vue.component('some-comp', {
@@ -56,6 +59,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 485e63663..8e3e694b6 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -16,7 +16,8 @@ This rule is aimed at preventing the code which makes side effects in computed p
 It is considered a very bad practice to introduce side effects inside computed properties. It makes the code not predictable and hard to understand.
 
 <eslint-code-block :rules="{'vue/no-side-effects-in-computed-properties': ['error']}">
-```
+
+```vue
 <script>
 /* ✓ GOOD */
 export default {
@@ -31,10 +32,12 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/no-side-effects-in-computed-properties': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -50,6 +53,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index 9cf5ea386..8498e3cc3 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -15,7 +15,8 @@ description: disallow spaces around equal signs in attribute
 This rule disallow spaces around equal signs in attribute.
 
 <eslint-code-block fix :rules="{'vue/no-spaces-around-equal-signs-in-attribute': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✗ BAD -->
   <div class = "item"></div>
@@ -23,6 +24,7 @@ This rule disallow spaces around equal signs in attribute.
   <div class="item"></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: tip Info
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index 1b67596a1..e62f754b2 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -16,7 +16,8 @@ Vue.js disallows `key` attribute on `<template>` elements.
 This rule reports the `<template>` elements which have `key` attribute.
 
 <eslint-code-block :rules="{'vue/no-template-key': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div key="foo"> ... </div>
@@ -28,6 +29,7 @@ This rule reports the `<template>` elements which have `key` attribute.
   <template :key="baz"> ... </template>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-template-shadow.md b/docs/rules/no-template-shadow.md
index b6e65593e..3c3238813 100644
--- a/docs/rules/no-template-shadow.md
+++ b/docs/rules/no-template-shadow.md
@@ -16,6 +16,7 @@ description: disallow variable declarations from shadowing variables declared in
 This rule aims to eliminate shadowed variable declarations of v-for directives or scope attributes.
 
 <eslint-code-block :rules="{'vue/no-template-shadow': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -42,6 +43,7 @@ This rule aims to eliminate shadowed variable declarations of v-for directives o
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 9cfef08bc..b5e1230e1 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -14,7 +14,8 @@ description: disallow mustaches in `<textarea>`
 This rule reports mustaches in `<textarea>`.
 
 <eslint-code-block :rules="{'vue/no-textarea-mustache': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <textarea v-model="message" />
@@ -23,6 +24,7 @@ This rule reports mustaches in `<textarea>`.
   <textarea>{{ message }}</textarea>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 9f1045636..94d84a679 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -14,6 +14,7 @@ description: disallow registering components that are not used inside templates
 This rule reports components that haven't been used in the template.
 
 <eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+
 ```vue
 <!-- ✓ GOOD -->
 <template>
@@ -43,9 +44,11 @@ This rule reports components that haven't been used in the template.
   }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+
 ```vue
 <!-- ✗ BAD -->
 <template>
@@ -67,6 +70,7 @@ This rule reports components that haven't been used in the template.
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
@@ -89,6 +93,7 @@ Components registered under other than `PascalCase` name have to be called direc
 ### `ignoreWhenBindingPresent: false`
 
 <eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+
 ```vue
 <!-- ✓ GOOD -->
 <template>
@@ -114,9 +119,11 @@ Components registered under other than `PascalCase` name have to be called direc
   }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+
 ```vue
 <!-- ✗ BAD -->
 <template>
@@ -144,6 +151,7 @@ Components registered under other than `PascalCase` name have to be called direc
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index b78b78f87..cde104f4f 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -14,7 +14,8 @@ description: disallow unused variable definitions of v-for directives or scope a
 This rule report variable definitions of v-for directives or scope attributes if those are not used.
 
 <eslint-code-block :rules="{'vue/no-unused-vars': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <ol v-for="i in 5">
@@ -27,6 +28,7 @@ This rule report variable definitions of v-for directives or scope attributes if
   </ol>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index f912b35ea..44c33531e 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -18,7 +18,8 @@ There are two common cases where this can be tempting:
  * To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
 
 <eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <ul v-if="complete">
@@ -45,6 +46,7 @@ There are two common cases where this can be tempting:
   /><!-- ↑ In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list. -->
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -62,7 +64,8 @@ There are two common cases where this can be tempting:
 ### `"allowUsingIterationVar": true`
 
 <eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error', {allowUsingIterationVar: true}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <TodoItem
@@ -79,6 +82,7 @@ There are two common cases where this can be tempting:
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index 45b1bbbe2..76b01afbd 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -14,7 +14,8 @@ description: disallow use of v-html to prevent XSS attack
 This rule reports all uses of `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross-Site Scripting (XSS) attacks.
 
 <eslint-code-block :rules="{'vue/no-v-html': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div>{{ someHTML }}</div>
@@ -23,6 +24,7 @@ This rule reports all uses of `v-html` directive in order to reduce the risk of
   <div v-html="someHTML"></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index 99c40bc23..c28e283b4 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -16,7 +16,8 @@ This rule makes sure you keep declared order of properties in components.
 Recommended order of properties can be [found here](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended).
 
 <eslint-code-block fix :rules="{'vue/order-in-components': ['error']}">
-```
+
+```vue
 <script>
 /* ✓ GOOD */
 export default {
@@ -32,10 +33,12 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block fix :rules="{'vue/order-in-components': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -51,6 +54,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index ea26d9b96..846766c66 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -15,7 +15,8 @@ description: enforce specific casing for the Prop name in Vue components
 This rule enforce proper casing of props in vue components(camelCase).
 
 <eslint-code-block fix :rules="{'vue/prop-name-casing': ['error']}">
-```
+
+```vue
 <script>
 export default {
   props: {
@@ -29,6 +30,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -45,7 +47,8 @@ export default {
 ### `"snake_case"`
 
 <eslint-code-block fix :rules="{'vue/prop-name-casing': ['error', 'snake_case']}">
-```
+
+```vue
 <script>
 export default {
   props: {
@@ -59,6 +62,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 9e1e03882..c586ffd6d 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -15,6 +15,7 @@ This rule reports the `<component>` elements which do not have `v-bind:is` attri
 
 
 <eslint-code-block :rules="{'vue/require-component-is': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -26,6 +27,7 @@ This rule reports the `<component>` elements which do not have `v-bind:is` attri
   <component is="type"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 71bfacb10..f49849b75 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -14,7 +14,8 @@ description: require default value for props
 This rule requires default value to be set for each props that are not marked as `required` (except `Boolean` props).
 
 <eslint-code-block :rules="{'vue/require-default-prop': ['error']}">
-```
+
+```vue
 <script>
 export default {
   props: {
@@ -51,6 +52,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index d08ff1ff4..79e500ee7 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -26,6 +26,7 @@ The following types are forbidden and will be reported:
 It will catch most commonly made mistakes which are using strings instead of constructors.
 
 <eslint-code-block fix :rules="{'vue/require-prop-type-constructor': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -60,6 +61,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 18e5e8c7e..dc730364d 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -16,6 +16,7 @@ This rule enforces that a `props` statement contains type definition.
 In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
 
 <eslint-code-block :rules="{'vue/require-prop-types': ['error']}">
+
 ```vue
 <script>
 /* ✓ GOOD */
@@ -53,6 +54,7 @@ Vue.component('baz', {
 })
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index c8d5f20ec..6c436bb6c 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -14,6 +14,7 @@ description: enforce render function to always return value
 This rule aims to enforce render function to always return value
 
 <eslint-code-block :rules="{'vue/require-render-return': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -24,9 +25,11 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/require-render-return': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -39,6 +42,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index a88bf94b3..2feff9970 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -14,6 +14,7 @@ description: require `v-bind:key` with `v-for` directives
 This rule reports the elements which have `v-for` and do not have `v-bind:key` with exception to custom components.
 
 <eslint-code-block :rules="{'vue/require-v-for-key': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -25,6 +26,7 @@ This rule reports the elements which have `v-for` and do not have `v-bind:key` w
   <div v-for="todo in todos"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index 21ca812fc..ff9d75e89 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -14,6 +14,7 @@ description: enforce props default values to be valid
 This rule checks whether the default value of each prop is valid for the given type. It should report an error when default value for type `Array` or `Object` is not returned using function.
 
 <eslint-code-block :rules="{'vue/require-valid-default-prop': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -66,6 +67,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index e05eb57e7..6e156a70e 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -14,6 +14,7 @@ description: enforce that a return statement is present in computed property
 This rule enforces that a `return` statement is present in `computed` properties.
 
 <eslint-code-block :rules="{'vue/return-in-computed-property': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -40,6 +41,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -58,6 +60,7 @@ This rule has an object option:
 ### `treatUndefinedAsUnspecified: false`
 
 <eslint-code-block :rules="{'vue/return-in-computed-property': ['error', { treatUndefinedAsUnspecified: false }]}">
+
 ```vue
 <script>
 export default {
@@ -84,6 +87,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 450f4d725..59934faec 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -14,6 +14,7 @@ description: enforce consistent indentation in `<script>`
 This rule is similar to core [indent](https://eslint.org/docs/rules/indent) rule, but it has an option for inside of `<script>` tag.
 
 <eslint-code-block fix :rules="{'vue/script-indent': ['error']}">
+
 ```vue
 <script>
 let a = {
@@ -38,6 +39,7 @@ const d = {
       }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -81,6 +83,7 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
 
 ### `2, "baseIndent": 1`
 <eslint-code-block fix :rules="{'vue/script-indent': ['error', 2, { 'baseIndent': 1 }]}">
+
 ```vue
 <script>
   let a = {
@@ -105,6 +108,7 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
         }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :couple: Related rules
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index 560e0e167..92f5f90d4 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -16,6 +16,7 @@ This rule enforces a line break before and after the contents of a singleline el
 
 
 <eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -44,6 +45,7 @@ This rule enforces a line break before and after the contents of a singleline el
   <div attr><!-- comment --></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -69,6 +71,7 @@ This rule enforces a line break before and after the contents of a singleline el
 ### `"ignoreWhenNoAttributes": true`
 
 <eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': true}]}">
+
 ```vue
 <template>
   <!-- ✗ BAD -->
@@ -79,11 +82,13 @@ This rule enforces a line break before and after the contents of a singleline el
   <div attr><!-- comment --></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"ignoreWhenNoAttributes": false`
 
 <eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': false}]}">
+
 ```vue
 <template>
   <!-- ✗ BAD -->
@@ -94,6 +99,7 @@ This rule enforces a line break before and after the contents of a singleline el
   <div><!-- comment --></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index f3fb07328..fdf821b60 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -14,6 +14,7 @@ description: disallow usage of `this` in template
 This rule aims at preventing usage of `this` in Vue templates.
 
 <eslint-code-block :rules="{'vue/this-in-template': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -27,6 +28,7 @@ This rule aims at preventing usage of `this` in Vue templates.
   </a>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -42,6 +44,7 @@ This rule aims at preventing usage of `this` in Vue templates.
 ### `"always"`
 
 <eslint-code-block :rules="{'vue/this-in-template': ['error', 'always']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -55,6 +58,7 @@ This rule aims at preventing usage of `this` in Vue templates.
   </a>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index fc0c3303b..95be3bb0a 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -14,6 +14,7 @@ description: enforce usage of `exact` modifier on `v-on`
 This rule enforce usage of `exact` modifier on `v-on` when there is another `v-on` with modifier.
 
 <eslint-code-block :rules="{'vue/use-v-on-exact': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -24,6 +25,7 @@ This rule enforce usage of `exact` modifier on `v-on` when there is another `v-o
   <button v-on:click="foo" v-on:click.ctrl="foo"></button>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 788dc5677..515b9a254 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -15,6 +15,7 @@ description: enforce `v-bind` directive style
 This rule enforces `v-bind` directive style which you should use shorthand or long form.
 
 <eslint-code-block fix :rules="{'vue/v-bind-style': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -24,6 +25,7 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
   <div v-bind:foo="bar"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -41,6 +43,7 @@ Default is set to `shorthand`.
 ### `"longform"`
 
 <eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'longform']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -50,6 +53,7 @@ Default is set to `shorthand`.
   <div :foo="bar"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 6c7caf96e..bdb709481 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -15,6 +15,7 @@ description: enforce `v-on` directive style
 This rule enforces `v-on` directive style which you should use shorthand or long form.
 
 <eslint-code-block fix :rules="{'vue/v-on-style': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -24,6 +25,7 @@ This rule enforces `v-on` directive style which you should use shorthand or long
   <div v-on:click="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -41,6 +43,7 @@ Default is set to `shorthand`.
 ### `"longform"`
 
 <eslint-code-block fix :rules="{'vue/v-on-style': ['error', 'longform']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -50,6 +53,7 @@ Default is set to `shorthand`.
   <div @click="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 4878c8ea2..777a674d7 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -16,20 +16,25 @@ This rule checks whether every template root is valid.
 This rule reports the template root in the following cases:
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- There is no root element -->
 <template></template>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- The root is text -->
 <template>Lorem ipsum</template>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- There are multiple root elements -->
 <template>
@@ -37,24 +42,29 @@ This rule reports the template root in the following cases:
   <div>hello</div>
 </template>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- The root element has `v-for` directives -->
 <template>
   <div v-for="item in items"/>
 </template>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- The root element is `<template>` or `<slot>` -->
 <template>
   <slot />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index 8078cd7fd..30d096e42 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -21,6 +21,7 @@ This rule reports `v-bind` directives in the following cases:
 This rule does not report `v-bind` directives which do not have their argument (E.g. `<div v-bind="aaa"></div>`) because it's valid if the attribute value is an object.
 
 <eslint-code-block :rules="{'vue/valid-v-bind': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -35,6 +36,7 @@ This rule does not report `v-bind` directives which do not have their argument (
   <div v-bind:aaa.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 64aabba67..624140b0e 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -20,6 +20,7 @@ This rule reports `v-cloak` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-cloak="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-cloak': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-cloak` directives in the following cases:
   <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 dfe7d99de..c644929f8 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -22,6 +22,7 @@ This rule reports `v-else-if` directives in the following cases:
 - The directive is on the elements which have `v-if`/`v-else` directives. E.g. `<div v-if="foo" v-else-if="bar"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-else-if': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -34,6 +35,7 @@ This rule reports `v-else-if` directives in the following cases:
   <div v-else-if.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 7092b3225..c632ca1e0 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -22,6 +22,7 @@ This rule reports `v-else` directives in the following cases:
 - The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. `<div v-if="foo" v-else></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-else': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -34,6 +35,7 @@ This rule reports `v-else` directives in the following cases:
   <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 9d4a5c78f..619434ec5 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -24,6 +24,7 @@ This rule reports `v-for` directives in the following cases:
 If the element which has the directive is a reserved element, this rule does not report it even if the element does not have `v-bind:key` directive because it's not fatal error. [require-v-for-key] rule reports it.
 
 <eslint-code-block :rules="{'vue/valid-v-for': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -53,6 +54,7 @@ If the element which has the directive is a reserved element, this rule does not
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index 37125ab17..0de9a9cbf 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -20,6 +20,7 @@ This rule reports `v-html` directives in the following cases:
 - The directive does not have that attribute value. E.g. `<div v-html></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-html': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-html` directives in the following cases:
   <div v-html.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 023de85fd..0729ab708 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -21,6 +21,7 @@ This rule reports `v-if` directives in the following cases:
 - The directive is on the elements which have `v-else`/`v-else-if` directives. E.g. `<div v-else v-if="foo"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-if': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -42,6 +43,7 @@ This rule reports `v-if` directives in the following cases:
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 7d59a1588..0aa8a7531 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -24,6 +24,7 @@ This rule reports `v-model` directives in the following cases:
 - The directive's reference is iteration variables. E.g. `<div v-for="x in list"><input type="file" v-model="x"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-model': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -46,6 +47,7 @@ This rule reports `v-model` directives in the following cases:
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index e9eaa5a86..1c77664f8 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -20,6 +20,7 @@ This rule reports `v-on` directives in the following cases:
 - The directive does not have that attribute value and any verb modifiers. E.g. `<div v-on:click></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-on': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -37,6 +38,7 @@ This rule reports `v-on` directives in the following cases:
   <div @click/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
@@ -60,12 +62,14 @@ This rule has an object option:
 ### `"modifiers": ["foo"]`
 
 <eslint-code-block :rules="{'vue/valid-v-on': ['error', { modifiers: ['foo']}]}">
+
 ```vue
 <template>
   <div @click.foo="foo"/>
   <div v-on:click.foo="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :couple: Related rules
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index fbeeb09e4..db786fafa 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -20,6 +20,7 @@ This rule reports `v-once` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-once="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-once': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-once` directives in the following cases:
   <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 75a21c896..82c366f74 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -20,6 +20,7 @@ This rule reports `v-pre` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-pre="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-pre': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-pre` directives in the following cases:
   <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 fe4d09093..ce962c369 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -20,6 +20,7 @@ This rule reports `v-show` directives in the following cases:
 - The directive does not have that attribute value. E.g. `<div v-show></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-show': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-show` directives in the following cases:
   <div v-show.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index 759677c06..5c2d9901f 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -20,6 +20,7 @@ This rule reports `v-text` directives in the following cases:
 - The directive does not have that attribute value. E.g. `<div v-text></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-text': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-text` directives in the following cases:
   <div v-text.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/tools/update-docs.js b/tools/update-docs.js
index eecebec6e..78aac8c1f 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -117,6 +117,19 @@ class DocFile {
     return this
   }
 
+  adjustCodeBlocks () {
+    // Adjust the necessary blank lines before and after the code block so that GitHub can recognize `.md`.
+    this.content = this.content.replace(
+      /(<eslint-code-block([\s\S]*?)>)\n+```/gm,
+      '$1\n\n```'
+    )
+    this.content = this.content.replace(
+      /```\n+<\/eslint-code-block>/gm,
+      '```\n\n</eslint-code-block>'
+    )
+    return this
+  }
+
   updateFooter () {
     const { name } = this.rule
     const footerPattern = /## :mag: Implementation.+$/s
@@ -142,5 +155,6 @@ for (const rule of rules) {
     .updateFooter()
     .updateCodeBlocks()
     .updateFileIntro()
+    .adjustCodeBlocks()
     .write()
 }