Skip to main content

Working with non-code files (Arbeiten mit anderen Dateien als Codedateien)

GitHub AE unterstützt das Rendern und Vergleichen in einer Reihe von Nicht-Code-Dateiformaten.

Bilder rendern und vergleichen

GitHub AE kann verschiedene gängige Bildformate wie PNG, JPG, GIF, PSD und SVG darstellen. 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.
  • Bei Verwendung des Firefox-Browsers werden SVGs auf GitHub unter Umständen nicht gerendert.

Anzeigen von Images

Du kannst Bilder in deinem Repository direkt auf GitHub AE anzeigen:

Inline-Bild

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.

2-up

Swipe

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.

Swipe

Onion Skin (Zwiebelhaut)

Der Modus 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.

Onion Skin (Zwiebelhaut)

3D-Dateianzeige

GitHub AE kann 3D-Dateien mit der Erweiterung .stl hosten und rendern.

Wenn du eine STL-Datei direkt auf GitHub AE betrachtest, kannst du Folgendes tun:

  • Modell durch Anklicken und Ziehen drehen
  • Ansicht durch Rechtsklick und Ziehen verschieben
  • Ansicht durch Scrollen vergrößern und verkleinern
  • Ansicht durch Anklicken der verschiedenen Ansichtsmodi ändern

Diffs

Wenn du dir einen Commit oder einen Satz von Änderungen ansiehst, der eine STL-Datei enthält, kannst du die Vorher- und Nachher-Diff der Datei ansehen.

Standardmäßig erhältst du eine Ansicht, in der alles Unveränderte in einem Drahtgittermodell angezeigt wird. Ergänzungen sind grün und entfernte Teile rot markiert.

Drahtgittermodell

Du kannst auch die Option Revisionsschieberegler auswählen, über den du mit einem Schieberegler am oberen Rand der Datei zwischen der aktuellen und der vorherigen Revision wechseln kannst.

Langsame Leistung beheben

Wenn du dieses Symbol in der Ecke der Anzeige siehst, ist die WebGL-Technologie in deinem Browser nicht verfügbar:

WebGL-Pop-Fehler

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 dein Modell ungültig ist, kann GitHub die Datei möglicherweise nicht anzeigen. Darüber hinaus sind Dateien mit mehr als 10 MB für die Anzeige durch GitHub zu groß.

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.

CSV- und TSV-Daten wiedergeben

GitHub unterstützt das Rendern von Tabellendaten in den Formaten CSV (kommagetrennt) und TSV (tabulatorgetrennt).

Beispiel für eine gerenderte CSV-Datei

Bei der Anzeige werden CSV- oder TSV-Dateien, die in einem Repository auf GitHub AE committet werden, automatisch als interaktive Tabelle mit Kopfzeilen und Zeilennummerierung gerendert. Standardmäßig wird davon ausgegangen, dass die erste Zeile die Kopfzeile mit den Spaltenüberschriften 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 einfach den Anfang des gesuchten Werts in die Suchleiste über der Datei ein. Die Zeilen werden automatisch gefiltert:

Suche nach Werten

Behandlung von Fehlern

Gelegentlich wird eine CSV- oder TSV-Datei nicht korrekt dargestellt. In diesem Fall wird unter dem Rohtext eine Fehlermeldung mit einem Hinweis auf die Fehlerursache angezeigt.

Fehlermeldung beim Rendern einer CSV-Datei

Häufige Fehler sind z.B. folgende:

  • Die Zeilen enthalten nicht die gleiche Anzahl an Spalten. 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. Das Rendering größerer Dateien würde den Browser verlangsamen.

PDF-Dokumente rendern

GitHub unterstützt das Rendering von PDF-Dokumenten.

Gerendertes PDF-Dokument

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.

In der Quellansicht wird der eingegebene Rohtext angezeigt. In der gerenderten Ansicht wird der Text dagegen so angezeigt, wie er gerendert auf GitHub AE aussehen würde. 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
  • Textile
  • ReStructured Text
  • Rdoc
  • Organisation
  • Creole
  • MediaWiki
  • Pod

Papiersymbol zum Anzeigen gerenderter Dokumente mit Fließtext

Zum Anzeigen der im Zuge eines Commits vorgenommenen Änderungen an einem Dokument klicke auf das Symbol .

Änderungen an gerendertem Fließtext

Deaktivieren des Markdown-Renderings

Wenn du eine Markdowndatei anzeigst, kannst du oben in der Datei auf klicken, um das Rendern von Markdown zu deaktivieren und stattdessen den Quelltext der Datei anzuzeigen.

