tools/template.html



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$title$</title>
<style type="text/css">
body { font-family: Helvetica, arial, freesans, clean, sans-serif;
    line-height: 1.4;
    max-width: 48em;
    margin: auto;
    color: #333333;
    background-color: #fff;
    font-size: 13pt;
}
div#TOC ul { list-style: none; }
h1 { font-size: 140%; font-weight: bold; border-top: 1px solid gray; padding-top: 0.5em; }
h2 { font-size: 120%; font-weight: bold; }
h3 { font-size: 110%; font-weight: bold; }
h4 { font-size: 100%; font-weight: bold; }
a.definition { font-weight: bold; }
span.space { position: relative; }
span.number:after { content: "  " }
span.space:after {
  content: "·";
  position: absolute;
  /* create a mark that indicates a space (trick from D. Greenspan) */
  top: 0px; bottom: 7px; left: 1px; right: 1px;
  color: #AAA;
}
div.example { overflow: hidden; }
p { text-align: justify; }
pre { padding: 0.5em; margin-left: 0; margin-right: 0; margin-top: 0.2em;
  margin-bottom: 0.5em; font-size: 88%; }
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
code { font-family: monospace; background-color: #D3E1E4; }
pre > code { background-color: transparent; }
.example { font-size: 0; /* hack to get width:50% to work on inline-block */
           padding-bottom: 6pt; }
.column pre  { font-size: 11pt; padding-left: 6pt; padding-right: 6pt;
               padding-top: 2pt; padding-bottom: 2pt; }
div.examplenum { font-size: 11pt; text-align: left; margin-bottom:10px; }
div.column { display: inline-block; width: 50%; vertical-align: top; }
div.example > div:nth-child(2) { clear:left; background-color: #D3E1E4; }
div.example > div:nth-child(3) { clear:right; background-color: #C9CaCE; }
#watermark {
 position:fixed;
 bottom:0px;
 left:0px;
 padding: 1em;
 width: 100%;
 font-size: 120%;
 opacity:0.7;
 z-index:99;
 color: white;
}
#watermark a { color: white; }
a.dingus { 
  margin-left: 1em;
  cursor: pointer;
  line-height: 30px;
  padding: 4px 7px;
  color: #FFF;
  background-color: #33C3F0;
  box-shadow: 2px 2px 2px rgba(0,0,0,.2);
  border-color: #4FCAEF;
  border-bottom: 2px #2A9EC1 solid;
  border-right: 2px #2A9EC1 solid;
}
a.footnoteRef > sup:before {
  content: "[";
}
a.footnoteRef > sup:after {
  content: "]";
}
a.footnoteRef > sup {
  vertical-align: baseline;
  font-size: 100%;
}
@media print {
  @page {
    size: auto;
    margin: 1.2in 1.2in 1.2in 1.2in;
  }
  body {
      margin: 0px;
      line-height: 1.2;
      font-size: 10pt;
    }
 .column pre  { font-size: 9pt; }
 div.examplenum { font-size: 9pt; }
 a.dingus { display: none; }
}
</style>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$$(document).ready(function() {
  $$("div.example").each(function(e) {
    var t = $$(this).find('code.language-markdown').text();
    $$(this).find('a.dingus').click(function(f) {
      window.open('/dingus/?text=' +
        encodeURIComponent(t.replace(/→/g,"\t")));
    });
  });
  $$("code.language-markdown").dblclick(function(e) { window.open('/dingus/?text=' +
      encodeURIComponent($$(this).text()));
  });
});
</script>
</head>
<body>
<h1 class="title">$title$</h1>
<div class="version">Version $version$ ($date$)</div>
<div class="authors">
    <span class="author">$author$</span>
</div>
<div class="license">
<a rel="license"
   href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative
   Commons BY-SA" style="border-width:0"
   src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png"
   /></a><br/><span style="display:none"><span xmlns:dct="http://purl.org/dc/terms/"
   href="http://purl.org/dc/dcmitype/Text" property="dct:title"
   rel="dct:type">CommonMark Spec</span> by
   <a xmlns:cc="http://creativecommons.org/ns#"
   href="http://spec.commonmark.org" property="cc:attributionName"
   rel="cc:attributionURL">John MacFarlane</a> is licensed under a
   <a rel="license"
   href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
   Commons Attribution-ShareAlike 4.0 International License</a>.</span>
</div>
<div id="watermark"></div>

<div id="TOC">
$toc$
</div>

$body$

</body>
</html>