Diffs et focus

Mettez en avant les modifications de code, les zones de focus et les erreurs en utilisant des annotations sous forme de commentaires en ligne.

Notation diff

Marquez les lignes comme ajoutées ou supprimées en utilisant // [!code ++] et // [!code --] :

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

Rendu :

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

Les lignes supprimées sont surlignées en rouge, les lignes ajoutées en vert.

Mode focus

Utilisez // [!code focus] pour atténuer toutes les lignes sauf celles mises en focus :

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

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

Rendu :

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

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

Surlignage d’erreurs

Marquez les lignes avec // [!code error] pour les surligner comme erreurs :

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

Rendu :

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

Combiner les annotations

Vous pouvez utiliser plusieurs types d’annotations dans le même bloc de code :

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