Comment créer une capture d’écran de code pour des diapositives ou des publications

Pour créer une capture d’écran de code, ouvrez le générateur de captures d’écran de code et collez votre code dans la fenêtre. Choisissez le langage dans « Langue » pour que les couleurs correspondent au code. Saisissez un nom dans « Nom du fichier » pour la barre de titre, puis cliquez sur « PNG ». L’image est créée dans votre navigateur.

Une capture d’écran de votre éditeur montre aussi les onglets, les menus et du texte de petite taille. Ici, vous obtenez uniquement la fenêtre avec votre code, affichée à une taille trois fois supérieure à l’écran. Le texte reste net sur une grande diapositive.

Comment créer l’image

1. Cliquez dans la fenêtre et collez votre code. Vous pouvez aussi saisir du texte. La touche Entrée conserve l’indentation de la ligne précédente.
2. Choisissez le langage dans « Langue ». JavaScript est sélectionné par défaut.
3. Choisissez un cadre dans « Style de fenêtre » : macOS, Windows ou Aucun. macOS est sélectionné par défaut.
4. Saisissez un nom de fichier, comme retry.py. Il s’affiche dans la barre de titre.
5. Cliquez sur « PNG » sous l’aperçu.

Générateur de captures d’écran de code avec la fonction Python retry dans l’éditeur, Python sélectionné comme langage et retry.py saisi comme nom de fichier

Le fichier est enregistré sous le nom snippet suivi d’un numéro, par exemple snippet-1792757286543.png. Cliquez sur « Insérer un exemple » pour voir d’abord un court exemple en JavaScript.

Langages disponibles

La liste « Langue » contient 25 options.

• Web : JavaScript, TypeScript, HTML et CSS.
• Programmation : Python, Java, Rust, C++, C, Go, PHP, SQL et Shell.
• Données et configuration : JSON, JSON5, XML, YAML, CSV, INI, TOON, Nginx et Prisma Schema.
• Texte : Markdown, LaTeX et texte brut.

Le langage définit uniquement les couleurs. Il n’est pas détecté à partir du code ou du nom de fichier : choisissez-le vous-même.

Comment modifier les couleurs

Les couleurs du code suivent le thème du site. Pour une image sombre, ouvrez le menu en haut de la page, cliquez sur le bouton du thème et choisissez « Thème sombre ». Pour une image blanche, choisissez « Thème clair ».

La barre de titre reste sombre dans les deux thèmes jusqu’à ce que vous modifiiez « Couleur de la barre de titre ». Le texte du titre devient blanc ou noir, selon la couleur la plus lisible. Lorsque « Style de fenêtre » est réglé sur Aucun, il n’y a pas de barre de titre et le champ de couleur est désactivé.

La police et la marge intérieure sont fixes. L’image ne contient pas de numéros de ligne.

Comment régler la largeur

La fenêtre s’adapte à la longueur de sa plus longue ligne. Faites glisser la petite poignée en pointillés en bas à droite pour la rétrécir ou l’élargir. Les longues lignes passent alors à la ligne suivante. La fenêtre mesure au moins 300 pixels de large et la poignée n’apparaît pas dans l’image.

Une ligne très longue peut faire sortir la fenêtre de l’aperçu. Cliquez sur le bouton « Réinitialiser » dans la barre au-dessus de l’aperçu pour l’ajuster à nouveau. Les boutons de zoom ne modifient que l’aperçu, pas l’image téléchargée.

Quel format choisir

• Le PNG conserve la transparence autour des coins arrondis, pour que l’image s’intègre à une diapositive de n’importe quelle couleur.
• Le JPG remplit ces petits coins de noir.
• « Imprimer » ouvre l’image dans une nouvelle fenêtre avec la boîte de dialogue d’impression.

Les deux formats sont trois fois plus grands que la fenêtre affichée à l’écran. Par exemple, une fenêtre de 752 pixels de large produit une image de 2256 pixels de large.

Collez le code, choisissez le langage et téléchargez le PNG pour votre diapositive.