Anzeigen von Markdown als Quelle

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. Beispielsweise wird bei der Änderung einer Link-URL von einer Website zu einer anderen eine QuickInfo wie diese angezeigt:

Attributänderungen an gerendertem Fließtext

Kommentare zu Änderungen

Commitkommentare können nur Dateien in der Quellansicht und nur zeilenweise hinzugefügt werden.

Zu Headern verknüpfen

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 AE nicht immer eine gerenderte Ansicht der Änderungen generieren. Wenn dies der Fall ist, wird beim Klicken auf die gerenderte Schaltfläche eine Fehlermeldung angezeigt.

Meldung, wenn die Ansicht nicht gerendert werden kann

Du kannst die Änderungen jedoch auch in der Quellansicht analysieren und kommentieren.

HTML-Elemente anzeigen

Gerenderte Ansichten der Commits an HTML-Dokumenten werden nicht direkt unterstützt. In einigen Formaten wie Markdown kannst du beliebiges HTML in ein Dokument einbetten. Wenn diese Dokumente in GitHub AE dargestellt werden, kann ein Teil dieser eingebetteten HTML in einer Vorschau angezeigt werden, manch andere HTML (wie ein eingebettetes YouTube-Video) hingegen nicht.

Im Allgemeinen zeigen gerenderte Ansichten von Dokumentänderungen, die eingebettete HTML enthalten, diejenigen Änderungen an den Elementen an, die in der GitHub AE-Ansicht des Dokuments 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- bzw. TopoJSON-Dateien zu GitHub

GitHub AE unterstützt die Zuordnung von GeoJSON- und TopoJSON-Daten in GitHub AE-Repositorys. Committe die Datei einfach 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. Navigiere dann zum Pfad der GeoJSON- oder TopoJSON-Datei auf GitHub.com.

Wenn du rechts auf das Papiersymbol klickst, siehst du auch die Änderungen, die als Teil eines Commits an dieser Datei vorgenommen wurden.

Screenshot von Quellen-Anzeigeauswahl

Geometrietypen

Karten in GitHub AE verwenden Leaflet.js und unterstützen alle Geometrietypen, die in der geoJSON-Spezifikation beschrieben sind (Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon und GeometryCollection). TopoJSON-Dateien sollten vom Typ „Topologie“ sein und der TopoJSON-Spezifikation entsprechen.

Funktionen stilisieren

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, medium oder large
  • marker-color: gültige RGB-Farbe im Hexadezimalformat
  • marker-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 eines Polygonrands oder einer Linie (0,0–1,0)
  • stroke-width: Breite eines Polygonrands oder einer Linie
  • fill: 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öchtest du deine GeoJSON-Karte an anderer Stelle als GitHub AE bereitstellen? Passe einfach diese Vorlage an, und integriere sie in eine 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.

Clustering

Wenn deine Karte eine große Anzahl von Markierungen (ungefähr mehr als 750) enthält, bündelt GitHub benachbarte Markierungen automatisch in größeren Zoomstufen. 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 du feststellst, dass etwas nicht ganz richtig ist, kannst du, da es ein Open-Source-Projekt ist, dich ganz einfach registrieren und eine Korrektur übermitteln.

Problembehandlung

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 deine 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. Derzeit unterstützt GitHub AE nur die Projektion urn:ogc:def:crs:OGC:1.3:CRS84.

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 im Allgemeinen eine ähnliche Mitteilung wie die folgende angezeigt:

Große Datei

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.

Weiterführende Themen

Arbeiten mit Jupyter Notebook-Dateien in GitHub

Wenn du Jupyter Notebook- oder IPython Notebook-Dateien mit der Erweiterung .ipynb auf your enterprise hinzufügst, werden sie in deinem Repository als statische HTML-Dateien gerendert.

Die interaktiven Features des Notebooks, beispielsweise benutzerdefinierte JavaScript-Plots, funktionieren in deinem Repository auf your enterprise nicht. 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 für das Rendern mit nbviewer findest du unter Linking und „Interactions.ipynb“.

Wenn du eine vollständig interaktive Version deines Jupyter Notebook anzeigen möchtest, kannst du einen Notebookserver lokal einrichten. Weitere Informationen findest du in der offiziellen Dokumentation zu Jupyter.

Problembehandlung

Wenn du Probleme beim Rendern von Jupyter Notebook-Dateien als statischen HTML-Code hast, kannst du die Datei lokal an der Befehlszeile konvertieren, indem du den Befehl nbconvert verwendest:

$ jupyter nbconvert --to html NOTEBOOK-NAME.ipynb

Weiterführende Themen