Code highlighting in place

4 files changed, 266 insertions, 146 deletions

diff --git a/js/slides.js b/js/slides.js
index eee44ee..3f2366b 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -123,6 +123,10 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) {
       e.preventDefault();
       break;
 
+    case 72: // H
+      document.body.classList.toggle('highlight-code');
+      break;
+
     case 78: // N
       document.body.classList.toggle('with-notes');
       break;
diff --git a/template.html b/template.html
index a86bf46..21af68e 100644
--- a/template.html
+++ b/template.html
@@ -100,14 +100,15 @@ URL: https://code.google.com/p/io-2012-slides
       <h3>Subtitle Placeholder</h3>
     </hgroup>
     <article>
+      <p>Press 'h' to highlight important sections of code (wrapped in <code>&lt;b&gt;</code>).</p>
       <pre class="prettyprint" data-lang="javascript">
 &lt;script type='text/javascript'&gt;
   // Say hello world until the user starts questioning
   // the meaningfulness of their existence.
   function helloWorld(world) {
-    for (var i = 42; --i &gt;= 0;) {
+    <b>for (var i = 42; --i &gt;= 0;) {
       alert('Hello ' + String(world));
-    }
+    }</b>
   }
 &lt;/script&gt;
 </pre>
@@ -156,7 +157,7 @@ function helloWorld(world) {
       <h2>Slide with Speaker Notes</h2>
     </hgroup>
     <article>
-      Press 'n'
+      Press 'n' to show speaker notes on a slide.
     </article>
   </slide>
 
@@ -262,7 +263,33 @@ function helloWorld(world) {
     </article>
   </slide>
 
-
+  <slide>
+    <hgroup>
+      <h2>Slide styles</h2>
+    </hgroup>
+    <article class="smaller columns-2">
+      <ul>
+        <li class="red">class="red"</li>
+        <li class="red2">class="red2"</li>
+        <li class="red3">class="red3"</li>
+        <li class="blue">class="blue"</li>
+        <li class="blue2">class="blue2"</li>
+        <li class="blue3">class="blue3"</li>
+        <li class="green">class="green"</li>
+        <li class="green2">class="green2"</li>
+      </ul>
+      <ul>
+        <li class="green3">class="green3"</li>
+        <li class="yellow">class="yellow"</li>
+        <li class="yellow2">class="yellow2"</li>
+        <li class="yellow3">class="yellow3"</li>
+        <li class="gray">class="gray"</li>
+        <li class="gray2">class="gray2"</li>
+        <li class="gray3">class="gray3"</li>
+        <li class="gray4">class="gray4"</li>
+      </ul>
+    </article>
+  </slide>
   <slide class="segue dark nobackground">
     <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
     <hgroup class="auto-fadein">
diff --git a/theme/css/default.css b/theme/css/default.css
index 63c72a8..d82a3c2 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -205,21 +205,21 @@ slide.fill img {
 /**
  * Theme Styles
  */
-/* line 40, ../sass/default.scss */
+/* line 41, ../sass/default.scss */
 ::selection {
   color: white;
   background-color: #ffd14d;
   text-shadow: none;
 }
 
-/* line 46, ../sass/default.scss */
+/* line 47, ../sass/default.scss */
 ::-webkit-scrollbar {
   height: 16px;
   overflow: visible;
   width: 16px;
 }
 
-/* line 51, ../sass/default.scss */
+/* line 52, ../sass/default.scss */
 ::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.1);
   background-clip: padding-box;
@@ -233,30 +233,30 @@ slide.fill img {
   border-width: 1px 1px 1px 6px;
 }
 
-/* line 60, ../sass/default.scss */
+/* line 61, ../sass/default.scss */
 ::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-/* line 63, ../sass/default.scss */
+/* line 64, ../sass/default.scss */
 ::-webkit-scrollbar-button {
   height: 0;
   width: 0;
 }
 
-/* line 67, ../sass/default.scss */
+/* line 68, ../sass/default.scss */
 ::-webkit-scrollbar-track {
   background-clip: padding-box;
   border: solid transparent;
   border-width: 0 0 0 4px;
 }
 
-/* line 72, ../sass/default.scss */
+/* line 73, ../sass/default.scss */
 ::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-/* line 76, ../sass/default.scss */
+/* line 77, ../sass/default.scss */
 body {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf));
   background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
@@ -267,7 +267,7 @@ body {
   background-attachment: fixed;
 }
 
-/* line 82, ../sass/default.scss */
+/* line 83, ../sass/default.scss */
 slides > slide {
   width: 900px;
   height: 700px;
@@ -292,13 +292,13 @@ slides > slide {
   transition: all 0.3s ease-out;
 }
 
-/* line 98, ../sass/default.scss */
+/* line 99, ../sass/default.scss */
 slides.layout-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
 
-/* line 103, ../sass/default.scss */
+/* line 104, ../sass/default.scss */
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
@@ -317,7 +317,7 @@ slides.nobackground slide:not(.fill)::before {
   color: inherit !important;
 }
 */
-/* line 129, ../sass/default.scss */
+/* line 130, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):before {
   font-size: 12pt;
   content: "#io2012";
@@ -333,7 +333,7 @@ slides > slide:not(.fill):not(.nobackground):before {
   height: 30px;
   line-height: 1.9;
 }
-/* line 141, ../sass/default.scss */
+/* line 142, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):after {
   font-size: 12pt;
   content: attr(data-slide-num) "/" attr(data-total-slides);
@@ -343,7 +343,7 @@ slides > slide:not(.fill):not(.nobackground):after {
   line-height: 1.9;
 }
 
-/* line 152, ../sass/default.scss */
+/* line 153, ../sass/default.scss */
 slides > slide.title-slide:after {
   content: '';
   background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
@@ -363,7 +363,7 @@ slides.layout-faux-widescreen > slide:not(.nobackground) {
   background-position-x: 0, 840px;
 }*/