Blocs de code

Ajoutez un bloc de code à une page pour inclure du code d’exemple, des configurations, des extraits de code et plus encore

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, afficher les numéros de ligne, afficher une légende, et retourner les lignes. C’est aussi facile de copier le contenu d’un bloc de code dans le presse-papiers, pour 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 !

Ajouter un bloc de code

1. Pour ajouter un bloc de code, placez votre curseur sur une ligne vide et tapez /.
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 à ce que vous colliez ou tapiez du code.

Exemple de 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 les 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

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

Elixir

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

Options du bloc de code

Lorsque vous cliquez sur le menu d’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 de votre bloc de code sur n’importe laquelle des langues prises en charge. Cela activera également la coloration syntaxique dans cette langue.

Nous utilisons Prism pour la coloration syntaxique. Vous pouvez utiliser Test Drive Prism 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 serons bientôt à jour !

filename.txt

// Du code

Avec numéros de ligne

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

Afficher les numéros de ligne est utile lorsque le code représente l’intégralité du contenu d’un fichier, ou lorsque vous avez de longs blocs de code avec de nombreuses lignes. Masquer les numéros de ligne est utile pour les extraits, les instructions d’utilisation pour des lignes de commande ou des expressions de terminal et des scénarios 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, mais vous pouvez aussi l’utiliser comme titre, description, ou pour tout autre usage.

Renvoyer le code à la ligne

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

Le retour à la ligne est utile lorsque votre code est long et que vous souhaitez éviter que le lecteur fasse défiler horizontalement pour le lire. Si vous activez Renvoyer le code à la ligne 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 ou désactivera l’affichage du code en entier (lorsque l’option est désactivée) ou dans une fenêtre réduite que l’utilisateur peut développer (lorsque l’option est activée).

La vue réduite affiche par défaut 10 lignes de code avec un bouton permettant de développer et d’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 également modifier la langue affichée 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 %}