Skip to content

Commit

Permalink
Support for notes within markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Hepton committed Jun 25, 2013
1 parent 235c78a commit 245efee
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 15 deletions.
15 changes: 13 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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:
Expand Down
41 changes: 28 additions & 13 deletions plugin/markdown/markdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 );
Expand All @@ -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]);
Expand All @@ -80,34 +87,42 @@

// 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
(wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex));

// 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>';
}
}

Expand All @@ -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.' +
Expand All @@ -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) );

}
}
Expand Down

0 comments on commit 245efee

Please sign in to comment.