{"meta":{"title":"Travailler avec des fichiers non basés sur du code","intro":"GitHub prend en charge le rendu et la différence dans un certain nombre de formats de fichiers autres que du code.","product":"Référentiels","breadcrumbs":[{"href":"/fr/repositories","title":"Référentiels"},{"href":"/fr/repositories/working-with-files","title":"Utiliser des fichiers"},{"href":"/fr/repositories/working-with-files/using-files","title":"Utilisation de fichiers"},{"href":"/fr/repositories/working-with-files/using-files/working-with-non-code-files","title":"Travailler avec des fichiers non basés sur du code"}],"documentType":"article"},"body":"# Travailler avec des fichiers non basés sur du code\n\nGitHub prend en charge le rendu et la différence dans un certain nombre de formats de fichiers autres que du code.\n\n## Rendu et comparaison d’images\n\nGitHub peut afficher plusieurs formats d’image courants, à savoir PNG, JPG, GIF, PSD et SVG. En plus de les afficher simplement, il existe plusieurs façons de comparer les différences entre les versions de ces formats d’image.\n\n> \\[!NOTE]\n>\n> * GitHub ne prend pas en charge la comparaison des différences entre les fichiers PSD.\n> * Si vous utilisez le navigateur Firefox, il se peut que les images SVG sur GitHub ne s’affichent pas.\n\n### Affichage d’images\n\nVous pouvez parcourir et afficher directement des images dans votre dépôt sur GitHub.\n\nLes SVG ne prennent actuellement pas en charge les scripts ou animations en ligne.\n\n### Affichage des différences\n\nVous pouvez comparer visuellement des images dans trois modes : [côte-à-côte](#2-up), [balayage](#swipe) et [peau d’oignon](#onion-skin).\n\n#### Côte-à-côte\n\n```\n **2-up** est le mode par défaut. Il donne un aperçu rapide des deux images. En outre, si l’image a changé de taille entre les versions, le changement de dimension réel s’affiche. Cela devrait montrer très clairement quand des éléments sont redimensionnés, par exemple, quand des composants sont mis à niveau vers des résolutions plus élevées.\n```\n\n\n\n#### Balayer\n\n```\n Le mode **Balayage** vous permet d’afficher des parties de votre image côte-à-côte. Vous ne savez pas si des couleurs ont changé entre les différentes versions ? Faites glisser le curseur de balayage sur la zone en question et comparez les pixels par vous-même.\n```\n\n\n\n#### Peau d’oignon\n\n```\n Le mode **Peau d’oignon** est vraiment pratique quand des éléments sont très légèrement déplacés, de manière presque imperceptible. Une icône est-elle décalée de deux pixels vers la gauche ? Faites glisser le curseur d’opacité un peu vers l’arrière, et observez si des éléments se déplacent.\n```\n\n## Visionneuse de fichier 3D\n\nGitHub peut héberger et afficher des fichiers 3D avec l’extension *.stl*.\n\nLorsque vous regardez directement un fichier STL sur GitHub vous pouvez :\n\n* Cliquer et faire glisser pour faire pivoter le modèle.\n* Cliquer avec le bouton droit et faire glisser pour déplacer l’affichage.\n* Faire défiler pour effectuer un zoom avant et arrière.\n* Cliquez sur les différents modes d’affichage pour changer d’affichage.\n\n### Correction de la lenteur des performances\n\nSi vous voyez dans un coin du visualiseur, avec l’info-bulle « Support matériel alimenté par WebGL non disponible », cela signifie que la technologie WebGL n’est pas disponible sur votre navigateur.\n\nWebGL est nécessaire pour tirer pleinement parti du matériel de votre ordinateur. Nous vous recommandons d’essayer des navigateurs tels que [Chrome](https://www.google.com/intl/en/chrome/browser/) ou [Firefox](https://www.mozilla.org/en-US/firefox/new/), qui sont fournis avec WebGL activé.\n\n### Erreur : « Affichage impossible »\n\nSi votre modèle n’est pas valide, GitHub peut ne pas être en mesure d’afficher le fichier. En outre, les fichiers dont la taille est supérieure à 10 Mo sont trop volumineux pour GitHub à afficher.\n\n### Incorporation de votre modèle ailleurs\n\nPour afficher votre fichier 3D ailleurs sur Internet, modifiez ce modèle et placez-le sur n’importe quelle page HTML prenant en charge JavaScript :\n\n```html\n\n```\n\nPar exemple, si l’URL de votre modèle est [`github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl`](https://github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl), votre code incorporé est :\n\n```html\n\n```\n\nPar défaut, le moteur de rendu incorporé affiche 420 pixels en largeur et 620 pixels en hauteur, mais vous pouvez personnaliser la sortie en passant des variables de hauteur et de largeur en tant que paramètres à la fin de l’URL, par exemple `?height=300&width=500`.\n\n> \\[!NOTE]\n\n```\n `ref` peut être une branche ou le hachage d’une validation individuelle (par exemple `2391ae`).\n```\n\n### Rendu avec Markdown\n\nVous pouvez incorporer la syntaxe STL ASCII directement dans Markdown. Pour plus d’informations, consultez « [Création de diagrammes](/fr/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-stl-3d-models) ».\n\n## Rendu de données CSV et TSV\n\nGitHub prend en charge le rendu de données tabulaires sous la forme de fichiers *.csv* (séparés par des virgules) et *.tsv* (séparés par des tabulations).\n\n\n\nQuand il est affiché, tout fichier *.csv* ou *.tsv* commité dans un dépôt sur GitHub s’affiche automatiquement comme une table interactive, complète avec des en-têtes et une numérotation des lignes. Par défaut, nous partons toujours du principe que la première ligne est celle de l’en-tête.\n\nVous pouvez lier à une ligne particulière en cliquant sur son numéro, ou sélectionner plusieurs lignes tout en maintenant la touche Maj enfoncée. Copiez simplement l’URL et envoyez-la à un ami.\n\n### Recherche de données\n\nSi vous souhaitez trouver une certaine valeur dans votre jeu de données, vous pouvez commencer à taper dans la barre de recherche directement au-dessus du fichier. Les lignes sont filtrées automatiquement.\n\n### Gestion des erreurs\n\nIl peut arriver que vous découvriez que votre fichier CSV ou TSV ne s’affiche pas. Dans ce cas, un message apparaît au-dessus de votre texte brut, qui vous suggère l’erreur dont il pourrait s’agir.\n\n\n\nLes erreurs courantes sont les suivantes :\n\n* Nombres de colonnes discordants. Vous devez avoir le même nombre de séparateurs dans chaque ligne, même si la cellule est vide\n* Dépassement de la taille du fichier. Notre rendu ne fonctionne que pour des fichiers d’une taille maximale de 512 Ko. Tout fichier d’une taille supérieure ralentit le navigateur.\n* Utilisation de délimiteurs non pris en charge, tels que des points-virgules au lieu de virgules.\n\n## Rendu de documents PDF\n\nGitHub prend en charge le rendu des documents PDF.\n\nActuellement, les liens au sein des fichiers PDF sont ignorés.\n\n## Documents en prose : présentation des différences\n\nLes validations et demandes de tirage qui incluent des documents en prose ont la possibilité de représenter ces documents avec des affichage *source* et *rendue*.\n\nL’affichage source montre le texte brut qui a été saisi, tandis que l’affichage rendu montre à quoi ce texte ressemblerait une fois rendu sur GitHub. Par exemple, il pourrait s’agir de la différence entre afficher `**bold**` dans Markdown et **bold** dans l’affichage rendu.\n\nLe rendu de prose est pris en charge pour les documents rendus que [github/markup](https://github.com/github/markup) prend en charge :\n\n* Markdown\n* AsciiDoc\n* Textile\n* ReStructuredText\n* Rdoc\n* Org\n* Créole\n* MediaWiki\n* Pod\n\nPour voir les modifications apportées au document dans le cadre d’un commit, cliquez sur .\n\n\n\nCe « diff enrichi » met en évidence le code qui a été ajouté et supprimé.\n\n\n\n### Désactivation de l’affichage de Markdown\n\nLors de l’affichage d’un fichier Markdown, vous pouvez cliquer sur **Code** en haut du fichier pour désactiver le rendu Markdown et afficher la source du fichier à la place.\n\n\n\nLa désactivation du rendu Markdown vous permet d’utiliser des fonctionnalités d’affichage source, telles que la liaison de lignes, ce qui n’est pas possible lors de l’affichage des fichiers Markdown rendus.\n\n### Visualisation de modifications d’attribut\n\nNous fournissons une info-bulle décrivant les modifications apportées aux attributs qui, contrairement aux mots, ne seraient pas visibles autrement dans le document affiché. Par exemple, si l'URL d'un lien change d'un site web à l'autre, nous afficherons une infobulle comme celle-ci : « href : /octo-org-repo/blob/CONTRIBUTING -> /octo-org/octo-repo/blob/docs/CONTRIBUTING. »\n\n\n\n### Commentaires sur les modifications\n\nDes [commentaires de validation](/fr/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request) ne peuvent être ajoutés qu’à des fichiers au sein de l’affichage *source*, ligne par ligne.\n\n### Liaison à des en-têtes\n\nComme avec d’[autres documents en prose affichés](/fr/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes), le positionnement du curseur sur un en-tête dans votre document a pour effet de créer une icône de lien. Vous pouvez lier des lecteurs de votre prose affichée à des sections spécifiques.\n\n### Affichage des différences complexes\n\nCertaines pull requests impliquent un grand nombre de modifications avec des documents volumineux et complexes. Quand l’analyse des modifications prend trop de temps, GitHub ne peut pas toujours produire un affichage des modifications. Dans ce cas, un message d’erreur s’affiche lorsque vous cliquez sur le bouton de rendu.\n\nVous pouvez toujours utiliser la vue source pour analyser et commenter les modifications.\n\n### Affichage d’éléments HTML\n\nNous ne prenons pas directement en charge les rendus de validations dans des documents HTML. Certains formats, tels que Markdown, vous permettent d’incorporer du code HTML arbitraire dans un document. Lorsque ces documents sont affichés sur GitHub, certains éléments de ce code HTML incorporé peuvent être affichés dans un aperçu, tandis que d’autres (comme une vidéo YouTube incorporée) ne le peuvent pas.\n\nEn général, les affichages de modifications apportées à un document contenant du code HTML incorporé montrent les modifications apportées aux éléments pris en charge dans l’affichage GitHub du document. Les modifications apportées à des documents contenant du code HTML incorporé doivent toujours être révisées dans les affichages rendus et sources par souci d’exhaustivité.\n\n## Cartographie de fichiers GeoJSON/TopoJSON sur GitHub\n\nGitHub prend en charge le rendu des fichiers de carte GeoJSON et TopoJSON au sein de dépôts GitHub. Validez le fichier comme vous le feriez normalement à l’aide d’une extension `.geojson` ou `.topojson`. Les fichiers avec une extension `.json` sont également pris en charge, mais uniquement si `type` est défini sur `FeatureCollection`, `GeometryCollection` ou `topology`. Accédez ensuite au chemin du fichier GeoJSON/TopoJSON sur GitHub.\n\n### Type de géométries\n\nLes cartes sur GitHub utilisent [Leaflet.js](http://leafletjs.com) et prennent en charge tous les types de géométries décrits dans la [spécification geoJSON](http://www.geojson.org/geojson-spec.html) (Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon et GeometryCollection). Les fichiers TopoJSON doivent être de type « Topologie » et respecter la [spécification TopoJSON](https://github.com/mbostock/topojson/wiki/Specification).\n\n### Incorporation de votre carte ailleurs\n\nVous voulez rendre votre carte GeoJSON disponible ailleurs que dans GitHub ? Modifiez simplement ce modèle et placez-le dans n’importe quelle page HTML prenant en charge Javascript (par exemple [GitHub Pages](https://pages.github.com)) :\n\n```html\n\n```\n\nPar exemple, si l’URL de votre carte est [github.com/benbalter/dc-wifi-social/blob/master/bars.geojson](https://github.com/benbalter/dc-wifi-social/blob/master/bars.geojson), votre code incorporé est le suivant :\n\n```html\n\n```\n\nPar défaut, la taille de la carte incorporée est de 420 x 620 pixels, mais vous pouvez personnaliser la sortie en passant des variables de hauteur et de largeur en tant que paramètres à la fin, comme `?height=300&width=500`.\n\n> \\[!NOTE]\n\n```\n `ref` peut être une branche ou le hachage d’une validation individuelle (par exemple `2391ae`).\n```\n\n### Cartographie dans Markdown\n\nVous pouvez incorporer des fichiers GeoJSON et TopoJSON directement dans Markdown. Pour plus d’informations, consultez « [Création de diagrammes](/fr/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-geojson-and-topojson-maps) ».\n\n### Regroupement\n\nSi votre carte contient un grand nombre de marqueurs (à peu près plus de 750), GitHub regroupe automatiquement les marqueurs à proximité à des niveaux de zoom supérieurs. Cliquez simplement ou effectuez un zoom avant sur le cluster pour afficher des marqueurs individuels.\n\n### Il y a un problème avec la carte sous-jacente\n\nLes données de la carte sous-jacente (noms de rue, routes, etc.) sont pilotées par [OpenStreetMap](http://www.openstreetmap.org/), un projet collaboratif visant à créer une carte du monde éditable gratuite. Si vous remarquez que quelque chose n'est pas tout à fait correct, car c'est open source, simplement [signez](https://www.openstreetmap.org/user/new) et envoyez un correctif.\n\n### Résolution des problèmes liés aux fichiers GeoJSON/TopoJSON\n\nSi vous rencontrez des problèmes de rendu de fichiers GeoJSON, vérifiez que le fichier dont vous disposez est valide en l’exécutant via un [linter GeoJSON](http://geojsonlint.com/). Si vos points n’apparaissent pas là où vous vous y attendez (par exemple, au milieu de l’océan), il est probable que les données se trouvent dans une projection qui n’est actuellement pas prise en charge. Actuellement, GitHub ne prend en charge que la `urn:ogc:def:crs:OGC:1.3:CRS84` projection.\n\nEn outre, si votre fichier `.geojson` est particulièrement volumineux (plus de 10 Mo), il n’est pas possible de l’afficher dans le navigateur. Si c’est le cas, vous verrez généralement un message indiquant que nous ne pouvons pas afficher les fichiers aussi volumineux.\n\nIl est peut-être encore possible d’afficher les données en convertissant le fichier `.geojson` en fichier [TopoJSON](https://github.com/mbostock/topojson), un format de compression qui, dans certains cas, peut réduire la taille d’une fichier de jusqu’à 80 %. Bien sûr, vous pouvez toujours morceler le fichier en blocs plus petits (par exemple, par état ou année), et de stocker les données sous forme de fichiers multiples dans le dépôt.\n\n### En savoir plus sur GeoJSON/TopoJSON\n\n* [Documentation Azure Maps](https://docs.microsoft.com/en-us/azure/azure-maps/)\n* [Wiki TopoJSON](https://github.com/mbostock/topojson/wiki)\n\n## Utilisation de fichiers Jupyter Notebook sur GitHub\n\nLorsque vous ajoutez des fichiers Jupyter Notebook ou IPython Notebook avec une extension *.ipynb* sur GitHub, ils s’affichent en tant que fichiers HTML statiques dans votre référentiel.\n\nLes fonctionnalités interactives du notebook, telles que les tracés JavaScript personnalisés, ne fonctionnent pas dans votre dépôt sur GitHub. Pour obtenir un exemple, consultez [*Liaison et Interactions.ipynb*](https://github.com/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb).\n\nPour afficher votre Jupyter Notebook avec du contenu JavaScript affiché, ou pour partager vos fichiers de notebook avec d’autres personnes, vous pouvez utiliser [nbviewer](https://nbviewer.jupyter.org/). Pour obtenir un exemple, consultez [*Liaison et Interactions.ipynb*](https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb) affichés sur nbviewer.\n\nPour afficher une version entièrement interactive de votre Jupyter Notebook, vous pouvez configurer un serveur de notebooks localement. Pour plus d’informations, consultez la [documentation officielle de Jupyter](http://jupyter.readthedocs.io/en/latest/index.html).\n\n### Résolution des problèmes liés aux fichiers Jupyter Notebook\n\nSi vous ne parvenez pas à afficher des fichiers Jupyter Notebook en HTML statique, vous pouvez convertir le fichier localement sur la ligne de commande à l'aide de la commande [`nbconvert`](https://github.com/jupyter/nbconvert) :\n\n```shell\njupyter nbconvert --to html NOTEBOOK-NAME.ipynb\n```\n\n### En savoir plus sur Jupyter Notebook\n\n* [Le dépôt GitHub de Jupyter Notebook](https://github.com/jupyter/jupyter_notebook)\n* [Galerie de notebooks Jupyter](https://github.com/jupyter/jupyter/wiki)\n\n## Affichage de fichiers Mermaid sur GitHub\n\nGitHub prend en charge le rendu de fichiers Mermaid dans des dépôts. Validez le fichier comme vous le feriez normalement à l’aide d’une extension `.mermaid` ou `.mmd`. Accédez ensuite au chemin du fichier Mermaid sur GitHub.\n\nPar exemple, si vous ajoutez un fichier `.mmd` avec le contenu suivant à votre dépôt :\n\n```text\ngraph TD\n A[Friend's Birthday] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[\"Cool Laptop\"]\n C -->|Two| E[iPhone]\n C -->|Three| F[fa:fa-car Car]\n```\n\nLorsque vous affichez le fichier dans le dépôt, il est rendu sous la forme d’un organigramme.\n\n\n\n### Résolution des problèmes liés aux fichiers Mermaid\n\nSi votre graphique ne s’affiche pas du tout, assurez-vous qu’il contient une syntaxe Markdown Mermaid valide en le vérifiant avec l’[éditeur en direct Mermaid](https://mermaid.live/edit).\n\nSi le graphique s’affiche, mais ne présente pas l’aspect prévu, vous pouvez créer une [discussion GitHub Community](https://github.com/orgs/community/discussions/categories/general) et ajouter l’étiquette `Mermaid`.\n\n#### Problèmes connus\n\n* Les diagrammes de séquence sont souvent rendus avec un espace supplémentaire sous le diagramme, avec davantage d'espace ajouté à mesure que la taille du diagramme augmente. Il s’agit d’un problème connu avec la bibliothèque Mermaid.\n* Les nœuds d’acteur avec des menus contextuels ne fonctionnent pas comme prévu à l’intérieur des diagrammes de séquence. Cela est dû à une différence dans la façon dont les événements JavaScript sont ajoutés à un graphique quand l’API de la bibliothèque Mermaid est utilisée pour afficher un graphique.\n* Les graphiques ne sont pas tous conformes à a11y. Cela peut affecter des utilisateurs qui dépendent d’un lecteur d’écran.\n\n### Mermaid dans Markdown\n\nVous pouvez incorporer de la syntaxe Mermaid directement dans Markdown. Pour plus d’informations, consultez « [Création de diagrammes](/fr/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-mermaid-diagrams) ».\n\n### En savoir plus sur Mermaid\n\n* [Documentation Mermaid.js](https://mermaid-js.github.io/mermaid/#/)\n* [Éditeur en direct Mermaid.js](https://mermaid.live/edit)"}