Show your code from any Github repo file or diff by simply dropping in an (almost) ordinary <code> tag into your HTML.
Check out the demo
Note: This is a very early release (probably too early), and there are a few known bugs I'm currently working on. Feel free to file an issue for any bugs you find or feature requests you might have.
dependencies:
Include jquery & jquery.githubcode at the bottom of your page
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.githubcode.js"></script>Add a <code> tag to your markup, add Github URL via data-url attribute.
<code class="githubcode" data-url="https://github.com/christiannaths/jquery.githubcode/blob/master/src/jquery.githubcode.js"</code>Fire the plugin on all classes of <code class="githubcode"></code>
$('code.githubcode').githubcode();Fire the plugin when the DOM is ready
<script type="text/javascript">
$('code.githubcode').githubcode();
</script>You probably want to do some sytnax highlighting. (This example uses Prism)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>GithubCode Example</title>
<link rel="stylesheet" type="text/css" href="./stylesheets/prism.css" />
</head>
<body>
<h1>Get A Single File via GH Raw URL</h1>
<code class="githubcode" data-url="https://github.com/christiannaths/jquery.githubcode/blob/master/src/jquery.githubcode.js"</code>
<script src="./javascripts/jquery.min.js"></script>
<script src="./javascripts/prism.js"></script>
<script src="./javascripts/jquery.githubcode.min.js"></script>
<script type="text/javascript">
$('.githubcode').githubcode({
afterInsert: function($element){
Prism.highlightAll();
}
});
</script>
</body>
</html>