Maximize/Minimize Controls for highlight.js Code Sections in Reveal.js Slide Shows

revealjs-code-maximize-minimize.txt

<!-- Paste the following into your Reveal.js index.html to add +/- buttons to every <code> section -->
<style>
  .reveal .fullscreen {
    width: 1000px;
    height: 600px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    max-height: none;
    margin-top: -20px;
  }
  .reveal .plus, .reveal .minus {
    color: #d3d3d3;
    z-index: 200;
    font-size: 32px;
    position: absolute;
    top: 0px;
  }
  .reveal .plus {
    left: 880px;
  }
  .reveal .minus {
    left: 990px;
    display: none;
  }
  .reveal .plus:hover, .reveal .minus:hover {
    cursor: pointer;
    color: #000;
  }
  @media print {
    .reveal .minus, .reveal .plus {
      display: none;
    }
  }
</style>
<script>
  // Add maximize/minimize "buttons" to parents of hljs divs
  var removeClass = function(classList, className) {
    return classList.split(' ').filter(function(c){ return c !== className}).join(' ');
  }
  hs=[].slice.call(document.getElementsByClassName('hljs'))
  hs.forEach(function(el){
    var plus = document.createElement('span'), minus = document.createElement('span');
    plus.appendChild(document.createTextNode('+'));
    el.parentElement.appendChild(plus);
    plus.addEventListener('click', function(){
      // undo vertical centering on current slide:
      [].slice.call(document.getElementsByClassName('present')).forEach(function(p){p.style.top = 0});
      el.className = el.className + ' fullscreen';
      minus.style.display = 'block';
      this.style.display = 'none';});
    plus.className = 'plus';

    minus.appendChild(document.createTextNode('-'));
    el.parentElement.appendChild(minus);
    minus.addEventListener('click', function(){
      el.className = removeClass(el.className, 'fullscreen');
      plus.style.display = 'block';
      this.style.display = 'none'; });
    minus.className = 'minus';
    });
</script>

See this in action in this slideshow: https://saschwarz.github.io/angular2-gestures-slides/#/9