Blocs de code

Ajoutez un bloc de code à une page pour inclure des exemples de code, des configurations, des extraits et plus

Vous pouvez ajouter du code à vos pages GitBook en utilisant des blocs de code.

Lorsque vous ajoutez un bloc de code, vous pouvez choisir de définir la syntaxe, afficher les numéros de ligne, afficher une légende, et renvoyer les lignes (retour à la ligne). Il est aussi facile de copier le contenu d'un bloc de code dans le presse-papiers, afin de pouvoir l'utiliser ailleurs

Un bloc de code peut être utile pour :

• Partager des configurations

• Ajouter des extraits de code

• Partager des fichiers de code

• Montrer des exemples d'utilisation d'utilitaires en ligne de commande

• Montrer comment appeler des points de terminaison d'API

• Et bien plus encore !

Exemple d'un bloc de code

index.js

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

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

Vous pouvez également combiner des blocs de code avec un bloc d'onglets pour proposer le même exemple de code dans plusieurs langues différentes :

JavaScript

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

Ruby

Elixir

Vous pouvez rendre les blocs de code occupant toute la largeur de votre fenêtre en cliquant sur le menu Options à côté du bloc et en choisissant Pleine largeur.

Options du bloc de code

Lorsque vous cliquez sur le menu Options à côté du bloc de code, ou sur le menu Actions dans le bloc lui-même, vous verrez un certain nombre d'options que vous pouvez définir.

Définir la syntaxe…

Vous pouvez définir la syntaxe dans votre bloc de code pour n'importe lequel des langages pris en charge. Cela activera également la coloration syntaxique pour ce langage.

Nous utilisons Prism pour la coloration syntaxique. Vous pouvez utiliser Test Drive Prism pour vérifier quels langages Prism prend en charge. Si vous remarquez une discordance entre GitBook et Prism, il se peut que nous soyons une ou deux versions en retard. Nous nous mettrons à jour bientôt !

filename.txt

// Du code

Avec numéros de ligne

Cela activera ou désactivera l'affichage des numéros de ligne pour votre code.

Afficher les numéros de ligne est utile lorsque le code représente le contenu d'un fichier dans son ensemble, ou lorsque vous avez de longs blocs de code avec de nombreuses lignes. Masquer les numéros de ligne est utile pour des extraits, des instructions d'utilisation pour des expressions en ligne de commande ou terminal et des scénarios similaires.

Avec légende

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

La légende est souvent le nom d'un fichier comme montré dans notre exemple ci-dessus, 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 renvoi à la ligne du code, de sorte que les longues lignes de code seront renvoyées pour être toutes visibles sur la page en même temps.

Le renvoi des lignes est utile lorsque votre code est long et que vous souhaitez éviter que le lecteur fasse défiler d'avant en arrière pour le lire. Si vous activez Retour à la ligne du code , vous voudrez peut-être aussi afficher les numéros de ligne — cela facilitera la lecture du code et la compréhension du début des nouvelles lignes.

Extensible

Cela activera ou désactivera l'affichage du code en entier (lorsque le commutateur est désactivé) ou d'une fenêtre de code réduite que l'utilisateur peut développer (lorsque le commutateur est activé).

La vue réduite affiche 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 sur le bloc de code

En plus des options ci‑dessus, vous pouvez également changer le langage affiché par le bloc de code et copier votre code instantanément.

Copier le code

Survolez un bloc de code et plusieurs 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

{% 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 %}