knitr Rmd reports - custom css and javascript header

knitr_report.css

#toc {
    top: 0px;
    left: 0px;
    height: 100%;
    position: fixed;
    width: 150px;
    padding-top: 20px;
    color: white;
}

#toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#toc li {
    padding: 5px 10px;
}

#toc a {
    color: black;
    text-decoration: none;
    display: block;
    border-left-style: solid;
    border-left-color: #369;
}

#toc .toc-h2 {
    padding-left: 10px;
}

#toc .toc-h3 {
    padding-left: 20px;
}

#toc .toc-h4 {
    padding-left: 30px;
}

#toc .toc-active a {
    background: #336699;
    text-decoration:  underline;
    /*border-style: dotted;*/
    /*border-color: #369;*/
    /*box-shadow: inset -5px 0px 10px -5px white;*/
}

body, td {
   font-family: sans-serif;
   background-color: white;
   font-size: 12px;
   margin: 8px;
   padding-left:150px;
}

tt, code, pre {
   font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace;
}

h1 {
   font-size:2.2em;
}

h2 {
   font-size:1.8em;
}

h3 {
   font-size:1.4em;
}

h4 {
   font-size:1.0em;
}

h5 {
   font-size:0.9em;
}

h6 {
   font-size:0.8em;
}

a:visited {
   color: rgb(50%, 0%, 50%);
}

pre {  
   margin-top: 0;
   max-width: 95%;
   border: 1px solid #ccc;
   white-space: pre-wrap;
}

code{
   background-color: #F8F8F8;
}

pre code {
   display:block;
   padding: 0.5em;
}

table, td, th {
  border: none;
}

blockquote {
   color:#666666;
   margin:0;
   padding-left: 1em;
   border-left: 0.5em #EEE solid;
}

hr {
   height: 0px;
   border-bottom: none;
   border-top-width: thin;
   border-top-style: dotted;
   border-top-color: #999999;
}

div.figure {
  /* Center the image and caption */
  text-align: center;
}
img {
  margin-left: auto;
  margin-right: 20px;
  height: auto;
  width: 25%;
}
input[type=checkbox]{
  display:none;
}
input[type=checkbox]:checked + img{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:auto;
  width: auto;
  margin: 5% auto;
  margin-top:0;
}
a /* All links */
    {
    /* Keep links clean. On screen, they are colored; in print, they do nothing anyway. */
    text-decoration: none;
    }

@media screen
    {
    a:hover
        {
        /* On hover, we indicate a bit more that it is a link. */
        text-decoration: underline;
        }
    }

@media print {
  * {
    background: transparent !important;
    color: black !important;
    filter:none !important;
    -ms-filter: none !important;
  }

  body {
    font-size:12pt;
    max-width:100%;
  }

  hr {
    visibility: hidden;
    page-break-before: always;
  }

  pre, blockquote {
    padding-right: 1em;
    page-break-inside: avoid;
  }

  tr, img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page :left {
    margin: 15mm 20mm 15mm 10mm;
  }

  @page :right {
    margin: 15mm 10mm 15mm 20mm;
  }

  p, h2, h3 {
    orphans: 3; widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }
  a   {
      /* In print, a colored link is useless, so un-style it. */
      color: black;
      background: transparent;
      }
  a[href^="http://"]:after, a[href^="https://"]:after {
      /* However, links that go somewhere else, might be useful to the reader,
         so for http and https links, print the URL after what was the link 
         text in parens
      */
      content: " (" attr(href) ") ";
      font-size: 90%;
      }
  }
}

knitr_report_header.html

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/jgallen23/toc/master/dist/jquery.toc.min.js"></script>

<script>
/* run scripts when document is ready */
$(document).ready(function() {
  /* find all code blocks which have a class (not output) */
  $('pre code[class]').each(function(i, e) {
      /* add toggle */
      /* highlight code */
      hljs.highlightBlock(e);
  });

  $('pre code[class]').each(function() {
    $(this).before('<div class=toggle>[+/- Code]</div>');
  });

  /* onclick toggle next code block */
  $(".toggle").click(function() {
    $(this).next('code').toggle();
  });
  /* add a wrapping div around imgs */
  $('p img').parent().wrap('<div class=figure />');
  $('img').wrap('<label for="check" />')
  $('img').before('<input id="check", type="checkbox"/>');
  /* create table of contents */
  $('#toc').toc({'selectors': 'h1,h2,h3,h4'});

  /* hide by default if a perl or python script code block */
  $('pre code.perl,code.python').hide()
});
</script>

<div id=toc></div>