Fetch And Display Files From A Github Repo - readGithub

Fetch And Display Files From A Github Repo - readGithub
File Size: 41.7 KB
Views Total: 551
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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" 

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.


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>
  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'.

  meta: 'bottom'

8. Set the file and branch to fetch.

  branch: 'master',
  file: 'README.md'

9. More customization options.

  provider: 'jsdelivr',
  cdn: true,
  repo: $(this).data('repo'),
  branch: 'master',
  fail: 'Couldn\'t connect to GitHub',
  replaceRelativeIMG: true,
  replaceRelativeLinks: true


v2.0.0 (2021-05-30)

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.