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.
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.
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.
3: Once created, you can edit or delete the Gist, add comments to it, etc.
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 !
Code for this Tutorial
|1 :||tutorial_20_example_1.html||Example of embedding a gist in a web page||Live Demo 1|
Share this tutorial
13 : Embed a Scribd Document (Basic)
Comment on this Tutorial
comments powered by Disqus