<!DOCTYPE html>
<html>
  <head>
    <title>gist-embed</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta
      name="description"
      content="Lightning fast zero dependency library for embedding gists on your website"
    />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="dist/gist-embed.min.js"></script>
    <style>
      body,
      html {
        padding: 0;
        background-color: #fff;
        font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light',
          'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
        font-weight: 300;
        color: #333;
        margin: 10px;
      }

      p {
        font-size: 18px;
        margin: 0 0 5px 0;
      }

      code {
        margin: 0 0 30px 0;
        display: block;
        font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light',
          'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
      }

      header {
        margin-bottom: 40px;
      }
      header a {
        color: #444;
      }
      header a:hover {
        color: #dd1144;
      }
      h1,
      h2,
      h3 {
        margin: 0;
        font-weight: normal;
      }
      h1 {
        font-size: 32px;
        margin-bottom: 8px;
      }
      h2 {
        font-size: 22px;
        margin-bottom: 10px;
      }
      h3 {
        font-size: 18px;
      }

      .icon {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        margin-top: -4px;
      }
      .attribution {
        font-size: 16px;
        clear: both;
        margin-top: 8px;
      }
      .attribution a {
        margin-bottom: 0;
      }
      a.icons {
        text-decoration: none;
        margin-bottom: 5px;
        display: block;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>
        <a href="https://github.com/bvanderhoof/gist-embed">gist-embed</a>
      </h1>
      <h2>
        Lightning fast zero dependency library for embedding gists on your
        website
      </h2>
      <h3>
        <span class="iconBlock">
          <a class="icons" href="https://github.com/bvanderhoof/gist-embed">
            <img class="icon" src="github-icon.png" />
            <span>Documentation and source on Github</span>
          </a>
        </span>
        <div class="attribution">
          <span>written by</span>
          <a href="http://blairvanderhoof.com">Blair Vanderhoof</a>
        </div>
      </h3>
    </header>

    <p>Loading a gist</p>
    <code data-gist-id="bfc347b261aa74f8578e0f75dbb5c497"></code>

    <p>Loading a gist with all line numbers removed</p>
    <code
      data-gist-id="ec8cc541c45705a34988c68225627ecb"
      data-gist-hide-line-numbers="true"
    ></code>

    <p>Loading a gist with footer removed</p>
    <code
      data-gist-id="f9ab62428c11acd00ae087f4230c7dec"
      data-gist-hide-footer="true"
    ></code>

    <p>Loading a gist with both footer and line numbers removed</p>
    <code
      data-gist-id="dc877edb5e3c26edca5b4b9ecbb69b62"
      data-gist-hide-footer="true"
      data-gist-hide-line-numbers="true"
    ></code>

    <p>Loading a gist with caption</p>
    <code
      data-gist-id="7baadc508ee2f81164984f3dda7396eb"
      data-gist-caption="this/is/a/sample/path/to/file.extension"
    ></code>

    <p>Loading a gist with caption with footer removed</p>
    <code
      data-gist-id="6ace96ce3cb069a31d00aad4d3028497"
      data-gist-hide-footer="true"
      data-gist-caption="this/is/a/sample/path/to/file.extension"
    ></code>

    <p>Loading a gist with multiple files</p>
    <code data-gist-id="5d38ea50df686b72d6801dca13387baa"></code>

    <p>Loading a single file from a gist (example7-file2.html)</p>
    <code
      data-gist-id="5d38ea50df686b72d6801dca13387baa"
      data-gist-file="example7-file2.html"
    ></code>

    <p>Loading a single line number from a gist (line 2)</p>
    <code
      data-gist-id="47294f914dce7472c2c85874cb1ba424"
      data-gist-line="2"
    ></code>

    <p>Loading a range of line numbers from a gist (line 2 through 4)</p>
    <code
      data-gist-id="bd6b034b373ce5af87b513f68be30799"
      data-gist-line="2-4"
    ></code>

    <p>
      Loading a single line and a range of line numbers from a gist (line 1 and
      line 3 through 4)
    </p>
    <code
      data-gist-id="deb8c41ee013c615a2bf3a7468e5c008"
      data-gist-line="1,3-4"
    ></code>

    <p>Highlighting a list of line numbers from a gist (line 1, 3, 5)</p>
    <code
      data-gist-id="81a92a00cf2472820ad1795fab2c7449"
      data-gist-highlight-line="1,3,5"
    ></code>

    <p>
      Loading a range of lines automatically using a trailing "-" (line 2
      through 5)
    </p>
    <code
      data-gist-id="deb8c41ee013c615a2bf3a7468e5c008"
      data-gist-line="2-"
    ></code>

    <p>
      Highlight a range of lines automatically using a trailing "-" (line 2
      through 5)
    </p>
    <code
      data-gist-id="223f693903edf11d4d79276689077d54"
      data-gist-highlight-line="2-"
    ></code>

    <p>Loading a code element without a gist id data attribute</p>
    <code>
      This is the content of a code element. It has no gist id data attribute,
      so it's not parsed.
    </code>
  </body>
</html>