Line Highlighting

Draw attention to specific lines or words in your code blocks using inline comments or meta range syntax.

Inline comment syntax

Add // [!code highlight] at the end of a line to highlight it:

```ts
function setup() {
  const config = loadConfig() 
  return config
}
```

Renders as:

function setup() {
  const config = loadConfig() 
  return config
}

Meta range syntax

Use {line numbers} in the code block meta to highlight specific lines:

```ts {1,3-4}
import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import mdx from '@astrojs/mdx'
import tailwind from '@astrojs/tailwindcss'

export default defineConfig({
  integrations: [react(), mdx(), tailwind()]
})
```

Renders as:

import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import mdx from '@astrojs/mdx'
import tailwind from '@astrojs/tailwindcss'

export default defineConfig({
  integrations: [react(), mdx(), tailwind()]
})

Range formats

Word highlighting

Highlight all occurrences of a specific word with // [!code word:name]:

```ts
const config = loadConfig()
validateConfig(config)
applyConfig(config)
```

Renders as:

const config = loadConfig()
validateConfig(config)
applyConfig(config)

The comment itself is hidden from the output, and every occurrence of the specified word is highlighted.