diff --git a/README.md b/README.md
index a8fcaeb7666765641ab273eb0b27bb50eceefb44..56df5a43eae92a1b0f1cf7bd6a26d1eba2b5dc90 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. The ```data-charset``` attribute is optional and specifies which charset to use when loading the external file.
```html
-<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-charset="iso-8859-15"></section>
+<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:" data-charset="iso-8859-15"></section>
```
### Configuration
@@ -478,7 +478,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>
@@ -490,6 +490,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/example.html b/plugin/markdown/example.html
index ceed53fb4fd29006ee7de39fdb6f47204c6bb883..0b07aa59adc007fc1abfd8a67fa563867580db33 100644
--- a/plugin/markdown/example.html
+++ b/plugin/markdown/example.html
@@ -87,7 +87,8 @@
dependencies: [
{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
- { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
+ { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+ { src: '../notes/notes.js' }
]
});
diff --git a/plugin/markdown/example.md b/plugin/markdown/example.md
index e988dd9c261a17663cdccbd4dd07e7d8ff4f06d2..6f6f577a15a1296ffb920988952cb311c61e0f7d 100644
--- a/plugin/markdown/example.md
+++ b/plugin/markdown/example.md
@@ -6,6 +6,8 @@
Content 1.1
+Note: This will only appear in the speaker notes window.
+
## External 1.2
diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js
index a5abc30d21ac6fa7b32e4cd3f0d0b7048095042a..bc771e7f019b0074aa3c58e69a5c1ada1e382151 100755
--- a/plugin/markdown/markdown.js
+++ b/plugin/markdown/markdown.js
@@ -36,7 +36,9 @@
};
var twrap = function(el) {
- return marked(el);
+ var content = el.content || el;
+ content += el.asideContent ? ('<aside class="notes" data-markdown>' + el.asideContent + '</aside>') : '';
+ return '<script type="text/template">' + content + '</script>';
};
var getForwardedAttributes = function(section) {
@@ -48,7 +50,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 );
@@ -61,45 +63,61 @@
return result.join( ' ' );
};
- var slidifyMarkdown = function(markdown, separator, vertical, attributes) {
+ var slidifyMarkdown = function(markdown, separator, vertical, notes, attributes) {
separator = separator || '^\n---\n$';
+ notes = notes || 'note:';
- var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'),
- reHorSeparator = new RegExp(separator),
+ var separatorRegex = new RegExp( separator + ( vertical ? '|' + vertical : '' ), 'mg' ),
+ horizontalSeparatorRegex = new RegExp( separator ),
+ notesSeparatorRegex = new RegExp( notes, 'mgi' ),
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) ) {
+ while( matches = separatorRegex.exec( markdown ) ) {
+ asideContent = null;
// determine direction (horizontal by default)
- isHorizontal = reHorSeparator.test(matches[0]);
+ isHorizontal = horizontalSeparatorRegex.test( matches[0] );
if( !isHorizontal && wasHorizontal ) {
// create vertical stack
- sectionStack.push([]);
+ sectionStack.push( [] );
}
// pluck slide content from markdown input
- content = markdown.substring(lastIndex, matches.index);
+ content = markdown.substring( lastIndex, matches.index );
+ noteMatch = content.split( notesSeparatorRegex );
+
+ 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;
+ lastIndex = separatorRegex.lastIndex;
wasHorizontal = isHorizontal;
-
}
// add the remaining slide
@@ -107,15 +125,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 +'>' + twrap( sectionStack[k] ) + '</section>';
- }
// vertical
- else {
+ if( sectionStack[k].propertyIsEnumerable(length) && typeof sectionStack[k].splice === 'function' ) {
markdownSections += '<section '+ attributes +'>' +
- '<section>' + sectionStack[k].map(twrap).join('</section><section>') + '</section>' +
+ '<section data-markdown>' + sectionStack[k].map(twrap).join('</section><section data-markdown>') + '</section>' +
'</section>';
+ } else {
+ markdownSections += '<section '+ attributes +' data-markdown>' + twrap( sectionStack[k] ) + '</section>';
}
}
@@ -145,7 +161,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.' +
@@ -164,7 +180,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) );
}
}