Last active
September 4, 2018 23:50
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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: ""; | |
| 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