Embedded Code Snippets with 'gist-embed'

Tags: Gist, GitHub

Include jQuery and gist-embed src

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.1/gist-embed.min.js"></script>
</head>

Add an HTML element to your page with a data attribute in the following format, where <gist-id> should be replaced with the id of your gist

    <code data-gist-id="<gist-id>"></code>

There’s also a RubyGem and an AngularJS library

Examples

Including a single gist
Including individual files from a gist
Including specific line numbers from a gist
Removing all line numbers from a gist
Removing the footer from a gist
Highlight lines from a gist

Check out the gist-embed website and the gist-embed project on GitHub

Loading a gist

Loading a gist with all line numbers removed

Loading a gist with multiple files

Loading a single file from a gist (example-file2.html)

Loading a single line number from a gist (line 2)

Loading a range of line numbers from a gist (line 2 through 4)

Loading a single line and a range of line numbers from a gist (line 1 and line 3 through 4)

Loading a list of line numbers from a gist (line 2, 3, 4)

Highlighting a list of line numbers from a gist (line 1, 3, 5)

Loading a private gist

Loading a gist without the loading text

Loading a gist after the page has loaded

Loading a code element without a gist id data attribute

This is the content of a code element. It has no gist id data attribute, so it's not parsed.

Post written on May 20, 2015
Post written on 2015-05-20 00:00:00 -0700

8legged