Bilder rendern und Unterschiede erkennen
GitHub kann mehrere gängige Bildformate anzeigen, einschließlich PNG, JPG, GIF, PSD und SVG. Neben der einfachen Wiedergabe bestehen aber auch verschiedene Möglichkeiten, Differenzen zwischen Versionen dieser Bildformate zu vergleichen.
Hinweis
* GitHub unterstützt nicht den Vergleich der Unterschiede zwischen PSD-Dateien.
- Wenn Sie den Browser Firefox verwenden, werden SVGs auf GitHub möglicherweise nicht angezeigt.
Anzeigen von Bildern
Sie können Bilder direkt in Ihrem Repository durchsuchen und anzeigen auf GitHub.
SVGs unterstützen derzeit noch kein Inline-Scripting und keine Animation.
Unterschiede anzeigen
Du kannst Bilder in drei verschiedenen Modi visuell vergleichen: 2-up, swipe und onion skin.
2-up
2-up ist der Standardmodus. In diesem Modus erhältst du einen schnellen Überblick über beide Bilder. Falls sich die Bildgröße zwischen den beiden Versionen geändert hat, wird auch die tatsächliche Größenänderung angezeigt. Dadurch kannst du Größenänderungen eindeutig erkennen, beispielsweise, wenn Objekte mit höheren Auflösungen dargestellt werden.
Wischen
Mit Swipe kannst du Ausschnitte deines Bilds nebeneinander anzeigen. Du bist nicht sicher, ob sich die Farben zwischen den Versionen geändert hat? Ziehe den Wisch-Schieberegler über den fraglichen Bildbereich und vergleiche die Pixel manuell.
Onion Skin (Zwiebelhaut)
Onion Skin ist besonders dann hilfreich, wenn sich winzige Bildelemente kaum erkennbar geändert haben. Wurde ein Symbol um zwei Pixel nach links verschoben? Ziehe den Opazitäts-Schieberegler ein Stück zurück, und beobachte, ob sich die Bildelemente bewegen.
3D-Dateianzeige
GitHub kann 3D-Dateien mit der Erweiterung STL hosten und rendern.
Wenn Sie eine STL-Datei direkt auf GitHub anzeigen, können Sie Folgendes tun:
- Modell durch Anklicken und Ziehen drehen
- Mit der rechten Maustaste klicken und ziehen, um die Ansicht zu übersetzen.
- Ansicht durch Scrollen vergrößern und verkleinern
- Ansicht durch Anklicken der verschiedenen Ansichtsmodi ändern
Langsame Leistung beheben
Wenn Sie in der Ecke des Ansichtsfensters mit der QuickInfo „Hardwareunterstützung mit WebGL nicht verfügbar“ sehen, ist die WebGL-Technologie für Ihren Browser nicht verfügbar.
WebGL ist notwendig, um das Potenzial der Hardware deines Computers voll auszuschöpfen. Es wird empfohlen, Browser wie Chrome oder Firefox zu testen, bei denen WebGL aktiviert ist.
Fehler: „Unable to display“ (Anzeige nicht möglich)
Wenn Ihr Modell ungültig ist, kann GitHub die Datei möglicherweise nicht anzeigen. Darüber hinaus sind Dateien, die größer als 10 MB sind, zu groß, damit GitHub angezeigt werden können.
Einbetten deines Modells an anderer Stelle
Um deine 3D-Datei an anderer Stelle im Internet anzuzeigen, passe diese Vorlage an, und platziere sie auf einer beliebigen HTML-Seite mit JavaScript-Unterstützung:
<script src="https://embed.github.com/view/3d/<username>/<repo>/<ref>/<path_to_file>"></script>
Wenn beispielsweise die URL deines Modells github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl lautet, würde dein Einbettungscode wie folgt sein:
<script src="https://embed.github.com/view/3d/skalnik/secret-bear-clip/master/stl/clip.stl"></script>
Standardmäßig ist der eingebettete Renderer 420 Pixel breit und 620 Pixel hoch. Du kannst die Ausgabe jedoch anpassen, indem du Variablen für Höhe und Breite als Parameter am Ende der URL übergibst, z. B. ?height=300&width=500.
Hinweis
ref kann ein Branch oder der Hash zu einem einzelnen Commit (z. B. 2391ae) sein.
Rendern im Markdown
Du kannst ASCII STL-Syntax direkt in Markdown einbetten. Weitere Informationen finden Sie unter Erstellen von Diagrammen.
CSV- und TSV-Daten wiedergeben
GitHub unterstützt das Rendern von tabellarischen Daten in Form von .csv (kommagetrennt) und . tsv (tabtrennte) Dateien.
Wenn sie angezeigt wird, werden alle .csv - oder TSV-Dateien , die an ein Repository GitHub gebunden sind, automatisch als interaktive Tabelle gerendert, vollständig mit Kopfzeilen und Zeilennummerierung. Standardmäßig gehen wir immer davon aus, dass die erste Zeile Ihre Kopfzeile ist.
Du kannst durch Klicken auf die Zeilennummer eine bestimmte Zeile verknüpfen oder durch Drücken der Umschalttaste mehrere Zeilen auswählen. Kopiere einfach die URL, und sende sie einem anderen Benutzer.
Durchsuchen von Daten
Wenn du in deinem Datensatz einen bestimmten Wert suchst, gib den gesuchten Wert in die Suchleiste über der Datei ein. Die Zeilen werden automatisch gefiltert.
Behandlung von Fehlern
Gelegentlich wird Ihre CSV- oder TSV-Datei nicht gerendert. In diesem Fall wird über dem Rohtext eine Meldung mit einem Hinweis auf die Fehlerursache angezeigt.
Häufige Fehler sind z.B. folgende:
- Unterschiedliche Spaltenanzahlen. Jede Zeile muss die gleiche Anzahl an Trennzeichen enthalten, selbst wenn eine Zelle leer bleibt.
- Das Dateigrößenlimit wurde überschritten. Das Rendering funktioniert nur bei Dateien mit einer Größe von bis zu 512 KB. Alles, was größer ist als das, verlangsamt den Browser.
- Das Verwenden von nicht unterstützten Trennzeichen, z. B. Semikolons anstelle von Kommas.
PDF-Dokumente rendern
GitHub unterstützt das Rendern von PDF-Dokumenten.
Links innerhalb von PDF-Dokumenten werden derzeit noch ignoriert.
Unterschiede in Dokumenten mit Fließtext rendern
Commits und Pull Requests an Fließtextdokumenten unterstützen die Darstellung dieser Dokumente im Quell- und im gerenderten Format.
Die Quellansicht zeigt den eingegebenen Rohtext, während die gerenderte Ansicht zeigt, wie dieser Text aussieht, sobald er auf GitHub gerendert wird. Dies kann beispielsweise der Unterschied zwischen der Darstellung von **bold** in Markdown und fett in der gerenderten Ansicht sein.
Das Rendern von Fließtext wird für gerenderte Dokumente unterstützt, die von github/markup unterstützt werden:
- Markdown
- AsciiDoc
- Textil
- ReStructuredText
- Rdoc
- Organisation
- Kreolisch
- MediaWiki
- Pod
Um die am Dokument vorgenommenen Änderungen als Teil eines Commits anzuzeigen, klicken Sie auf .
In dieser Rich-Diff-Ansicht ist der Code hervorgehoben, der hinzugefügt und entfernt wurde.
Deaktivieren des Markdown-Renderings
Beim Anzeigen einer Markdowndatei kannst du oben in der Datei auf Code klicken, um das Rendering von Markdown zu deaktivieren und stattdessen den Quelltext der Datei anzuzeigen.
Durch das Deaktivieren des Markdownrenderings kannst du die Funktionen der Quellenansicht nutzen, wie z. B. Zeilenverknüpfungen, die beim Anzeigen von gerenderten Markdowndateien nicht verfügbar sind.
Attributänderungen visualisieren
Zu Attributänderungen, die im Gegensatz zu Worten im gerenderten Dokument nicht sichtbar werden, wird eine QuickInfo angezeigt. Wenn beispielsweise eine Link-URL von einer Website zu einer anderen geändert wird, wird ein Tooltip folgendermaßen angezeigt: „href: /octo-org-repo/blob/CONTRIBUTING -> /octo-org/octo-repo/blob/docs/CONTRIBUTING.“
Kommentare zu Änderungen
Commit-Kommentare können nur zu Dateien in der Quellansicht und nur zeilenweise hinzugefügt werden.
Verlinkung zu Kopfzeilen
Wie bei anderen gerenderten Fließtextdokumenten wird beim Zeigen auf eine Kopfzeile in deinem Dokument ein Linksymbol erstellt. Du kannst die Leser deines gerenderten Fließtexts über Links zu bestimmten Abschnitten leiten.
Komplexe Unterschiede anzeigen
Einige Pull Requests umfassen sehr viele Änderungen an großen und komplexen Dokumenten. Wenn die Analyse der Änderungen zu lange dauert, kann GitHub nicht immer eine gerenderte Ansicht der Änderungen erstellen. Wenn dies der Fall ist, wird beim Klicken auf die gerenderte Schaltfläche eine Fehlermeldung angezeigt.
Du kannst die Änderungen jedoch auch in der Quellansicht analysieren und kommentieren.
HTML-Elemente anzeigen
Wir unterstützen keine direkt gerenderten Ansichten von Commits in HTML-Dokumenten. In einigen Formaten wie Markdown kannst du beliebiges HTML in ein Dokument einbetten. Wenn diese Dokumente auf GitHub angezeigt werden, kann ein Teil dieses eingebetteten HTML-Inhalts in einer Vorschau angezeigt werden, während ein anderer Teil (z. B. ein eingebettetes YouTube-Video) nicht angezeigt werden kann.
Im Allgemeinen zeigen gerenderte Ansichten von Änderungen an einem Dokument mit eingebettetem HTML Änderungen an den Elementen, die von der Dokumentansicht in GitHub unterstützt werden. Aus Gründen der Vollständigkeit sollten Änderungen an Dokumenten, die eingebettete HTML enthalten, immer sowohl in der gerenderten als auch in der Quellansicht überprüft werden.
Zuordnen von GeoJSON/TopoJSON-Dateien auf GitHub
GitHub unterstützt das Rendern von GeoJSON- und TopoJSON-Kartendateien in GitHub Repositorys. Committe die Datei so, wie bei den Erweiterungen .geojson oder .topojson. Dateien mit der Erweiterung .json werden ebenfalls unterstützt, aber nur, wenn type auf FeatureCollection, GeometryCollection oder topology festgelegt ist. Navigieren Sie dann zum Pfad der GeoJSON/TopoJSON-Datei auf GitHub.
Geometrietypen
Karten auf GitHub verwenden Leaflet.js und unterstützen alle in der GeoJSON-Spezifikation beschriebenen Geometrietypen (Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon und GeometryCollection). TopoJSON-Dateien sollten vom Typ „Topologie“ sein und der TopoJSON-Spezifikation entsprechen.
Stilfunktionen
Du kannst anpassen, wie Features angezeigt werden – z. B. eine bestimmte Farbe festlegen oder ein beschreibendes Symbol hinzufügen –, indem du zusätzliche Metadaten in den Eigenschaften des GeoJSON-Objekts übergibst. Die Optionen sind:
marker-size
small,mediumoderlarge
marker-color: gültige RGB-Hex-Farbemarker-symbol: eine Symbol-ID aus dem Maki-Projekt oder ein einzelnes alphanumerisches Zeichen (a–z oder 0–9).stroke: Farbe eines Polygonrands oder einer Linie (RGB)stroke-opacity- Deckkraft einer Polygonkante oder Linie (0.0–1.0)stroke-width: Breite eines Polygonrands oder einer Liniefill: Farbe im Inneren eines Polygons (RGB)fill-opacity– Deckkraft im Inneren eines Polygons (0,0–1,0)
Weitere Informationen findest du unter Version 1.1.0 der Open-Simplestyle-Spezifikation.
Einbetten deiner Karte an anderer Stelle
Möchten Sie Ihre GeoJSON-Karte irgendwo anders als GitHub verfügbar machen? Ändern Sie diese Vorlage einfach, und platzieren Sie sie auf jeder HTML-Seite, die JavaScript unterstützt (z. B.): GitHub Pages
<script src="https://embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>"></script>
Wenn die URL deiner Karte z. B. github.com/benbalter/dc-wifi-social/blob/master/bars.geojson ist, lautet dein Einbettungscode:
<script src="https://embed.github.com/view/geojson/benbalter/dc-wifi-social/master/bars.geojson"></script>
Standardmäßig ist die eingebettete Karte 420 Pixel breit und 620 Pixel hoch. Du kannst die Ausgabe jedoch anpassen, indem du die Variablen für Höhe und Breite als Parameter am Ende übergibst, beispielsweise ?height=300&width=500.
Hinweis
ref kann ein Branch oder der Hash zu einem einzelnen Commit (z. B. 2391ae) sein.
Zuordnung in Markdown
Du kannst GeoJSON und TopoJSON direkt im Markdown einbetten. Weitere Informationen finden Sie unter Erstellen von Diagrammen.
Um interaktive Karten anzuzeigen, muss ein Website-Administrator die Funktion für Ihre GitHub Enterprise Server-Instance konfigurieren. Weitere Informationen finden Sie unter Konfigurieren interaktiver Karten.
Clustering
Wenn Ihre Karte eine große Anzahl von Markierungen (über ungefähr 750) enthält, werden von GitHub nahegelegene Markierungen bei höheren Zoomstufen automatisch gruppiert. Klicke einfach auf den Cluster oder zoome heran, um einzelne Markierungen zu sehen.
Mit der zugrunde liegenden Karte stimmt etwas nicht
Die zugrunde liegenden Kartendaten (Straßennamen, Wege usw.) stammen von OpenStreetMap, einem Gemeinschaftsprojekt zur Erstellung einer kostenlosen bearbeitbaren Karte der ganzen Welt. Wenn Sie feststellen, dass etwas nicht ganz richtig ist, da es Open Source ist, einfach sign up und übermitteln Sie einen Fix.
Problembehandlung bei GeoJSON/TopoJSON-Dateien
Wenn du Probleme beim Rendern von GeoJSON-Dateien hast, überprüfe, ob du eine gültige GeoJSON-Datei hast, indem du einen GeoJSON-Linter auf die Datei anwendest. Wenn Ihre Punkte an einer anderen Stelle angezeigt werden als erwartet (z. B. mitten im Meer), wurde auf die Daten wahrscheinlich eine Projektion angewandt, die derzeit nicht unterstützt wird.
GitHub Unterstützt derzeit nur die urn:ogc:def:crs:OGC:1.3:CRS84 Projektion.
Wenn deine .geojson-Datei besonders groß ist (über 10 MB), kann sie außerdem nicht im Browser gerendert werden. Wenn dies der Fall ist, wird in der Regel eine Meldung mit dem Hinweis angezeigt, dass so große Dateien nicht angezeigt werden können.
Es kann dennoch möglich sein, die Daten zu rendern, indem du die Datei .geojson in TopoJSON konvertierst, ein Komprimierungsformat, das in einigen Fällen die Dateigröße um bis zu 80 % reduzieren kann. Natürlich kannst du die Datei grundsätzlich in kleinere Abschnitte aufteilen (z. B. nach Land oder Jahr) und die Daten in Form von mehreren Dateien im Repository speichern.
Weitere Informationen zu GeoJSON/TopoJSON
Arbeiten mit Jupyter-Notebook-Dateien in GitHub
Wenn Sie Jupyter Notebook- oder IPython-Notizbuchdateien mit einer _IPYNB-Erweiterung_GitHubhinzufügen, werden sie als statische HTML-Dateien in Ihrem Repository gerendert.
Die interaktiven Features des Notizbuchs, z. B. benutzerdefinierte JavaScript-Plots, funktionieren in Ihrem Repository nicht.GitHub Ein Beispiel findest du unter Linking und „Interactions.ipynb“.
Du kannst nbviewer verwenden, um dein Jupyter Notebook mit gerendertem JavaScript-Inhalt anzuzeigen oder um deine Notebook-Dateien mit anderen zu teilen. Ein Beispiel finden Sie unter Linking and Interactions.ipynb, das auf nbviewer gerendert wurde.
Um eine vollständig interaktive Version Ihres Jupyter-Notebooks anzuzeigen, können Sie einen Notizbuch-Server lokal einrichten. Weitere Informationen findest du in der offiziellen Dokumentation zu Jupyter.
Problembehandlung von Jupyter-Notebook-Dateien
Wenn Sie Probleme beim Rendern Jupyter Notebook Dateien in statischem HTML haben, können Sie die Datei lokal in der Befehlszeile mithilfe des Befehls nbconvert konvertieren:
jupyter nbconvert --to html NOTEBOOK-NAME.ipynb
Weitere Informationen zu Jupyter Notebook
Mermaid-Dateien auf GitHub anzeigen
GitHub unterstützt das Rendern von Mermaid-Dateien in Repositorys. Committe die Datei so, wie bei den Erweiterungen .mermaid oder .mmd. Navigieren Sie dann zum Pfad der Mermaid-Datei auf GitHub.
Beispiel für das Hinzufügen einer .mmd-Datei mit dem folgenden Inhalt in deinem Repository:
graph TD
A[Friend's Birthday] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D["Cool <br> Laptop"]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
Wenn du die Datei im Repository anzeigst, wird sie als Flussdiagramm gerendert.
Problembehandlung bei Mermaid-Dateien
Wenn dein Diagramm überhaupt nicht gerendert wird, vergewissere dich, dass es gültige Mermaid-Markdown-Syntax enthält, indem du dein Diagramm mit dem Mermaid-Live-Editor überprüfst.
Wenn das Diagramm angezeigt wird, aber nicht wie erwartet angezeigt wird, können Sie eine neue GitHub Community Diskussion erstellen und die Mermaid Beschriftung hinzufügen.
Bekannte Probleme
- Sequenzdiagramme werden häufig mit zusätzlichem Abstand unterhalb des Diagramms gerendert, der mit zunehmender Diagrammgröße weiter zunimmt. Dies ist ein bekanntes Problem mit der Mermaid-Bibliothek.
- Akteurknoten mit Popupmenüs funktionieren innerhalb von Sequenzdiagrammen nicht wie erwartet. Dies liegt an einer Abweichung, wie JavaScript-Ereignisse einem Diagramm hinzugefügt werden, wenn die API der Mermaid-Bibliothek zum Rendern eines Diagramms verwendet wird.
- Nicht alle Diagramme sind a11y-konform. Dies kann sich auf Benutzer auswirken, die auf ein Bildschirmleseprogramm angewiesen sind.
Mermaid in Markdown
Du kannst Mermaid-Syntax direkt in Markdown einbetten. Weitere Informationen finden Sie unter Erstellen von Diagrammen.