Skip to content

Instantly share code, notes, and snippets.

@RLesur
Last active September 4, 2018 23:50
Show Gist options
  • Save RLesur/856d10547fe5a9915fb915b4f95e7ae2 to your computer and use it in GitHub Desktop.
Save RLesur/856d10547fe5a9915fb915b4f95e7ae2 to your computer and use it in GitHub Desktop.
R Markdown HTML4 template with paged.js - Use `theme=NULL`, `mathjax=NULL`, choose another pandoc math engine and open with Chrome
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"$if(lang)$ lang="$lang$" xml:lang="$lang$"$endif$>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
$if(theme)$
$else$
<meta name="viewport" content="width=device-width, initial-scale=1">
$endif$
$for(author-meta)$
<meta name="author" content="$author-meta$" />
$endfor$
$if(date-meta)$
<meta name="date" content="$date-meta$" />
$endif$
<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
<!-- paged.js -->
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style type="text/css">
:root {
--color-mbox : rgba(0,0,0,0.2);
--margin: 4px;
}
[contenteditable]:focus {
outline: 0px solid transparent;
}
#controls {
display: none;
}
@media screen {
body {
background-color: whitesmoke;
}
.pagedjs_page {
background-color: #fdfdfd;
margin: calc(var(--margin) * 4) var(--margin);
flex: none;
box-shadow: 0 0 0 1px var(--color-mbox);
}
.pagedjs_pages {
width: calc((var(--width) * 2) + (var(--margin) * 4));
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
transform-origin: 0 0;
margin: 0 auto;
}
#controls {
margin: 20px 0;
text-align: center;
display: block;
}
.pagedjs_first_page {
margin-left: calc(50% + var(--margin));
}
}
@media screen {
.debug .pagedjs_margin-top .pagedjs_margin-top-left-corner,
.debug .pagedjs_margin-top .pagedjs_margin-top-right-corner {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .pagedjs_margin-top > div {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .pagedjs_margin-right > div {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .pagedjs_margin-bottom .pagedjs_margin-bottom-left-corner,
.debug .pagedjs_margin-bottom .pagedjs_margin-bottom-right-corner {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .pagedjs_margin-bottom > div {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
.debug .pagedjs_margin-left > div {
box-shadow: 0 0 0 1px inset var(--color-mbox);
}
}
html{
--baseline: 15px;
}
@media screen {
.baseline .pagedjs_page {
background-image: repeating-linear-gradient(180deg, transparent 0, transparent 14px , rgba(0,255,0,0.7) var(--baseline)) ;
background-size: cover;
background-position: 0 -3px , 0 0
}
}
@page {
size: $if(size)$$size$$else$A4$endif$ portrait;
margin-top: calc(--height * 0.12);
margin-right: calc(--width * 0.15);
margin-bottom: calc(--height * 0.18);
margin-left: calc(--width * 0.15);
}
</style>
<!-- end of paged.js -->
$for(header-includes)$
$header-includes$
$endfor$
$if(highlightjs)$
<style type="text/css">code{white-space: pre;}</style>
$if(theme)$
<style type="text/css">
pre:not([class]) {
background-color: white;
}
</style>
$endif$
<script type="text/javascript">
if (window.hljs) {
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
if (document.readyState && document.readyState === "complete") {
window.setTimeout(function() { hljs.initHighlighting(); }, 0);
}
}
</script>
$endif$
$if(highlighting-css)$
<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
$highlighting-css$
$if(code_folding)$
.sourceCode .row {
width: 100%;
}
.sourceCode {
overflow-x: auto;
}
.code-folding-btn {
margin-right: -30px;
}
$endif$
</style>
$if(theme)$
<style type="text/css">
pre:not([class]) {
background-color: white;
}
</style>
$endif$
$endif$
$if(abstract)$
<style type="text/css">
p.abstract{
text-align: center;
font-weight: bold;
}
div.abstract{
margin: auto;
width: 90%;
}
</style>
$endif$
$if(theme)$
<style type="text/css">
h1 {
font-size: 34px;
}
h1.title {
font-size: 38px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 12px;
}
.table th:not([align]) {
text-align: left;
}
$if(source_embed)$
#rmd-source-code {
display: none;
}
$endif$
</style>
$endif$
$for(css)$
<link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
$endfor$
</head>
<body>
$if(theme)$
<style type = "text/css">
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
code {
color: inherit;
background-color: rgba(0, 0, 0, 0.04);
}
img {
max-width:100%;
height: auto;
}
.tabbed-pane {
padding-top: 12px;
}
.html-widget {
margin-bottom: 20px;
}
button.code-folding-btn:focus {
outline: none;
}
</style>
$if(kable-scroll)$
<style type="text/css">
.kable-table {
border: 1px solid #ccc;
border-radius: 4px;
overflow: auto;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 20px;
max-height: 350px;
}
.kable-table table {
margin-bottom: 0px;
}
.kable-table table>thead>tr>th {
border: none;
border-bottom: 2px solid #dddddd;
}
.kable-table table>thead {
background-color: #fff;
}
</style>
$endif$
$if(navbar)$
<style type="text/css">
/* padding for bootstrap navbar */
body {
padding-top: $body_padding$px;
padding-bottom: 40px;
}
/* offset scroll position for anchor links (for fixed navbar) */
.section h1 {
padding-top: $header_padding$px;
margin-top: -$header_padding$px;
}
.section h2 {
padding-top: $header_padding$px;
margin-top: -$header_padding$px;
}
.section h3 {
padding-top: $header_padding$px;
margin-top: -$header_padding$px;
}
.section h4 {
padding-top: $header_padding$px;
margin-top: -$header_padding$px;
}
.section h5 {
padding-top: $header_padding$px;
margin-top: -$header_padding$px;
}
.section h6 {
padding-top: $header_padding$px;
margin-top: -$header_padding$px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
border-radius: 6px 0 6px 6px;
}
</style>
<script>
// manage active state of menu based on current page
$$(document).ready(function () {
// active menu anchor
href = window.location.pathname
href = href.substr(href.lastIndexOf('/') + 1)
if (href === "")
href = "index.html";
var menuAnchor = $$('a[href="' + href + '"]');
// mark it active
menuAnchor.parent().addClass('active');
// if it's got a parent navbar menu mark it active as well
menuAnchor.closest('li.dropdown').addClass('active');
});
</script>
$endif$
<div class="container-fluid main-container">
<!-- tabsets -->
<style type="text/css">
.tabset-dropdown > .nav-tabs {
display: inline-table;
max-height: 500px;
min-height: 44px;
overflow-y: auto;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
}
.tabset-dropdown > .nav-tabs > li.active:before {
content: "";
font-family: 'Glyphicons Halflings';
display: inline-block;
padding: 10px;
border-right: 1px solid #ddd;
}
.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
content: "&#xe258;";
border: none;
}
.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
content: "";
font-family: 'Glyphicons Halflings';
display: inline-block;
padding: 10px;
border-right: 1px solid #ddd;
}
.tabset-dropdown > .nav-tabs > li.active {
display: block;
}
.tabset-dropdown > .nav-tabs > li > a,
.tabset-dropdown > .nav-tabs > li > a:focus,
.tabset-dropdown > .nav-tabs > li > a:hover {
border: none;
display: inline-block;
border-radius: 4px;
}
.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
display: block;
float: none;
}
.tabset-dropdown > .nav-tabs > li {
display: none;
}
</style>
<script>
$$(document).ready(function () {
window.buildTabsets("$idprefix$TOC");
});
$$(document).ready(function () {
$$('.tabset-dropdown > .nav-tabs > li').click(function () {
$$(this).parent().toggleClass('nav-tabs-open')
});
});
</script>
<!-- code folding -->
$if(code_menu)$
<style type="text/css">
.code-folding-btn { margin-bottom: 4px; }
</style>
<script>
$$(document).ready(function () {
$if(source_embed)$
window.initializeSourceEmbed("$source_embed$");
$endif$
$if(code_folding)$
window.initializeCodeFolding("$code_folding$" === "show");
$endif$
});
</script>
$endif$
$if(toc_float)$
<script>
$$(document).ready(function () {
// move toc-ignore selectors from section div to header
$$('div.section.toc-ignore')
.removeClass('toc-ignore')
.children('h1,h2,h3,h4,h5').addClass('toc-ignore');
// establish options
var options = {
selectors: "$toc_selectors$",
theme: "bootstrap3",
context: '.toc-content',
hashGenerator: function (text) {
return text.replace(/[.\\/?&!#<>]/g, '').replace(/\s/g, '_').toLowerCase();
},
ignoreSelector: ".toc-ignore",
scrollTo: 0
};
$if(toc_collapsed)$
options.showAndHide = true;
$else$
options.showAndHide = false;
$endif$
$if(toc_smooth_scroll)$
options.smoothScroll = true;
$else$
options.smoothScroll = false;
$endif$
// tocify
var toc = $$("#$idprefix$TOC").tocify(options).data("toc-tocify");
});
</script>
<style type="text/css">
#$idprefix$TOC {
margin: 25px 0px 20px 0px;
}
@media (max-width: 768px) {
#$idprefix$TOC {
position: relative;
width: 100%;
}
}
$if(toc_print)$
$else$
@media print {
#$idprefix$TOC {
display: none !important;
}
}
$endif$
.toc-content {
padding-left: 30px;
padding-right: 40px;
}
div.main-container {
max-width: 1200px;
}
div.tocify {
width: 20%;
max-width: 260px;
max-height: 85%;
}
@media (min-width: 768px) and (max-width: 991px) {
div.tocify {
width: 25%;
}
}
@media (max-width: 767px) {
div.tocify {
width: 100%;
max-width: none;
}
}
.tocify ul, .tocify li {
line-height: 20px;
}
.tocify-subheader .tocify-item {
font-size: 0.90em;
padding-left: 25px;
text-indent: 0;
}
.tocify .list-group-item {
border-radius: 0px;
}
$if(toc_collapsed)$
$else$
.tocify-subheader {
display: inline;
}
.tocify-subheader .tocify-item {
font-size: 0.95em;
}
$endif$
</style>
<!-- setup 3col/9col grid for toc_float and main content -->
<div class="row-fluid">
<div class="col-xs-12 col-sm-4 col-md-3">
<div id="$idprefix$TOC" class="tocify">
</div>
</div>
<div class="toc-content col-xs-12 col-sm-8 col-md-9">
$endif$
$endif$
$for(include-before)$
$include-before$
$endfor$
$if(theme)$
<div class="fluid-row" id="$idprefix$header">
$if(code_menu)$
<div class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Code</span> <span class="caret"></span></button>
<ul class="dropdown-menu" style="min-width: 50px;">
$if(code_folding)$
<li><a id="rmd-show-all-code" href="#">Show All Code</a></li>
<li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li>
$if(source_embed)$
<li role="separator" class="divider"></li>
$endif$
$endif$
$if(source_embed)$
<li><a id="rmd-download-source" href="#">Download Rmd</a></li>
$endif$
</ul>
</div>
$endif$
$endif$
$if(title)$
<h1 class="title toc-ignore">$title$</h1>
$if(subtitle)$
<h3 class="subtitle"><em>$subtitle$</em></h3>
$endif$
$for(author)$
$if(author.name)$
<h4 class="author"><em>$author.name$</em></h4>
$if(author.affiliation)$
<address class="author_afil">
$author.affiliation$<br>$endif$
$if(author.email)$
<a class="author_email" href="mailto:#">$author.email$</a>
</address>
$endif$
$else$
<h4 class="author"><em>$author$</em></h4>
$endif$
$endfor$
$if(date)$
<h4 class="date"><em>$date$</em></h4>
$endif$
$if(abstract)$
<div class="abstract">
<p class="abstract">Abstract</p>
$abstract$
</div>
$endif$
$endif$
$if(theme)$
</div>
$endif$
$if(toc_float)$
$else$
$if(toc)$
<div id="$idprefix$TOC">
$toc$
</div>
$endif$
$endif$
$body$
$for(include-after)$
$include-after$
$endfor$
$if(theme)$
$if(toc_float)$
</div>
</div>
$endif$
</div>
<script>
// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
$$('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$$(document).ready(function () {
bootstrapStylePandocTables();
});
$if(kable-scroll)$
$$(document).ready(function () {
$$('.knitsql-table').addClass('kable-table');
var container = $$('.kable-table');
container.each(function() {
// move the caption out of the table
var table = $$(this).children('table');
var caption = table.children('caption').detach();
caption.insertBefore($$(this)).css('display', 'inherit');
});
});
$endif$
</script>
$endif$
$if(mathjax-url)$
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "$mathjax-url$";
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
$endif$
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment