knitr_bootstrap.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- jQuery -->
<script src="../libs/js/jquery.min.js"></script>
<script src="../libs/js/jquery-ui.min.js"></script>

<!-- highlight.js -->
<link rel="stylesheet" href="../libs/vs.min.css">
<script src="../libs/js/highlight.min.js"></script>
<script src="../libs/js/r.min.js"></script>

<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="../libs/css/bootstrap-combined.min.css" id="style" media="screen">
<script src="../libs/js/bootstrap.min.js"></script>

<!-- bootstrap-responsive -->
<link rel="stylesheet" href="../libs/css/bootstrap-responsive.min.css" media="screen">

<!-- tocify -->
<link rel="stylesheet" href="../libs/css/jquery.tocify.css">
<script src="../libs/js/jquery.tocify.min.js"></script>

<!-- fancybox -->
<link rel="stylesheet" href="../libs/css/jquery.fancybox.css">
<script src="../libs/js/jquery.fancybox.js"></script>

<script>

/* run scripts when document is ready */
$(function() {

  /* size of thumbnails */
  var thumbsize = "span4";

  /* included languages */
  var languages = {};

  /* Add div wrapping class to code blocks without them */
  $('pre code').each(function(){

    var block_type, code_type;
    /* output block */
    if($(this).hasClass('')){
      block_type = "output";
      code_type = "";
    }
    /* source code block */
    else{
      block_type = "source";
      code_type = $(this).attr('class');
    }
    /* no wrapping div, not using render_html(), so add to wrap */
    if($(this).closest('div').length < 1){
      $(this).parent().wrap('<div class="' + [block_type, code_type].join(" ") + '"></div>');
    }
    /* just add code type to the parent div */
    else{
      $(this).closest('div').addClass(code_type);
    }
  });

  /* style tables, set them as output*/
  $('table').addClass('table table-striped table-bordered table-hover table-condensed')
    .wrap('<div class="output", style="overflow: auto"/>');

  /* find all code or output blocks which have a class and add toggle */
  $('div.source, div.output').each(function() {
    var button = $('<button class="btn-mini btn-link btn toggle " data-toggle="button">+/- </button>');

    /* code block */
    if($(this).hasClass('source')){
      var code_block = $(this).find('code');
      var lang_type = code_block.attr('class');
      button.text(button.text() + lang_type + ' Code');
      button.addClass('source ' + lang_type);
      languages[lang_type]=1;
      code_block.each(function(i, e) {
        hljs.highlightBlock(e);
      });
    }

    /* output block */
    else {
      button.text(button.text() + 'Output');
      button.addClass('output active');
    }
    $(this).before(button);
  });

  /* syntax highlight code blocks*/

  /* onclick toggle next code block */
  $('.toggle').click(function() {
    $(this).button('toggle');
    $(this).next('div').slideToggle();
    return false;
  });

  /* give images a fancybox and thumbnail classes to allow lightbox and thumbnails TODO: make fancybox prev next if grouped */
  $('p').each(function(){
    $(this).find('img').unwrap().wrapAll('<div class="row-fluid"><div class="rimage thumbnails"></div></div>');
  });
  $('div.rimage').children('img').wrap('<a href="#", class="' + thumbsize + ' thumbnail"></a></li>').addClass('fancybox');

  /* fancybox */
  $(".fancybox").each( function() {
    var img = $(this);
    $(this).fancybox({
      beforeLoad: function(){
        <!--img.removeClass('thumbnail');-->
      },
      afterClose: function(){
        <!--img.addClass('thumbnail');-->
        img.css('display', 'block');
      },
    });
  });

  /* add bootstrap classes */
  $('body').wrapInner('<div class="container-fluid"><div class="row-fluid"><div class="span9">');
  $('.container-fluid >.row-fluid').prepend('<div class="span3"><div id="toc"></div></div>');

  create_language_links = function(){
    var text='';
    for(language in languages){
      text += '<li><a href="#" class="source toggle_global btn-link btn" type="source.' + language + '">' + language + '</a></li>\n';
    }
    return text;
  }

  /* add navbar */
  $('.container-fluid').prepend(
    '<div id="bottom-navbar" class="navbar-fixed-bottom navbar">\
      <div class="navbar-inner">\
        <div class="pull-right">\
          <span class="navbar-text">Toggle</span>\
          <div class="btn-group dropup" data-toggle="button-checkbox">\
            <button type="source" class="toggle_global btn">Code</button>\
            <button class="btn dropdown-toggle" data-toggle="dropdown">\
              <span class="caret"></span>\
            </button>\
            <ul class="dropdown-menu pull-right">' 
              + create_language_links() + 
            '</div>\
            <button type="output" class="toggle_global btn active">Output</button>\
            <button type="thumbnails" class="toggle_global btn active">Plots</button>\
          </div>\
        </div>\
      </div>\
    </div>'
  );

  /* global toggles FIXME explicitly toggle all on/off using global variables */
  $('.toggle_global').click(function(){
    $(this).button('toggle');
    var type = $(this).attr('type');
    $('.' + type).button('toggle');
    $('div.' + type).slideToggle();
    return false;
  });

  /* toggle code blocks hidden by default */
  $('div.source').toggle();

  /* add table of contents */
  $('#toc').tocify({extendPage: false});

  /* if using render_html() hook, make functions links to custom R search */
  /*search in ggplot documentation or inside-r.org */
  $("span.functioncall").replaceWith(function(){

    return '<a target="_blank" href="http://www.google.com/search?sourceid=navclient&gfns=1&\
q=site:docs.ggplot2.org/current OR site:inside-r.org ' +
    $(this).text() + '">' + $(this).text()+'</a>'
  });

  /* add footer */
  $('body').wrapInner('<div id="wrap" />');
  $('body').append('<div id="push" />');
  var p = $('p:contains("Author:")');
  var last_p = p.filter(':last');
  p.detach();
  last_p.addClass('muted').attr('id','credit');
  last_p.append('<p>styled with <a href="https://github.com/jimhester/knitr_bootstrap">knitr_bootstrap</a></p>');
  last_p.appendTo("body");
  last_p.wrap('<div id="footer"><div class="container" /></div>');
});
</script>

