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

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

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:

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

In order to display a single file in Medium, you have to append the file name as a parameter:

You now see the single embedded file!

Have fun!