Skip to content

Instantly share code, notes, and snippets.

@pennestri

pennestri/katex_number_cite.html

Last active March 9, 2018 03:09
Show Gist options
  • Save pennestri/3bc84888e6bebd09aceed58bd8308681 to your computer and use it in GitHub Desktop.
Save pennestri/3bc84888e6bebd09aceed58bd8308681 to your computer and use it in GitHub Desktop.
Download ZIP
Numbering, cross referencing and copy equations in KaTex
Raw
katex_number_cite.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script>
<style>
.equation {
font-size: 20px;
text-align: left;
margin: 30px 0;
margin-left: 5cm;
margin-right: 3cm;
display: block;
}
.equation:hover {cursor: hand;color: blue;}
.equation_inline {
font-size: 20px;
text-align: center;
margin: 30px 0;
display:inline;
}
.equation_inline:hover {cursor: hand;color: blue;}
</style>
<body>
<equation id="eq1"> b-c + \dfrac{d}{s} </equation>
<equation> s-x + \dfrac{d}{s} </equation>
<equation*> t-c + \dfrac{d}{s} </equation*>
<equation*> \begin{aligned} x &#32; + t = z \\ = &#32;x ;\end{aligned} </equation*>
<p>Ciao equation <a class="reference" id="eq1"></a>
demo text <eqline> y-c + \dfrac{d}{s} </eqline> Enjoy!
</p>
</body>
<script>
window.onload = function() {
var num_eq = document.getElementsByTagName("equation");
var not_num_eq = document.getElementsByTagName("equation*");
//var line_eq=document.getElementsByTagName("math");
var line_eq=document.getElementsByTagName("eqline");
for(var i=0; i<num_eq.length; i++){
num_eq[i].setAttribute("class","equation");
num_eq[i].setAttribute("onClick","copyequation(this.id)");
var value=num_eq[i].innerHTML;
var id=num_eq[i].getAttribute('id');
if (num_eq[i].hasAttribute("id")==false) {
num_eq[i].setAttribute("id","notid"+i);
id=num_eq[i].getAttribute('id');
};
var eqnumber=i+1;
num_eq[i].innerHTML=value+" "+String.fromCharCode(92)+"qquad "+String.fromCharCode(92)+"qquad ("+eqnumber+")";
var reference = document.getElementsByClassName("reference");
for (var j=0; j<reference.length; j++) {
if (reference[j].getAttribute('id')==id) {
reference[j].innerHTML +=' ('+eqnumber+')';
};
};
//document.write("<p id='"+id+"reference"+"' >"+value+"</p>");
// salva il testo eq in latex prima del render con Katex
document.body.innerHTML +="<p id='"+id+"reference"+"' hidden>"+value+"</p>";
};
for(var j=0; j<not_num_eq.length; j++){
not_num_eq[j].setAttribute("class","equation");
var id=not_num_eq[j].getAttribute('id');
var value=not_num_eq[j].innerHTML;
if (not_num_eq[j].hasAttribute("id")==false) {
not_num_eq[j].setAttribute("id","nnotid"+j);
id=not_num_eq[j].getAttribute('id');
};
document.body.innerHTML +="<p id='"+id+"reference"+"'hidden>"+value+"</p>";
not_num_eq[j].setAttribute("onClick","copyequation(this.id)");
};
for(var k=0; k<line_eq.length; k++){
line_eq[k].setAttribute("class","equation_inline");
var id=line_eq[k].getAttribute('id');
var value=line_eq[k].innerHTML;
if (line_eq[k].hasAttribute("id")==false) {
line_eq[k].setAttribute("id","nnid_line"+k);
id=line_eq[k].getAttribute('id');
};
document.body.innerHTML +="<p id='"+id+"reference"+"'hidden>"+value+"</p>";
line_eq[k].setAttribute("onClick","copyequation(this.id)");
};
Array.prototype.forEach.call(num_eq, function(el) {
katex.render(el.innerHTML, el);
});
Array.prototype.forEach.call(not_num_eq, function(el) {
katex.render(el.innerHTML, el);
});
Array.prototype.forEach.call(line_eq, function(el) {
katex.render(el.innerHTML, el);
});
};
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
function copyequation (element_id) {
var valore= document.getElementById(element_id+"reference").innerHTML;
//console.log(valore);
copyToClipboard(valore);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment