Embed Code into your blog - and also on Medium

There are several ways to integrate source code including code highlighting into blogs, but GitHub Gists are by far the most convenient and best maintained option.
Especially for Medium blogs, since Medium does not offer any code highlighting by default.

To do this, you can simply use the GitHub Gists, where each Gist allows multiple files and thus different code languages per Gist, which makes it very convenient and clear.

Create Gist

GitHub Create Gist {class=thumbox}

After the GitHub Gist is created, you get an overview including code highlighting.

GitHub View Gist {class=thumbox}

Embed Gist

The Gist UI now has the option of embedding or directly copying the embed in the top right corner.
In my case I get the following HTML snippet:

1<script src="https://gist.github.com/BenjaminAbt/ee4f77b9c5f3068506dd0d43df57f8f8.js"></script>

which renders to

You can now see both files as snippets below each other.

Embed single file of a Gist

So by default, embedding GitHub Gists adds all files to be listed below each other. However, you can manually just add a url query parameter to embed specific files of a Gist to improve the reading flow.

For this a parameter ?file=myfile must be added. Where the filename is the one you specify in the gist itself.

So from https://gist.github.com/BenjaminAbt/ee4f77b9c5f3068506dd0d43df57f8f8.js it should be https://gist.github.com/BenjaminAbt/ee4f77b9c5f3068506dd0d43df57f8f8.js?file=file1.cs

1<script src="https://gist.github.com/BenjaminAbt/ee4f77b9c5f3068506dd0d43df57f8f8.js?file=file1.cs"></script>

which renders to

So just the C# file is now rendered!

Now with Medium

However, Medium does not allow HTML code to be used for embedding. Instead, I’m only allowed to use the link and Medium automatically renders the full snippet from it:

GitHub Gist add to Medium {class=thumbox}