Gists | GitHub APIを利用します.要jQuery.
例ではgist: 3347397のdescriptionをh1#120907_descriptionに,hello.htmlをiframe#120907_hello_htmlに表示させます.
foobar
以下をHTML編集モードで記述.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1 id="gist_120907_description" style="font-weight:300;">Loading...</h1> | |
<iframe id="gist_120907_hello_html" marginwidth="0" marginheight="0" scrolling="no" style="border:solid 1px #ccc; display:inline; margin:0px; position:static; width:400px; height:300px;"></iframe> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> | |
<script> | |
$(document).ready(function() { | |
var id = '3347397'; | |
var filename = 'hello.html'; | |
$.ajax({ | |
type: 'GET', | |
url: 'https://api.github.com/gists/' + id + '?callback=?', | |
dataType: 'jsonp', | |
success: function(data) { | |
var json = data.data; | |
$('#gist_120907_description').text(json["description"]); | |
$('#gist_120907_hello_html').attr('srcdoc', json["files"][filename]["content"]); | |
} | |
}); | |
}); | |
</script> |
セキュリティに気を付けて…