diff options
| -rw-r--r-- | README.md | 15 | ||||
| -rwxr-xr-x | plugin/markdown/markdown.js | 41 |
2 files changed, 41 insertions, 15 deletions
@@ -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) ); } } |