<style type="text/css">

/* Knitr_bootstrap styles
-------------------------------------------------- */
.container-fluid {
  padding-left: 0 !important;
}

.toggle{
  text-transform: capitalize;
}

.toggle_global{
  text-transform: capitalize;
}

.thumbnails { text-align:center; }
.thumbnails > .thumbnail { display: inline-block !important; float: none !important; }

/* Sticky footer styles
-------------------------------------------------- */
* {
  margin:0;
}
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 60px;
    padding-bottom: 60px;
}

#footer {
  text-align: center;
}

/* Twitter Bootstrap Overrides */
/* -------------------------------------------------- */
.nav-list > li > a, .nav-list .nav-header {
    margin: 0px !important;
}
.nav-list > li > a {
    padding: 5px !important;
}

/* Tocify */
/* -------------------------------------------------- */

/* Display h2 headers */
.sub-header {
  display: block;
}

/* Hide the rest */
.sub-header .sub-header {
  display: none;
}

 /* Indent h4 elements */
.sub-header .sub-header .sub-header .sub-header {
  text-indent: 50px;
}

</style>

<link rel="stylesheet" type="text/css" href="../libs/css/bootstrap-combined.min.css" id="style" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/bootstrap-combined.min.css" id="style" title="default" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/amelia/bootstrap.min.css" title="amelia" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/cerulean/bootstrap.min.css" title="cerulean" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/cosmo/bootstrap.min.css" title="cosmo" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/cyborg/bootstrap.min.css" title="cyborg" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/journal/bootstrap.min.css" title="journal" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/readable/bootstrap.min.css" title="readable" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/simplex/bootstrap.min.css" title="simplex" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/2.3.1/slate/bootstrap.min.css" title="slate" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/spacelab/bootstrap.min.css" title="spacelab" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/spruce/bootstrap.min.css" title="spruce" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/superhero/bootstrap.min.css" title="superhero" media="screen">
<link rel="alternate stylesheet" type="text/css" href="../libs/css/boot-styles/united/bootstrap.min.css" title="united" media="screen">

