Capture de code en image
Code Screenshot
Rend un extrait de code en image avec coloration syntaxique, cadre de fenêtre et thème au choix.
Transforme un extrait de code en un PNG que vous pouvez mettre dans une diapositive, un ticket ou un billet — coloration syntaxique, cadre de fenêtre, à l'échelle d'export de votre choix. Il est dessiné sur un canvas ici ; rien n'est envoyé et aucun coloriseur externe n'est chargé.
Code
Aperçu
Ce que fait cet outil
- · La coloration syntaxique vient des analyseurs lexicaux qu’utilisent les formateurs de ce site (JavaScript, TypeScript, CSS, HTML, SQL), plus quelques petits écrits ici (JSON, Python, Go, Rust, Shell). Aucun coloriseur externe n’est chargé.
- · Le texte est dessiné directement sur un canvas avec la police à chasse fixe de votre appareil. Le coréen bascule sur une police coréenne du système, il s’affiche donc comme du texte et non comme des carrés, et le coréen et les émojis comptent pour deux cellules à la coupure. Les polices diffèrent d’un appareil à l’autre, le même code n’a donc pas tout à fait le même rendu partout.
- · Les PNG sont produits en 1×, 2× et 3×, et rien n’est envoyé nulle part.
Pour alléger le PNG, utilisez la compression PNG ; pour le poser dans un cadre d’appareil, utilisez la maquette d’appareil.
Comment s’en servir
Collez le code
Le langage est détecté, et vous pouvez le forcer. La coloration emploie les mêmes analyseurs lexicaux que les formateurs de ce site pour JS, TS, CSS, HTML et SQL, plus de petits analyseurs pour JSON, Python, Go, Rust et Shell.
Réglez le cadre
Thème, taille de police, marge intérieure, titre de fenêtre, feux tricolores ou non, numéros de ligne, ombre portée. L'aperçu est l'export à 1×.
Choisissez une largeur de coupure pour les longues lignes
Les caractères CJK et les emojis comptent pour deux cellules au moment de la coupure, comme les compte un terminal : une ligne à écritures mêlées se coupe donc là où elle en a l'air.
Exportez en 2× partout où l'image sera redimensionnée
1× pour un blog à largeur fixe, 2× pour des diapositives et des écrans retina, 3× quand on zoomera dessus. Ou copiez l'image directement dans le presse-papiers.
Questions fréquentes
Pourquoi le rendu diffère-t-il sur mon autre ordinateur ?
Parce que le texte est dessiné avec la police à chasse fixe que possède cet appareil, et que deux machines n'ont jamais tout à fait la même. Les emojis et les caractères CJK en particulier se rabattent sur la police système qui se trouve installée. La contrepartie, c'est que rien n'est téléchargé et que le rendu est instantané.
Puis-je l'obtenir en SVG ?
Non, PNG seulement. Un SVG aurait besoin de la police embarquée pour avoir le même aspect partout, et embarquer une police couvrant les emojis ou le CJK, ce sont des mégaoctets. Un PNG en 2× est plus petit et se rend à l'identique partout.
Faut-il vraiment publier une capture d'écran de code ?
Pour une diapositive ou un billet sur un réseau social, oui. Pour un rapport de bug ou une pull request, collez le texte — une image ne peut être ni cherchée, ni copiée, ni comparée, ni lue par un lecteur d'écran. Cet outil est fait pour le premier cas.
À alimenter depuis
Formater ou minifier du JavaScript
JavaScript Beautifier & Minifier
Retire commentaires et espaces d’un JavaScript ou d’un TypeScript sans rien renommer, et réindente un bundle minifié pour qu’il redevienne lisible.
Générateur de tableau ASCII
ASCII Table Generator
Rend un tableau en ASCII à chasse fixe, en Markdown ou avec des bordures en caractères semi-graphiques, pour un README ou un commentaire.
Texte en art ASCII
ASCII Text Art
Écrit un texte en grandes lettres ASCII avec un vrai moteur de rendu FIGfont, deux polices fournies et un emplacement pour votre propre .flf.
Éditeur de schémas ASCII
ASCII Diagram Editor
Dessine boîtes, traits, flèches et étiquettes sur une grille de caractères, en déduisant chaque coin et chaque jonction des voisins occupés, en caractères de filet Unicode ou en ASCII pur.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Générateur de tableau ASCII
ASCII Table Generator
Rend un tableau en ASCII à chasse fixe, en Markdown ou avec des bordures en caractères semi-graphiques, pour un README ou un commentaire.
Mise en situation sur appareil
Device Mockup
Place une capture d’écran dans un cadre de téléphone, de tablette, d’ordinateur portable ou de navigateur, avec fond et ombre.
Formater ou minifier du JavaScript
JavaScript Beautifier & Minifier
Retire commentaires et espaces d’un JavaScript ou d’un TypeScript sans rien renommer, et réindente un bundle minifié pour qu’il redevienne lisible.
Compresseur PNG
PNG Compressor
Quantifie la palette et réécrit le flux deflate pour alléger un PNG sans toucher à ses dimensions, sans envoi de fichier, tout dans votre navigateur.
Encodeur et décodeur Base64
Base64 Encoder & Decoder
Encode et décode en Base64 et en Base64URL, pour du texte comme pour des fichiers, avec un traitement correct de l’UTF-8.
Conversion JSON ⇄ CSV
JSON ⇄ CSV
Aplatit du JSON imbriqué en colonnes ou reconstruit des objets depuis un tableau, avec un nommage des colonnes par chemin pointé.