> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/fr/creer-du-contenu/blocks/code-block.md).

# Blocs de code

Vous pouvez ajouter du code à vos pages GitBook à l’aide de blocs de code.

Lorsque vous ajoutez un bloc de code, vous pouvez choisir de [définir la syntaxe](#set-syntax...), [afficher les numéros de ligne](#with-line-numbers), [afficher une légende](#with-caption), et [retourner les lignes](#wrap-code). Il est aussi facile de [copier le contenu d’un bloc de code dans le presse-papiers](#copying-the-code), pour que vous puissiez l’utiliser ailleurs

Un bloc de code peut être utile pour :

* Partager des configurations
* Ajouter des extraits de code
* Partager des fichiers de code
* Afficher des exemples d’utilisation d’outils en ligne de commande
* Montrer comment appeler des points de terminaison d’API
* Et bien plus encore !

### Ajouter un bloc de code

1. Pour ajouter un bloc de code, placez votre curseur sur une ligne vide et saisissez `/`.
2. Dans le menu d’insertion rapide, sélectionnez **Bloc de code**.
3. GitBook insère le bloc et place votre curseur à l’intérieur, prêt à recevoir du code à coller ou à saisir.

### Exemple de bloc de code

{% code title="index.js" overflow="wrap" lineNumbers="true" %}

```javascript
‌import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, window.document.getElementById('root'));
```

{% endcode %}

Vous pouvez aussi combiner des blocs de code avec un [bloc d’onglets](/docs/documentation/fr/creer-du-contenu/blocks/tabs.md) pour proposer le même exemple de code dans plusieurs langues différentes :

{% tabs %}
{% tab title="JavaScript" %}

```javascript
let greeting = function (name) {
  console.log(`Hello, ${name}!`);
};
greeting("Anna");
```

{% endtab %}

{% tab title="Ruby" %}

```ruby
greeting = lambda {|name| puts "Hello, #{name}!"}
greeting.("Anna")
```

{% endtab %}

{% tab title="Elixir" %}

```elixir
greeting = fn name -> IO.puts("Hello, #{name}!") end
greeting.("Anna")
```

{% endtab %}
{% endtabs %}

### Options du bloc de code <a href="#options" id="options"></a>

Lorsque vous cliquez sur le **menu Options** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/a8fb7b2b9f8482b7286cc5fc535d675ecfc5a7d9" alt="The Options menu icon in GitBook"></picture> à côté du bloc de code, ou sur le **menu Actions** <picture><source srcset="/files/YjlF3Z9KMYv9aQiFzZKD" media="(prefers-color-scheme: dark)"><img src="/files/e908f759f6ce659d2a006882f5c4b45d5934010f" alt="The Actions menu icon in GitBook"></picture> dans le bloc lui-même, vous verrez un certain nombre d’options que vous pouvez définir.

#### Définir la syntaxe… <a href="#set-syntax" id="set-syntax"></a>

Vous pouvez définir la syntaxe de votre bloc de code sur n’importe laquelle des langues prises en charge. Cela activera également la coloration syntaxique dans cette langue.

{% hint style="info" %}
Nous utilisons [Prism](https://github.com/PrismJS/prism) pour la coloration syntaxique. Vous pouvez utiliser [Test Drive Prism](https://prismjs.com/test.html#language=markup) pour vérifier quelles langues Prism prend en charge. Si vous remarquez une différence entre GitBook et Prism, il est possible que nous ayons une ou deux versions de retard. Nous allons vite rattraper notre retard !
{% endhint %}

{% code title="filename.txt" %}

```
// Some code
```

{% endcode %}

#### Avec numéros de ligne <a href="#with-line-numbers" id="with-line-numbers"></a>

Cela activera ou désactivera les numéros de ligne pour votre code.

L’affichage des numéros de ligne est utile lorsque le code représente l’ensemble du contenu d’un fichier, ou lorsque vous avez de longs blocs de code avec beaucoup de lignes. Masquer les numéros de ligne est utile pour les extraits, les instructions d’utilisation pour la ligne de commande ou les expressions de terminal et des cas similaires.

#### Avec légende

Cela activera ou désactivera une légende placée en haut du bloc, au-dessus de vos lignes de code.

La légende est souvent le nom d’un fichier, comme dans [notre exemple ci-dessus](#example-of-a-code-block), mais vous pouvez aussi l’utiliser comme titre, description ou tout autre élément que vous souhaitez.

#### Retour à la ligne du code

Cela activera ou désactivera le retour à la ligne du code, afin que les lignes de code longues s’affichent toutes en même temps sur la page.

Le retour à la ligne est utile lorsque votre code est long et que vous voulez éviter que le lecteur doive faire défiler horizontalement pour le lire. Si vous activez **Retour à la ligne du code** cela, vous voudrez peut-être aussi afficher les numéros de ligne — cela facilitera la lecture du code et la compréhension de l’endroit où commencent les nouvelles lignes.

#### Dépliable

Cela activera l’affichage du code en entier (lorsque l’option est désactivée) ou d’une fenêtre réduite du code que l’utilisateur peut développer (lorsque l’option est activée).

L’affichage réduit montre par défaut 10 lignes de code avec un bouton pour développer et afficher le bloc de code complet. S’il y a moins de 10 lignes de code, tout le contenu sera affiché.

### Actions du bloc de code

En plus des options ci-dessus, vous pouvez aussi modifier la langue affichée par le bloc de code et copier votre code instantanément.

#### Copier le code <a href="#copying-the-code" id="copying-the-code"></a>

Survolez un bloc de code et un certain nombre d’icônes apparaîtront. Cliquez sur l’icône du milieu pour copier le contenu du bloc de code dans votre presse-papiers.

### Représentation en Markdown

````markdown
{% code title="index.js" overflow="wrap" lineNumbers="true" %}

```javascript
‌import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, window.document.getElementById('root'));
```

{% endcode %}
````


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://gitbook.com/docs/documentation/fr/creer-du-contenu/blocks/code-block.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