<script>
$(function() {
    $('#bottom-navbar').find('.navbar-inner').append(
    '<ul class="nav">\
      <li class="dropdown">\
        <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">选择网页样式</a>\
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">\
          <li><a class="style-switch" id="default" href="#">default</a></li>\
          <li><a class="style-switch" id="amelia" href="#">amelia</a></li>\
          <li><a class="style-switch" id="cerulean" href="#">cerulean</a></li>\
          <li><a class="style-switch" id="cosmo" href="#">cosmo</a></li>\
          <li><a class="style-switch" id="cyborg" href="#">cyborg</a></li>\
          <li><a class="style-switch" id="journal" href="#">journal</a></li>\
          <li><a class="style-switch" id="readable" href="#">readable</a></li>\
          <li><a class="style-switch" id="simplex" href="#">simplex</a></li>\
          <li><a class="style-switch" id="slate" href="#">slate</a></li>\
          <li><a class="style-switch" id="spacelab" href="#">spacelab</a></li>\
          <li><a class="style-switch" id="spruce" href="#">spruce</a></li>\
          <li><a class="style-switch" id="superhero" href="#">superhero</a></li>\
          <li><a class="style-switch" id="united" href="#">united</a></li>\
        </ul>\
      </li>\
    </ul>');
    $('.style-switch').click(function(){
      var css = $('link[title=' + $(this).attr('id') + ']');
      $('#style[rel=stylesheet]').attr('href', css.attr('href'));
      return false;
    });
  }
);
</script>

<link id="code-style" rel="stylesheet" href="../libs/css/code-styles/vs.min.css">
<link rel="alternate stylesheet" title="Default" href="../libs/css/code-styles/default.min.css">
<link rel="alternate stylesheet" title="Dark" href="../libs/css/code-styles/dark.min.css">
<link rel="alternate stylesheet" title="FAR" href="../libs/css/code-styles/far.min.css">
<link rel="alternate stylesheet" title="IDEA" href="../libs/css/code-styles/idea.min.css">
<link rel="alternate stylesheet" title="Sunburst" href="../libs/css/code-styles/sunburst.min.css">
<link rel="alternate stylesheet" title="Zenburn" href="../libs/css/code-styles/zenburn.min.css">
<link rel="alternate stylesheet" title="Visual Studio" href="../libs/css/code-styles/styles/vs.min.css">
<link rel="alternate stylesheet" title="Ascetic" href="../libs/css/code-styles/ascetic.min.css">
<link rel="alternate stylesheet" title="Magula" href="../libs/css/code-styles/magula.min.css">
<link rel="alternate stylesheet" title="GitHub" href="../libs/css/code-styles/github.min.css">
<link rel="alternate stylesheet" title="Google Code" href="../libs/css/code-styles/googlecode.min.css">
<link rel="alternate stylesheet" title="Brown Paper" href="../libs/css/code-styles/brown_paper.min.css">
<link rel="alternate stylesheet" title="School Book" href="../libs/css/code-styles/school_book.min.css">
<link rel="alternate stylesheet" title="IR Black" href="../libs/css/code-styles/ir_black.min.css">
<link rel="alternate stylesheet" title="Solarized - Dark" href="../libs/css/code-styles/solarized_dark.min.css">
<link rel="alternate stylesheet" title="Solarized - Light" href="../libs/css/code-styles/solarized_light.min.css">
<link rel="alternate stylesheet" title="Arta" href="../libs/css/code-styles/arta.min.css">
<link rel="alternate stylesheet" title="Monokai" href="../libs/css/code-styles/monokai.min.css">
<link rel="alternate stylesheet" title="XCode" href="../libs/css/code-styles/xcode.min.css">
<link rel="alternate stylesheet" title="Pojoaque" href="../libs/css/code-styles/pojoaque.min.css">
<link rel="alternate stylesheet" title="Rainbow" href="../libs/css/code-styles/rainbow.min.css">
<link rel="alternate stylesheet" title="Tomorrow" href="../libs/css/code-styles/tomorrow.min.css">
<link rel="alternate stylesheet" title="Tomorrow Night" href="../libs/css/code-styles/tomorrow-night.min.css">
<link rel="alternate stylesheet" title="Tomorrow Night Bright" href="../libs/css/code-styles/tomorrow-night-bright.min.css">
<link rel="alternate stylesheet" title="Tomorrow Night Blue" href="../libs/css/code-styles/tomorrow-night-blue.min.css">
<link rel="alternate stylesheet" title="Tomorrow Night Eighties" href="../libs/css/code-styles/tomorrow-night-eighties.min.css">

