Diffs & Focus

Highlight code changes, focus areas, and errors using inline comment annotations.

Diff notation

Mark lines as added or removed using // [!code ++] and // [!code --]:

```ts
function createUser(name: string) {
  const user = { name }       
  const user = { name, id: generateId() }  
  return user
}
```

Renders as:

function createUser(name: string) {
  const user = { name }       
  const user = { name, id: generateId() }  
  return user
}

Removed lines are highlighted in red, added lines in green.

Focus mode

Use // [!code focus] to dim all lines except the focused ones:

```ts
import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import mdx from '@astrojs/mdx'

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

Renders as:

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

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

Error highlighting

Mark lines with // [!code error] to highlight them as errors:

```ts
const port = process.env.PORT
app.listen(port) 
app.listen(Number(port)) 
```

Renders as:

const port = process.env.PORT
app.listen(port) 
app.listen(Number(port)) 

Combining annotations

You can use multiple annotation types in the same code block:

function connect(url: string) {
  const oldClient = createClient(url)    
  const newClient = createClient(url, {  
    retry: true,                         
    timeout: 5000,                       
  })                                     
  return newClient                       
}