diff --git a/src/guide/a11y-basics.md b/src/guide/a11y-basics.md
index d7d83d8106..84e5b5c5c5 100644
--- a/src/guide/a11y-basics.md
+++ b/src/guide/a11y-basics.md
@@ -12,7 +12,7 @@ You should add a link at the top of each page that goes directly to the main con
 
 Typically this is done on the top of `App.vue` as it will be the first focusable element on all your pages:
 
-``` html
+```html
 <ul class="skip-links">
   <li>
     <a href="#main" ref="skipLink">Skip to main content</a>
@@ -22,7 +22,7 @@ Typically this is done on the top of `App.vue` as it will be the first focusable
 
 To hide the link unless it is focused, you can add the following style:
 
-``` css
+```css
 .skipLink {
   white-space: nowrap;
   margin: 1em auto;
@@ -42,7 +42,7 @@ To hide the link unless it is focused, you can add the following style:
 
 Once a user changes route, bring focus back to the skip link. This can be achieved by calling focus to the `ref` provided below:
 
-``` vue
+```vue
 <script>
 export default {
   watch: {
diff --git a/src/guide/component-edge-cases.md b/src/guide/component-edge-cases.md
index 718c6cad72..d68fa00f20 100644
--- a/src/guide/component-edge-cases.md
+++ b/src/guide/component-edge-cases.md
@@ -20,7 +20,7 @@ However, if you've ruled out the above and find yourself in this extremely rare
 
 Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
 
-``` js
+```js
 app.component('terms-of-service', {
   template: `
     <div v-once>
diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 8942647328..28820749b2 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -43,13 +43,13 @@ This [prevents conflicts](https://html.spec.whatwg.org/multipage/custom-elements
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('todo', {
   // ...
 })
 ```
 
-``` js
+```js
 export default {
   name: 'Todo',
   // ...
@@ -60,13 +60,13 @@ export default {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 app.component('todo-item', {
   // ...
 })
 ```
 
-``` js
+```js
 export default {
   name: 'TodoItem',
   // ...
@@ -90,7 +90,7 @@ Detailed [prop definitions](/guide/component-props.html#prop-validation) have tw
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 // This is only OK when prototyping
 props: ['status']
 ```
@@ -99,13 +99,13 @@ props: ['status']
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 props: {
   status: String
 }
 ```
 
-``` js
+```js
 // Even better!
 props: {
   status: {
@@ -134,7 +134,7 @@ props: {
 ::: details Detailed Explanation
 Let's say you have a list of todos:
 
-``` js
+```js
 data() {
   return {
     todos: [
@@ -161,7 +161,7 @@ In our experience, it's better to _always_ add a unique key, so that you and you
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <ul>
   <li v-for="todo in todos">
     {{ todo.text }}
@@ -173,7 +173,7 @@ In our experience, it's better to _always_ add a unique key, so that you and you
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="todo in todos"
@@ -198,7 +198,7 @@ There are two common cases where this can be tempting:
 ::: details Detailed Explanation
 When Vue processes directives, `v-if` has a higher priority than `v-for`, so that this template:
 
-``` html
+```html
 <ul>
   <li
     v-for="user in users"
@@ -214,7 +214,7 @@ Will throw an error, because the `v-if` directive will be evaluated first and th
 
 This could be fixed by iterating over a computed property instead, like this:
 
-``` js
+```js
 computed: {
   activeUsers() {
     return this.users.filter(user => user.isActive)
@@ -222,7 +222,7 @@ computed: {
 }
 ```
 
-``` html
+```html
 <ul>
   <li
     v-for="user in activeUsers"
@@ -250,7 +250,7 @@ Alternatively, we can use a `<template>` tag with `v-for` to wrap the `<li>` ele
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="user in users"
@@ -266,7 +266,7 @@ Alternatively, we can use a `<template>` tag with `v-for` to wrap the `<li>` ele
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="user in activeUsers"
@@ -307,7 +307,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <template>
   <button class="btn btn-close">×</button>
 </template>
@@ -323,7 +323,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <template>
   <button class="button button-close">×</button>
 </template>
@@ -341,7 +341,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
 </style>
 ```
 
-``` html
+```html
 <template>
   <button :class="[$style.button, $style.buttonClose]">×</button>
 </template>
@@ -359,7 +359,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
 </style>
 ```
 
-``` html
+```html
 <template>
   <button class="c-Button c-Button--close">×</button>
 </template>
@@ -393,7 +393,7 @@ Instead, we recommend combining the two prefixes into `$_`, as a convention for
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -404,7 +404,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -415,7 +415,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -426,7 +426,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -442,7 +442,7 @@ const myGreatMixin = {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -453,7 +453,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 // Even better!
 const myGreatMixin = {
   // ...
@@ -484,7 +484,7 @@ This helps you to more quickly find a component when you need to edit it or revi
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('TodoList', {
   // ...
 })
@@ -568,7 +568,7 @@ Some advantages of this convention:
 
 - Since these components are so frequently used, you may want to simply make them global instead of importing them everywhere. A prefix makes this possible with Webpack:
 
-  ``` js
+  ```js
   const requireComponent = require.context("./src", true, /Base[A-Z]\w+\.(vue|js)$/)
   requireComponent.keys().forEach(function (fileName) {
     let baseComponentConfig = requireComponent(fileName)
@@ -803,12 +803,12 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <!-- In single-file components, string templates, and JSX -->
 <MyComponent></MyComponent>
 ```
 
-``` html
+```html
 <!-- In DOM templates -->
 <my-component/>
 ```
@@ -817,12 +817,12 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <!-- In single-file components, string templates, and JSX -->
 <MyComponent/>
 ```
 
-``` html
+```html
 <!-- In DOM templates -->
 <my-component></my-component>
 ```
@@ -845,17 +845,17 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <!-- In single-file components and string templates -->
 <mycomponent/>
 ```
 
-``` html
+```html
 <!-- In single-file components and string templates -->
 <myComponent/>
 ```
 
-``` html
+```html
 <!-- In DOM templates -->
 <MyComponent></MyComponent>
 ```
@@ -864,19 +864,19 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <!-- In single-file components and string templates -->
 <MyComponent/>
 ```
 
-``` html
+```html
 <!-- In DOM templates -->
 <my-component></my-component>
 ```
 
 OR
 
-``` html
+```html
 <!-- Everywhere -->
 <my-component></my-component>
 ```
@@ -898,24 +898,24 @@ However, for applications that use **only** global component definitions via `ap
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('myComponent', {
   // ...
 })
 ```
 
-``` js
+```js
 import myComponent from './MyComponent.vue'
 ```
 
-``` js
+```js
 export default {
   name: 'myComponent',
   // ...
 }
 ```
 
-``` js
+```js
 export default {
   name: 'my-component',
   // ...
@@ -926,23 +926,23 @@ export default {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 app.component('MyComponent', {
   // ...
 })
 ```
 
-``` js
+```js
 app.component('my-component', {
   // ...
 })
 ```
 
-``` js
+```js
 import MyComponent from './MyComponent.vue'
 ```
 
-``` js
+```js
 export default {
   name: 'MyComponent',
   // ...
@@ -985,13 +985,13 @@ We're simply following the conventions of each language. Within JavaScript, came
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 props: {
   'greeting-text': String
 }
 ```
 
-``` html
+```html
 <WelcomeMessage greetingText="hi"/>
 ```
 </div>
@@ -999,13 +999,13 @@ props: {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 props: {
   greetingText: String
 }
 ```
 
-``` html
+```html
 <WelcomeMessage greeting-text="hi"/>
 ```
 </div>
@@ -1019,11 +1019,11 @@ In JavaScript, splitting objects with multiple properties over multiple lines is
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
 ```
 
-``` html
+```html
 <MyComponent foo="a" bar="b" baz="c"/>
 ```
 </div>
@@ -1031,14 +1031,14 @@ In JavaScript, splitting objects with multiple properties over multiple lines is
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <img
   src="https://vuejs.org/images/logo.png"
   alt="Vue Logo"
 >
 ```
 
-``` html
+```html
 <MyComponent
   foo="a"
   bar="b"
@@ -1056,7 +1056,7 @@ Complex expressions in your templates make them less declarative. We should stri
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 {{
   fullName.split(' ').map((word) => {
     return word[0].toUpperCase() + word.slice(1)
@@ -1068,12 +1068,12 @@ Complex expressions in your templates make them less declarative. We should stri
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <!-- In a template -->
 {{ normalizedFullName }}
 ```
 
-``` js
+```js
 // The complex expression has been moved to a computed property
 computed: {
   normalizedFullName() {
@@ -1110,7 +1110,7 @@ Simpler, well-named computed properties are:
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 computed: {
   price() {
     const basePrice = this.manufactureCost / (1 - this.profitMargin)
@@ -1126,7 +1126,7 @@ computed: {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 computed: {
   basePrice() {
     return this.manufactureCost / (1 - this.profitMargin)
@@ -1152,11 +1152,11 @@ While attribute values without any spaces are not required to have quotes in HTM
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <input type=text>
 ```
 
-``` html
+```html
 <AppSidebar :style={width:sidebarWidth+'px'}>
 ```
 </div>
@@ -1164,11 +1164,11 @@ While attribute values without any spaces are not required to have quotes in HTM
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <input type="text">
 ```
 
-``` html
+```html
 <AppSidebar :style="{ width: sidebarWidth + 'px' }">
 ```
 </div>
@@ -1180,21 +1180,21 @@ While attribute values without any spaces are not required to have quotes in HTM
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <input
   v-bind:value="newTodoText"
   :placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   v-on:input="onInput"
   @focus="onFocus"
 >
 ```
 
-``` html
+```html
 <template v-slot:header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1208,35 +1208,35 @@ While attribute values without any spaces are not required to have quotes in HTM
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <input
   :value="newTodoText"
   :placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   v-bind:value="newTodoText"
   v-bind:placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   @input="onInput"
   @focus="onFocus"
 >
 ```
 
-``` html
+```html
 <input
   v-on:input="onInput"
   v-on:focus="onFocus"
 >
 ```
 
-``` html
+```html
 <template v-slot:header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1246,7 +1246,7 @@ While attribute values without any spaces are not required to have quotes in HTM
 </template>
 ```
 
-``` html
+```html
 <template #header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1367,7 +1367,7 @@ When components begin to feel cramped or difficult to read, adding spaces betwee
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 props: {
   value: {
     type: String,
@@ -1394,7 +1394,7 @@ computed: {
 }
 ```
 
-``` js
+```js
 // No spaces are also fine, as long as the component
 // is still easy to read and navigate.
 props: {
@@ -1427,13 +1427,13 @@ computed: {
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <style>/* ... */</style>
 <script>/* ... */</script>
 <template>...</template>
 ```
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <script>/* ... */</script>
 <template>...</template>
@@ -1449,7 +1449,7 @@ computed: {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <script>/* ... */</script>
 <template>...</template>
@@ -1461,7 +1461,7 @@ computed: {
 <style>/* ... */</style>
 ```
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <template>...</template>
 <script>/* ... */</script>
@@ -1491,7 +1491,7 @@ The problem is that large numbers of [element-attribute selectors](http://steves
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <template>
   <button>×</button>
 </template>
@@ -1507,7 +1507,7 @@ button {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <template>
   <button class="btn btn-close">×</button>
 </template>
@@ -1531,7 +1531,7 @@ The problem is, there are also many _simple_ cases where these patterns may offe
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1544,7 +1544,7 @@ app.component('TodoItem', {
 })
 ```
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1574,7 +1574,7 @@ app.component('TodoItem', {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1594,7 +1594,7 @@ app.component('TodoItem', {
 })
 ```
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1628,7 +1628,7 @@ Vuex is the [official flux-like implementation](/guide/state-management.html#off
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 // main.js
 import { createApp } from 'vue'
 import mitt from 'mitt'
@@ -1657,7 +1657,7 @@ const app = createApp({
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 // store/modules/todos.js
 export default {
   state: {
@@ -1678,7 +1678,7 @@ export default {
 }
 ```
 
-``` html
+```html
 <!-- TodoItem.vue -->
 <template>
   <span>