Display Github Repositories On The Page - Repos Plugin

Display Github Repositories On The Page
Display Github Repositories On The Page (Images: Plugin JS)

JQuery Repos is a jQuery plugin that allows you to view the latest published data in Github repositories using the system API (application program interface) available on Github. The official API GitHub documentation is available at the following link:


Before you start using the plugins, download the GitHub auctions or alternatively use CND (onticons.css) here are the links to the official documentation and the CND code:

How to use it:

1. Insert the stylesheet repos.css and JavaScript jquery.repos.js into the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.repos.js"></script>
<link rel="stylesheet" href="/path/to/css/repos.css" />

2. Create a container to hold the Github repo list.

<div class="repos"></div>

3. Initialize the plugin and replace the Github username as follows:


4. Determine the maximum number of repos to display. Default: 3.


5. Override the default styles of the Github repo list.

span.name a {
  text-decoration: none;
  font-weight: bold;
  color: #4183c4;
  font-size: 14px;

span.name a:hover {
  text-decoration: underline;

span.description {
  color: #8c77a1;
  font-size: 14px;

span#icon_repos {
  margin-top: 5px;
  float: left;

div.content {
  padding: 8px;
  border: 1px solid #e5e5e5;
  background: #fff;

div.content ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  margin-left: 20px;

Live Demo

See the Pen Untitled by Plugin JS (@pluginjs) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post