Added code highlighting (solarized-light theme), added hljs initialization, changed transition to cube and removed reveal default controls.

Author: dumbNickname

index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/jspm_packages/github/hakimel/reveal.js@3.3.0/css/reveal.css">
     <link rel="stylesheet" href="/jspm_packages/github/hakimel/reveal.js@3.3.0/css/theme/white.css">
     <link rel="stylesheet" href="/src/css/common.css">
+    <link rel="stylesheet" href="/src/css/solarized-light.css">
 
 </head>
 
@@ -27,6 +28,19 @@ <h1 style="font-size: 4.5em; margin-bottom: -0.25em;" class="primaryColor" >like
                 <h1 style="font-size: 5em;"class="flippedColor" >that</h1>
             </section>
 
+            <section>
+                <h3>Declaring and using variables</h3>
+                <pre><code class="css" data-trim data-noescape>
+:root {
+--main-color: #06c;
+}
+
+#foo h1 {
+color: var(--main-color);
+}
+               </code></pre>
+            </section>
+
         </div>
     </div>
 

src/css/solarized-light.css

@@ -1,20 +1,22 @@
 import Reveal from 'reveal';
 import classList from '/jspm_packages/github/hakimel/reveal.js@3.3.0/lib/js/classList.js';
+import hljs from '/jspm_packages/github/hakimel/reveal.js@3.3.0/plugin/highlight/highlight.js';
 import zoom from '/jspm_packages/github/hakimel/reveal.js@3.3.0/plugin/zoom-js/zoom.js';
 
 Reveal.initialize({
-    controls: true,
+    controls: false,
     progress: true,
     history: true,
     center: true,
     overview: true,
     touch: true,
     theme: window.Reveal.getQueryHash().theme, // available themes are in /css/theme
-    transition: 'linear', // default/cube/page/concave/zoom/linear/fade/none
+    transition: 'cube', // default/cube/page/concave/zoom/linear/fade/none
     dependencies: [
         // do not use it - use system JS instead.
     ]
 });
 
+hljs.initHighlighting();
 
 export default Reveal;