Einzelne Datei aus GitHub-Gist in Blog-Artikel einbinden

26.05.2023

Eine kurze Anleitung, wie man eine einzelne Datei aus einem GitHub-Gist mit mehreren Dateien in einen Blog-Artikel einbindet.

Ich nutze gerne GitHub-Gists, um Code-Beispiele in Blog-Artikel einzubinden, da dies viel bequemer ist als Code direkt in WordPress zu pflegen. Bisher hatte ich für jeden Beispiel-Schnipsel ein eigenes Gist erstellt. Bei Blog-Artikeln mit mehreren Code-Beispielen war das leider auch etwas unhandlich.

Dass ein Gist mehrere Dateien enthalten kann, war mir bereits bekannt, aber der von GitHub-Gists erzeugte Embed-Code enthält immer alle Dateien.

Gist Embed

Nun möchte ich aber die einzelnen Dateien an den passenden Stellen im Artikel einbinden und nicht alle an einer Stelle. Tatsächlich ist auch dies ganz einfach möglich:

  1. Unter https://gist.github.com/yourUsername den entsprechenden Gist öffnen
  2. Rechts oben Embed-Code kopieren
  3. An die URL im Embed-Code „?file=yourFilename.yourFileExtension“ anhängen

Beispiel:

Hier ein Java-Hello-World-Beispiel:

<script src="https://gist.github.com/dsmf/90e3a3ab63a6c8223737c4ae3d49b97f.js?file=first-file.java"></script>

Etwas Text... und Einbindung einer weiteren Datei aus dem Gist - in diesem Fall eine Markdown-Datei:

<script src="https://gist.github.com/dsmf/90e3a3ab63a6c8223737c4ae3d49b97f.js?file=second-file.md"></script>

Und so sieht dies dann im Blog-Artikel aus:

Hier ein Java-Hello-World-Beispiel:

Etwas Text… und Einbindung einer weiteren Datei aus dem Gist – in diesem Fall eine Markdown-Datei:

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*