Support for notes within markdown
This commit is contained in:
parent
235c78a5c8
commit
245efee894
2 changed files with 41 additions and 15 deletions
15
README.md
15
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.
|
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
|
```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
|
### 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.
|
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
|
```html
|
||||||
<section>
|
<section>
|
||||||
|
@ -470,6 +470,17 @@ By default notes are written using standard HTML, see below, but you can add a `
|
||||||
</section>
|
</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
|
## 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:
|
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:
|
||||||
|
|
|
@ -28,7 +28,9 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
var twrap = function(el) {
|
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) {
|
var getForwardedAttributes = function(section) {
|
||||||
|
@ -40,7 +42,7 @@
|
||||||
value = attributes[i].value;
|
value = attributes[i].value;
|
||||||
|
|
||||||
// disregard attributes that are used for markdown loading/parsing
|
// 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 ) {
|
if( value ) {
|
||||||
result.push( name + '=' + value );
|
result.push( name + '=' + value );
|
||||||
|
@ -53,22 +55,27 @@
|
||||||
return result.join( ' ' );
|
return result.join( ' ' );
|
||||||
}
|
}
|
||||||
|
|
||||||
var slidifyMarkdown = function(markdown, separator, vertical, attributes) {
|
var slidifyMarkdown = function(markdown, separator, vertical, notes, attributes) {
|
||||||
|
|
||||||
separator = separator || '^\n---\n$';
|
separator = separator || '^\n---\n$';
|
||||||
|
|
||||||
var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'),
|
var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'),
|
||||||
reHorSeparator = new RegExp(separator),
|
reHorSeparator = new RegExp(separator),
|
||||||
|
notesSeparator = new RegExp(notes, 'mg'),
|
||||||
matches,
|
matches,
|
||||||
|
noteMatch,
|
||||||
lastIndex = 0,
|
lastIndex = 0,
|
||||||
isHorizontal,
|
isHorizontal,
|
||||||
wasHorizontal = true,
|
wasHorizontal = true,
|
||||||
content,
|
content,
|
||||||
|
asideContent,
|
||||||
|
slide,
|
||||||
sectionStack = [],
|
sectionStack = [],
|
||||||
markdownSections = '';
|
markdownSections = '';
|
||||||
|
|
||||||
// iterate until all blocks between separators are stacked up
|
// iterate until all blocks between separators are stacked up
|
||||||
while( matches = reSeparator.exec(markdown) ) {
|
while( matches = reSeparator.exec(markdown) ) {
|
||||||
|
asideContent = null;
|
||||||
|
|
||||||
// determine direction (horizontal by default)
|
// determine direction (horizontal by default)
|
||||||
isHorizontal = reHorSeparator.test(matches[0]);
|
isHorizontal = reHorSeparator.test(matches[0]);
|
||||||
|
@ -80,18 +87,28 @@
|
||||||
|
|
||||||
// pluck slide content from markdown input
|
// pluck slide content from markdown input
|
||||||
content = markdown.substring(lastIndex, matches.index);
|
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 ) {
|
if( isHorizontal && wasHorizontal ) {
|
||||||
// add to horizontal stack
|
// add to horizontal stack
|
||||||
sectionStack.push(content);
|
sectionStack.push(slide);
|
||||||
} else {
|
} else {
|
||||||
// add to vertical stack
|
// add to vertical stack
|
||||||
sectionStack[sectionStack.length-1].push(content);
|
sectionStack[sectionStack.length-1].push(slide);
|
||||||
}
|
}
|
||||||
|
|
||||||
lastIndex = reSeparator.lastIndex;
|
lastIndex = reSeparator.lastIndex;
|
||||||
wasHorizontal = isHorizontal;
|
wasHorizontal = isHorizontal;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// add the remaining slide
|
// add the remaining slide
|
||||||
|
@ -99,15 +116,13 @@
|
||||||
|
|
||||||
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
||||||
for( var k = 0, klen = sectionStack.length; k < klen; k++ ) {
|
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
|
// vertical
|
||||||
else {
|
if(sectionStack[k].propertyIsEnumerable(length) && typeof sectionStack[k].splice === "function") {
|
||||||
markdownSections += '<section '+ attributes +'>' +
|
markdownSections += '<section '+ attributes +'>' +
|
||||||
'<section data-markdown>' + sectionStack[k].map(twrap).join('</section><section data-markdown>') + '</section>' +
|
'<section data-markdown>' + sectionStack[k].map(twrap).join('</section><section data-markdown>') + '</section>' +
|
||||||
'</section>';
|
'</section>';
|
||||||
|
} else {
|
||||||
|
markdownSections += '<section '+ attributes +' data-markdown>' + twrap( sectionStack[k] ) + '</section>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -131,7 +146,7 @@
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
if( xhr.readyState === 4 ) {
|
if( xhr.readyState === 4 ) {
|
||||||
if (xhr.status >= 200 && xhr.status < 300) {
|
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 {
|
} else {
|
||||||
section.outerHTML = '<section data-state="alert">ERROR: The attempt to fetch ' + url + ' failed with the HTTP status ' + xhr.status +
|
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.' +
|
'. Check your browser\'s JavaScript console for more details.' +
|
||||||
|
@ -150,7 +165,7 @@
|
||||||
} else if( section.getAttribute('data-separator') ) {
|
} else if( section.getAttribute('data-separator') ) {
|
||||||
|
|
||||||
var markdown = stripLeadingWhitespace(section);
|
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) );
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue