Fetch And Display Files From A Github Repo - readGithub

readGithub is a jQuery plugin which fetches files from a Github repository and renders the content on the webpage using a renderer function.

Perfect for fetching and displaying the readme.md of your Github repo on the webpage.

How to use it:

1. Load the stylesheet readgithub.css for the basic styling of the rendered content.

<link rel="stylesheet" href="./dist/css/readgithub.css" />

2. Create a container and specify the Github repository path in the data-repo attribute:

<div class="github" 
     rel="github" 
     data-repo="jqueryscript/easy-tree">
</div>

3. Load jQuery JavaScript library and the JavaScript readgithub.js at the end of the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/readgithub.js"></script>

4. Initialize the plugin to fetch the README.md file from the Master branch of your Github repo.

$('[rel~="github"]').readGitHub();

5. Render the README.MD content on the page using the markdown-it.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/9.1.0/markdown-it.min.js"></script>

$('[rel~="github"]').readGitHub({
  renderer: function(file) {
    return window.markdownit().render(file)
  }
});

6. Customize the meta bar.

var meta = '<div class="github-meta"><a href="https://github.com/' + config.repo + '/blob/' + config.branch + '/' + config.file + '" target="_blank">' + config.file + '</a><a style="float: right;" href="https://github.com/jqueryscript" target="_blank">jQueryScript</a></div>'

7. Set the placement of the meta bar. Default: 'top'.

$('[rel~="github"]').readGitHub({
  meta: 'bottom'
});

8. Set the file and branch to fetch.

$('[rel~="github"]').readGitHub({
  branch: 'master',
  file: 'README.md'
});

9. More customization options.

$('[rel~="github"]').readGitHub({
  provider: 'jsdelivr',
  cdn: true,
  repo: $(this).data('repo'),
  branch: 'master',
  fail: 'Couldn\'t connect to GitHub',
  replaceRelativeIMG: true,
  replaceRelativeLinks: true
});

Changelog:

v2.0.0 (2021-05-30)

• Package update

v1.1.3 (2020-03-16)

• v1.1.3

v1.1.2 (2020-02-11)

• Removed regex lookahead and lookbehind

---

This awesome jQuery plugin is developed by StudioLE. For more Advanced Usages, please check the demo page or visit the official website.