<script>
$(function() {
    $('#bottom-navbar').find('.navbar-inner').append(
    '<ul class="nav">\
      <li class="dropdown">\
        <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">选择代码风格</a>\
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">\
          <li><a class="code-style-switch" title="Default" href="#">Default</a></li>\
          <li><a class="code-style-switch" title="Dark" href="#">Dark</a></li>\
          <li><a class="code-style-switch" title="FAR" href="#">FAR</a></li>\
          <li><a class="code-style-switch" title="IDEA" href="#">IDEA</a></li>\
          <li><a class="code-style-switch" title="Sunburst" href="#">Sunburst</a></li>\
          <li><a class="code-style-switch" title="Zenburn" href="#">Zenburn</a></li>\
          <li><a class="code-style-switch" title="Visual Studio" href="#">Visual Studio</a></li>\
          <li><a class="code-style-switch" title="Ascetic" href="#">Ascetic</a></li>\
          <li><a class="code-style-switch" title="Magula" href="#">Magula</a></li>\
          <li><a class="code-style-switch" title="GitHub" href="#">GitHub</a></li>\
          <li><a class="code-style-switch" title="Google Code" href="#">Google Code</a></li>\
          <li><a class="code-style-switch" title="Brown Paper" href="#">Brown Paper</a></li>\
          <li><a class="code-style-switch" title="School Book" href="#">School Book</a></li>\
          <li><a class="code-style-switch" title="IR Black" href="#">IR Black</a></li>\
          <li><a class="code-style-switch" title="Solarized - Dark" href="#">Solarized - Dark</a></li>\
          <li><a class="code-style-switch" title="Solarized - Light" href="#">Solarized - Light</a></li>\
          <li><a class="code-style-switch" title="Arta" href="#">Arta</a></li>\
          <li><a class="code-style-switch" title="Monokai" href="#">Monokai</a></li>\
          <li><a class="code-style-switch" title="XCode" href="#">XCode</a></li>\
          <li><a class="code-style-switch" title="Pojoaque" href="#">Pojoaque</a></li>\
          <li><a class="code-style-switch" title="Rainbow" href="#">Rainbow</a></li>\
          <li><a class="code-style-switch" title="Tomorrow" href="#">Tomorrow</a></li>\
          <li><a class="code-style-switch" title="Tomorrow Night" href="#">Tomorrow Night</a></li>\
          <li><a class="code-style-switch" title="Tomorrow Night Bright" href="#">Tomorrow Night Bright</a></li>\
          <li><a class="code-style-switch" title="Tomorrow Night Blue" href="#">Tomorrow Night Blue</a></li>\
          <li><a class="code-style-switch" title="Tomorrow Night Eighties" href="#">Tomorrow Night Eighties</a></li>\
        </ul>\
      </li>\
    </ul>');
    $('.code-style-switch').click(function(){
      var css = $('link[title="' + $(this).attr('title') + '"]');
      $('#code-style[rel=stylesheet]').attr('href', css.attr('href'));

      return false;
    });
});
</script>


<style type="text/css">

 /* customize style */
body{font-size:18px; line-height: 30px; padding:20px}
h1{font-size: 32px}
h2{font-size: 26px}
code, pre{font-size: 18px}
a.code-style-switch{font-size: 14px}

</style>

<!-- mathjax config similar to math.stackexchange -->

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      	inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    	displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    }
  });
</script>


<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>