Tutorial #20
Embed a Github Gist Basic   2013-11-14

Introduction

Every tutorial on this site includes a nicely formatted block of the code that is used in the demo. The code is stored on the GitHub web site as a Gist.

GitHub is a huge repository of software and a tremendous resource for managing complex software projects. But in addition they make it easy to manage small blocks of code or text - they call these Gists. A Gist can contain any sort of text, not just code. People use them for recipes, poetry, to-do lists and they can store text representations of Maps and 3-D models.

GitHub makes it easy to embed and display the content of a Gist on any web page, and provide line numbers and syntax hightling of computer code. Even if you don't need to display blocks of code, you should take a look at Gists.

Demo 1 screenshot for this tutorial


Step by Step

1: Sign up for an account on GitHub. The basic accounts are Free.

Your GitHub home page may look a bit daunting but all we care about here is the Gist button.

Image 1 for this tutorial

2: Create a Gist

Enter a title and enter the text of the Gist in the built-in editor window. Add an optional description.

You can add multiple files to a single Gist and then you can save them as either a Secret or Public Gist. Public Gists can be viewed by anyone.

Image 2 for this tutorial

3: Once created, you can edit or delete the Gist, add comments to it, etc.

Image 3 for this tutorial

4: Select and copy the code in the Embed this gist box on the left side. Go to your web page and paste it where you want the Gist to be displayed.

Reload the page and you should see the Embedded Gist displayed.


Understanding the Code

Well, this is a bit self-referential ... here is an embedded Gist displaying the script responsible for embedding a Gist !

Not much to say about the code. It is simply a script that loads JavaScript from Github that includes the content of the Gist and then renders it in place. There are no extra libraries or stylesheets involved. Simple, clean and effective.


Code for this Tutorial


Share this tutorial


Related Tutorials

13 : Embed a Scribd Document   (Basic)


Comment on this Tutorial


comments powered by Disqus