From: Adam Hepton <adam.hepton@frogtrade.com>
Date: Tue, 25 Jun 2013 11:15:22 +0000 (+0100)
Subject: Support for notes within markdown
X-Git-Url: http://git.tremily.us/?a=commitdiff_plain;h=245efee894311bc2cafecf9f7fa61547013ac975;p=reveal.js.git

Support for notes within markdown
---

diff --git a/README.md b/README.md
index 96b7c0e..e2e50c6 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Iri
 You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file.
 
 ```html
-<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>
+<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^[[["></section>
 ```
 
 ### Configuration
@@ -458,7 +458,7 @@ If you want to add a theme of your own see the instructions here: [/css/theme/RE
 
 reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Press the 's' key on your keyboard to open the notes window.
 
-By default notes are written using standard HTML, see below, but you can add a ```data-markdown``` attribute to the ```<aside>``` to write them using Markdown.
+By default notes are written using standard HTML, see below, but you can add a ```data-markdown``` attribute to the ```<aside>``` to write them using Markdown, or separate your external markdown content file with the separator specified within your original declaration where notes begin.
 
 ```html
 <section>
@@ -470,6 +470,17 @@ By default notes are written using standard HTML, see below, but you can add a `
 </section>
 ```
 
+```html
+<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^[[["></section>
+
+# Title
+## Sub-title
+
+Here is some content...
+[[[
+These are my notes for this slide.
+```
+
 ## Server Side Speaker Notes
 
 In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the required scripts by adding the following dependencies:
diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js
index 473666b..8366c50 100755
--- a/plugin/markdown/markdown.js
+++ b/plugin/markdown/markdown.js
@@ -28,7 +28,9 @@
     };
 
     var twrap = function(el) {
-      return '<script type="text/template">' + el + '</script>';
+      var cnt = el.content || el;
+      cnt += el.asideContent ? ('<aside class="notes" data-markdown>' + el.asideContent + '</aside>') : '';
+      return '<script type="text/template">' + cnt + '</script>';
     };
 
     var getForwardedAttributes = function(section) {
@@ -40,7 +42,7 @@
                 value = attributes[i].value;
 
             // disregard attributes that are used for markdown loading/parsing
-            if( /data\-(markdown|separator|vertical)/gi.test( name ) ) continue;
+            if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
 
             if( value ) {
                 result.push( name + '=' + value );
@@ -53,22 +55,27 @@
         return result.join( ' ' );
     }
 
-    var slidifyMarkdown = function(markdown, separator, vertical, attributes) {
+    var slidifyMarkdown = function(markdown, separator, vertical, notes, attributes) {
 
         separator = separator || '^\n---\n$';
 
         var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'),
             reHorSeparator = new RegExp(separator),
+            notesSeparator = new RegExp(notes, 'mg'),
             matches,
+            noteMatch,
             lastIndex = 0,
             isHorizontal,
             wasHorizontal = true,
             content,
+            asideContent,
+            slide,
             sectionStack = [],
             markdownSections = '';
 
         // iterate until all blocks between separators are stacked up
         while( matches = reSeparator.exec(markdown) ) {
+            asideContent = null;
 
             // determine direction (horizontal by default)
             isHorizontal = reHorSeparator.test(matches[0]);
@@ -80,18 +87,28 @@
 
             // pluck slide content from markdown input
             content = markdown.substring(lastIndex, matches.index);
+            noteMatch = content.split(notesSeparator);
+
+            if(noteMatch.length === 2) {
+                content = noteMatch[0];
+                asideContent = noteMatch[1].trim();
+            }
+
+            slide = {
+                content: content,
+                asideContent: asideContent || ""
+            };
 
             if( isHorizontal && wasHorizontal ) {
                 // add to horizontal stack
-                sectionStack.push(content);
+                sectionStack.push(slide);
             } else {
                 // add to vertical stack
-                sectionStack[sectionStack.length-1].push(content);
+                sectionStack[sectionStack.length-1].push(slide);
             }
 
             lastIndex = reSeparator.lastIndex;
             wasHorizontal = isHorizontal;
-
         }
 
         // add the remaining slide
@@ -99,15 +116,13 @@
 
         // flatten the hierarchical stack, and insert <section data-markdown> tags
         for( var k = 0, klen = sectionStack.length; k < klen; k++ ) {
-            // horizontal
-            if( typeof sectionStack[k] === 'string' ) {
-                markdownSections += '<section '+ attributes +' data-markdown>' +  twrap( sectionStack[k] )  + '</section>';
-            }
             // vertical
-            else {
+           if(sectionStack[k].propertyIsEnumerable(length) && typeof sectionStack[k].splice === "function") {
                 markdownSections += '<section '+ attributes +'>' +
                                         '<section data-markdown>' +  sectionStack[k].map(twrap).join('</section><section data-markdown>') + '</section>' +
                                     '</section>';
+            } else {
+                markdownSections += '<section '+ attributes +' data-markdown>' + twrap( sectionStack[k] ) + '</section>';
             }
         }
 
@@ -131,7 +146,7 @@
                 xhr.onreadystatechange = function () {
                     if( xhr.readyState === 4 ) {
                         if (xhr.status >= 200 && xhr.status < 300) {
-                            section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) );
+                            section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), section.getAttribute('data-notes'), getForwardedAttributes(section) );
                         } else {
                             section.outerHTML = '<section data-state="alert">ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status +
                                 '. Check your browser\'s JavaScript console for more details.' +
@@ -150,7 +165,7 @@
             } else if( section.getAttribute('data-separator') ) {
 
                 var markdown = stripLeadingWhitespace(section);
-                section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), getForwardedAttributes(section) );
+                section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical'), section.getAttribute('data-notes'), getForwardedAttributes(section) );
 
             }
         }