Because I always write some article about machine learnning or other learning materials, I need to cite sources very frequently. In order to save my time in writing references, I write this references generator.

My inspiration is came from Markdown nice.

  1. Add this span label to where you want to show references
<span id="footnote"></span>
  1. Add this js code before the end of body
var flag = 1;
$("a").each(function(){
    var o = $(this);
    if (typeof(o.attr("title")) != "undefined"){
        if (flag == 1){
			c = "<h1>References</h1>"
			document.getElementById("footnote").innerHTML = c;
		}
		title = o.attr("title");
		link = o.attr("href");
		if (link.indexOf("http") != -1){
			aContent = '<span class="footnote-num" style="display: inline; width: 10%; background: none; font-size: 80%; opacity: 0.6; line-height: 26px;">[' + String(flag) + ']</span>&nbsp<p style="padding-top: 8px; padding-bottom: 8px; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">' + title + ':<em style="font-style: italic; color: black;"><span>&nbsp<a href="' + link +'" target="_blank" class="textToLink" style="text-decoration: none; color: #1e6bb8; word-wrap: break-word; font-weight: bold; border-bottom: 1px solid #1e6bb8;">' + link + '</a></span></em></p><br>';    }
		else{
			o.removeAttr("href")
			aContent = '<span class="footnote-num" style="display: inline; width: 10%; background: none; font-size: 80%; opacity: 0.6; line-height: 26px;">[' + String(flag) + ']</span>&nbsp<p style="padding-top: 8px; padding-bottom: 8px; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">' + title + ':<em style="font-style: italic; color: black;">' + link + '</em></p><br>';
		}
		flag += 1;
		document.getElementById("footnote").innerHTML += aContent;
    }
});

Compress js:

"use strict";var flag=1;$("a").each(function(){var t=$(this);void 0!==t.attr("title")&&(1==flag&&(c="<h1>References</h1>",document.getElementById("footnote").innerHTML=c),title=t.attr("title"),link=decodeURI(t.attr("href")),-1!=link.indexOf("http")?aContent='<span class="footnote-num" style="display: inline; width: 10%; background: none; font-size: 80%; opacity: 0.6; line-height: 26px;">['+String(flag)+']</span>&nbsp<p style="padding-top: 8px; padding-bottom: 8px; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">'+title+':<em style="font-style: italic; color: black;"><span>&nbsp<a href="'+link+'" target="_blank" class="textToLink" style="text-decoration: none; color: #1e6bb8; word-wrap: break-word; font-weight: bold; border-bottom: 1px solid #1e6bb8;">'+link+"</a></span></em></p><br>":(t.removeAttr("href"),aContent='<span class="footnote-num" style="display: inline; width: 10%; background: none; font-size: 80%; opacity: 0.6; line-height: 26px;">['+String(flag)+']</span>&nbsp<p style="padding-top: 8px; padding-bottom: 8px; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">'+title+':<em style="font-style: italic; color: black;">'+link+"</em></p><br>"),flag+=1,document.getElementById("footnote").innerHTML+=aContent)});

PS: When you add this code to your website, please make sure that you add title in a label. If you don't add title at a label, it will not show at references.

If you want to limit your searching in a certain class, you can add this to certain code:

$(".className a").each(function()

The effect is shown below!