A gist is a code snippet hosted by GitHub. They have a commit history which logs the evolution of the code snippet. This site uses gists to display code in a clean and maintainable manner.
By default, Hugo ships with a gist shortcode which enables a user to display GitHub gists in Markdown content. The Python script below shows this in action:
Imagine you change this gist and add more content to it. In the preceding
example, creating another variable and adding this to the print statement is
now what you want to render. As an example of walking somebody through some
code, you might want to show a step-by-step process of the code revisions.
The Hugo documentation for the gist shortcode doesn’t report how to do this, but the steps outlined below allow the rendering of gist revisions using the built-in gist shortcode.
1. Navigate to Gist revisions
-
Go to the GitHub Gist site and navigate to the Gist you want to embed.
-
Go to the revisions page inside this Gist repository.
2. View the Gist revision content
-
Find the desired revision of the gist you want to embed, and click the drop-down (ellipses) located on the right hand side of this gist revision.
-
Click the
View fileoption from the drop-down menu.
3. Embed the Gist revision
-
After following the navigation instructions in step 2, copy the URL. The URL should look similar to the following URL:
https://gist.github.com/<USER>/<GIST_ID>/<COMMIT_ID>To render a specific commit using the Hugo gist shortcode, reformat the copied URL into the following syntax:
{{< gist <USER> "<GIST_ID>/<COMMIT_ID>" "<FILENAME>" >}}
Done!
You can use this syntax to show a step-by-step process of the code revisions. Starting with the first revision:
Followed by another revision: