diff --git a/src/api/global-api.md b/src/api/global-api.md
index 7a6c7ed681..b5b7582fc6 100644
--- a/src/api/global-api.md
+++ b/src/api/global-api.md
@@ -403,7 +403,7 @@ For example, for runtime-dom, HostNode would be the DOM
 
 Custom renderers can pass in the platform specific types like this:
 
-```js
+```ts
 import { createRenderer } from 'vue'
 const { render, createApp } = createRenderer<Node, Element>({
   patchProp,
diff --git a/src/api/refs-api.md b/src/api/refs-api.md
index 766e7550fd..b87fd8f215 100644
--- a/src/api/refs-api.md
+++ b/src/api/refs-api.md
@@ -38,7 +38,7 @@ foo.value = 123 // ok!
 
 If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`:
 
-```js
+```ts
 function useState<State extends string>(initial: State) {
   const state = ref(initial) as Ref<State> // state.value -> State extends string
   return state
@@ -49,7 +49,7 @@ function useState<State extends string>(initial: State) {
 
 Returns the inner value if the argument is a [`ref`](#ref), otherwise return the argument itself. This is a sugar function for `val = isRef(val) ? val.value : val`.
 
-```js
+```ts
 function useFoo(x: number | Ref<number>) {
   const unwrapped = unref(x) // unwrapped is guaranteed to be number now
 }
diff --git a/src/cookbook/debugging-in-vscode.md b/src/cookbook/debugging-in-vscode.md
index 8327d72165..842656e699 100644
--- a/src/cookbook/debugging-in-vscode.md
+++ b/src/cookbook/debugging-in-vscode.md
@@ -102,7 +102,7 @@ Please note that if the page uses a production/minified build of Vue.js (such as
 
 The example above has a great workflow. However, there is an alternative option where you can use the [native debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directly in your code. If you choose to work this way, it's important that you remember to remove the statements when you're done.
 
-```js
+```vue
 <script>
 export default {
   data() {
diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md
index d2f9989c2a..876195dcde 100644
--- a/src/guide/migration/functional-components.md
+++ b/src/guide/migration/functional-components.md
@@ -44,8 +44,8 @@ export default {
 
 Or, for those who preferred the `<template>` in a single-file component:
 
-```js
-// Vue 2 Functional Component Example with <template>
+```vue
+<!-- Vue 2 Functional Component Example with <template> -->
 <template functional>
   <component
     :is="`h${props.level}`"
@@ -91,7 +91,7 @@ In 3.x, the performance difference between stateful and functional components ha
 
 Using our `<dynamic-heading>` example from before, here is how it would look now.
 
-```js{1,3,4}
+```vue{1,3,4}
 <template>
   <component
     v-bind:is="`h${$props.level}`"
diff --git a/src/guide/migration/inline-template-attribute.md b/src/guide/migration/inline-template-attribute.md
index 1ae9810315..faa79067e4 100644
--- a/src/guide/migration/inline-template-attribute.md
+++ b/src/guide/migration/inline-template-attribute.md
@@ -34,7 +34,7 @@ Most of the use cases for `inline-template` assumes a no-build-tool setup, where
 
 The most straightforward workaround in such cases is using `<script>` with an alternative type:
 
-```js
+```html
 <script type="text/html" id="my-comp-template">
   <div>{{ hello }}</div>
 </script>