Added support for code highlight themes

Author: denehyg

README.md

@@ -108,11 +108,25 @@ Reveal.initialize({
     // with the default themes list. Alternatively, provide an
     // array to specify the themes to make available in the
     // themes menu panel, for example...
+    //
     // [
-    //     { name: 'Black', theme: 'css/theme/black.css' },
-    //     { name: 'White', theme: 'css/theme/white.css' },
-    //     { name: 'League', theme: 'css/theme/league.css' }
+    //     { name: 'Black', theme: 'dist/theme/black.css' },
+    //     { name: 'White', theme: 'dist/theme/white.css' },
+    //     { name: 'League', theme: 'dist/theme/league.css' },
+    //     {
+    //       name: 'Dark',
+    //       theme: 'lib/reveal.js/dist/theme/black.css',
+    //       highlightTheme: 'lib/reveal.js/plugin/highlight/monokai.css'
+    //     },
+    //     {
+    //       name: 'Code: Zenburn',
+    //       highlightTheme: 'lib/reveal.js/plugin/highlight/zenburn.css'
+    //     }
     // ]
+    //
+    // Note: specifying highlightTheme without a theme will
+    // change the code highlight theme while leaving the
+    // presentation theme unchanged.
     themes: false,
 
     // Specifies the path to the default theme files. If your
@@ -121,7 +135,7 @@ Reveal.initialize({
     // when 'themes' is set to 'true'. If you provide your own
     // list of themes or 'themes' is set to 'false' the
     // 'themesPath' option is ignored.
-    themesPath: 'css/theme/',
+    themesPath: 'dist/theme/',
 
     // Specifies if the transitions menu panel will be shown.
     // Set to 'true' to show the transitions menu panel with
@@ -184,6 +198,16 @@ If you are using the themes panel you need to ensure the theme stylesheet in the
 <link rel="stylesheet" href="css/theme/black.css" id="theme" />
 ```
 
+If your themes configuration includes code highlight themes you need to ensure the highlights theme stylesheet in the presentation uses the `id="highlight-theme"` attribute. For example...
+
+```html
+<link
+  rel="stylesheet"
+  href="plugin/highlight/zenburn.css"
+  id="highlight-theme"
+/>
+```
+
 ## Slide Titles
 
 The slide titles used in the menu can be supplied explicitly or are taken directly from the presentation, using the following rules...

plugin.js

@@ -536,45 +536,40 @@ const Plugin = () => {
     var h = parseInt(item.getAttribute('data-slide-h'));
     var v = parseInt(item.getAttribute('data-slide-v'));
     var theme = item.getAttribute('data-theme');
+    var highlightTheme = item.getAttribute('data-highlight-theme');
     var transition = item.getAttribute('data-transition');
+
     if (!isNaN(h) && !isNaN(v)) {
       deck.slide(h, v);
-      closeMenu();
-    } else if (theme) {
-      // take note of the previous theme and remove it, then create a new stylesheet reference and insert it
-      // this is required to force a load event so we can change the menu style to match the new style
-      var stylesheet = select('link#theme');
-      var parent = stylesheet.parentElement;
-      var sibling = stylesheet.nextElementSibling;
-      stylesheet.remove();
-
-      var newStylesheet = stylesheet.cloneNode();
-      newStylesheet.setAttribute('href', theme);
-      newStylesheet.onload = function () {
-        matchRevealStyle();
-      };
-      parent.insertBefore(newStylesheet, sibling);
+    }
+
+    if (theme) {
+      changeStylesheet('theme', theme);
+    }
+
+    if (highlightTheme) {
+      changeStylesheet('highlight-theme', highlightTheme);
+    }
 
-      closeMenu();
-    } else if (transition) {
+    if (transition) {
       deck.configure({ transition: transition });
-      closeMenu();
-    } else {
-      var link = select('a', item);
-      if (link) {
-        if (
-          force ||
-          !options.sticky ||
-          (options.autoOpen && link.href.startsWith('#')) ||
-          link.href.startsWith(
-            window.location.origin + window.location.pathname + '#'
-          )
-        ) {
-          link.click();
-        }
+    }
+
+    var link = select('a', item);
+    if (link) {
+      if (
+        force ||
+        !options.sticky ||
+        (options.autoOpen && link.href.startsWith('#')) ||
+        link.href.startsWith(
+          window.location.origin + window.location.pathname + '#'
+        )
+      ) {
+        link.click();
       }
-      closeMenu();
     }
+
+    closeMenu();
   }
 
   function clicked(event) {
@@ -950,15 +945,17 @@ const Plugin = () => {
         var menu = create('ul', { class: 'slide-menu-items' });
         panel.appendChild(menu);
         options.themes.forEach(function (t, i) {
-          var item = create(
-            'li',
-            {
-              class: 'slide-menu-item',
-              'data-theme': t.theme,
-              'data-item': '' + (i + 1)
-            },
-            t.name
-          );
+          var attrs = {
+            class: 'slide-menu-item',
+            'data-item': '' + (i + 1)
+          };
+          if (t.theme) {
+            attrs['data-theme'] = t.theme;
+          }
+          if (t.highlightTheme) {
+            attrs['data-highlight-theme'] = t.highlightTheme;
+          }
+          var item = create('li', attrs, t.name);
           menu.appendChild(item);
           item.onclick = clicked;
         });
@@ -1136,6 +1133,22 @@ const Plugin = () => {
     return el;
   }
 
+  function changeStylesheet(id, href) {
+    // take note of the previous theme and remove it, then create a new stylesheet reference and insert it
+    // this is required to force a load event so we can change the menu style to match the new style
+    var stylesheet = select('link#' + id);
+    var parent = stylesheet.parentElement;
+    var sibling = stylesheet.nextElementSibling;
+    stylesheet.remove();
+
+    var newStylesheet = stylesheet.cloneNode();
+    newStylesheet.setAttribute('href', href);
+    newStylesheet.onload = function () {
+      matchRevealStyle();
+    };
+    parent.insertBefore(newStylesheet, sibling);
+  }
+
   // modified from math plugin
   function loadResource(url, type, callback) {
     var head = document.querySelector('head');