Skip to content

Instantly share code, notes, and snippets.

@cameronraysmith

cameronraysmith/distill-template.html

Created June 13, 2018 21:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cameronraysmith/5461ac6568fbf4e14f4b37ec6b4282ac to your computer and use it in GitHub Desktop.
Save cameronraysmith/5461ac6568fbf4e14f4b37ec6b4282ac to your computer and use it in GitHub Desktop.
Download ZIP
distill-katex
Raw
distill-template.html
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js"></script>
<script src="https://distill.pub/template.v1.js"></script>
<script type="text/front-matter">
title: "Title"
description: "subtitle or description"
authors:
- Cameron Smith: http://cameronraysmith.net
affiliations:
- Albert Einstein College of Medicine: http://einstein.yu.edu
</script>
<dt-article class="centered">
<h1>Title</h1>
<h2>subtitle</h2>
<dt-byline></dt-byline>
<p>This is the first paragraph of the article together with an inline <span id="eqintegral"></span> equation. This is followed by a display equation</p>
<span id="eq1"></span>
<p>We can also cite <dt-cite key="gregor2015draw"></dt-cite> external publications.</p>
</dt-article>
<dt-appendix class="centered"></dt-appendix>
<script class="equations">
katex.render("\\int_0^1{f(x)}", eqintegral);
katex.render("c = \\pm\\sqrt{a^2 + b^2}\\in\\RR", eq1, {
displayMode: true,
macros: {
"\\RR": "\\mathbb{R}"
}
});
</script>
<script type="text/bibliography">
@article{gregor2015draw,
title={DRAW: A recurrent neural network for image generation},
author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
journal={arXiv:1502.04623},
year={2015},
url={https://arxiv.org/pdf/1502.04623.pdf}
}
</script>
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>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