Gist-it Code

#Gist-it Code

Source Code Gist-it Code
For Blogger

Blair-Vanderhoof.html

By Blair Vanderhoof

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

      <h1><a href="https://github.com/blairvanderhoof/gist-embed">gist-embed</a></h1>
      <h2>Ultra powered gist embedding for your website</h2>
      <h3> 
        <span class="iconBlock">
          <a class="icons" href="https://github.com/blairvanderhoof/gist-embed">
            <span class="starCount"></span>
          </a>
        </span>
        <span class="iconBlock">
          <a class="icons" href="https://github.com/blairvanderhoof/gist-embed">
            <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>

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

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

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

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

  <p>Loading a gist with caption</p>
  <code data-gist-id="5457619" 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="5457619" 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="5457635"></code>

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

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

  <p>Loading a range of line numbers from a gist (line 2 through 4)</p>
  <code data-gist-id="5457652" 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="5457665" data-gist-line="1,3-4"></code>

  <p>Loading a list of line numbers from a gist (line 2, 3, 4)</p>
  <code data-gist-id="5457668" data-gist-line="2,3,4"></code>

  <p>Loading a single line and a range of line numbers from a gist (line 1 and line 4 through 5), but with collapsing the others</p>
  <code data-gist-id="5457665" data-gist-line="1,4-5" data-gist-lines-expanded="true"></code>

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

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

  <p>Loading a gist without the loading text</p>
  <code data-gist-id="f847e6866e13ed607f49" data-gist-show-loading="false"></code>

  <p>Loading a gist with the github loading spinner</p>
  <code data-gist-id="3d327d5953d0629e67efc6c94bb83259" data-gist-show-spinner="true"></code>

  <p>Loading a gist after the page has loaded</p>
  <code id="after-page-load-test"></code>

  <p>Loading a gist with caching on</p>
  <code data-gist-id="3d7d86860ac918fc7c6d8b36ca57592a" data-gist-enable-cache="true"></code>

  <p>Loading a gist with caching on again</p>
  <code data-gist-id="3d7d86860ac918fc7c6d8b36ca57592a" data-gist-enable-cache="true"></code>

  <p>Loading a gist with caching and again</p>
  <code data-gist-id="3d7d86860ac918fc7c6d8b36ca57592a" data-gist-enable-cache="true"></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>

Gist-it.html

By Gist-it (Github)
Link Url : http://gist-it.appspot.com/

Description
gist-it.appspot.com lets you take a file from your GitHub repository and embed it into any webpage, 
just like a gist Syntax highlighting by google-code-prettify

Usage
Take a github file url and prefix it with http://gist-it.appspot.com and embed the result within a <script> tag:

<script src="http://gist-it.appspot.com/http://github.com/$file"></script>

$file should follow the github repository pattern of $user/$repository/raw/master/$path
github/$file is a shorthand for http://github.com/$file and works in the same way
Additional customization is possible by including one or more of the following in the query string:

slice (optional)
Supply a slice parameter to show only a particular portion of the file:

slice=0:-2	Show the first line up to and including the second to last line
slice=24:100	Show lines 24 through 100
slice=0	Show only the first line of the file
footer (optional)
Use the footer parameter to control the appearance of the footer:

footer=no
footer=0	Hide the footer
footer=minimal	Show the footer without "This Gist brought to you by gist-it."

# Embed the file robertkrimen/gist-it-example/example.js
<script src="http://gist-it.appspot.com/github/robertkrimen/gist-it-example/blob/master/example.js"></script>

# Embed without a footer
<script src="http://gist-it.appspot.com/github/robertkrimen/gist-it-example/blob/master/example.js?footer=0"></script>

# Show only the first and second line
<script src="http://gist-it.appspot.com/github/robertkrimen/gist-it-example/blob/master/example.js?slice=0:1"></script>

Unknown.html

By Unknown

Silahkan Anda buat akun di GitHub di sini: 
https://github.com/

Kemudian silahkan buat Gist, silahkan paste kode ke dalam kotak yang disediakan dan kemudian silahkan Create public gist.
Di halaman Gist yang baru kita buat tadi, di sebelah kanan ada kode embed untuk gist tersebut. Silahkan copy kode embed gist tersebut yang biasanya akan terlihat seperti di bawah ini.

<script src="https://gist.github.com/YourUserName/0d125f838b5c80d89f6a.js"></script>

Dan kita tinggal mempaste kode tersebut di editor postingan pada mode HTML.
Namun jika kita mempaste begitu aja kode embed Gist GitHub seperti di atas, maka js tersebut akan menyebabkan blocking render js halaman postingan tersebut.

Nah untuk itu saya mencoba memberikan cara mudah untuk menyimpan GitHub code snippets dan terhindar dari blocking render js.
Silahkan simpan kode javascript di bawah ini di atas kode </body>, tapi jika tidak berhasil silahkan pindahkan ke atas kode </head>

<script>
//<![CDATA[
function embed(github) {
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://gist.github.com/YourUserName/");
document.write(github);
document.write("\"></scr" + "ipt>");
}
//]]>
</script>

YourUserName silahkan ganti dengan username GitHub. Nah untuk menyimpan embed gist di halaman postingan, Anda hanya perlu menuliskan kode seperti berikut di editor postingan pada mode HTML.

<script>embed("0d125f838b5c80d89f6a.js")</script>

0d125f838b5c80d89f6a.js adalah kode unik untuk setiap gist yang diambil dari kode embed gist dari GitHub seperti di bawah ini.

<script src="https://gist.github.com/YourUserName/0d125f838b5c80d89f6a.js"></script>