xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Support for notes within markdown

Browse Source
This commit is contained in:
Adam Hepton
2013-06-25 12:15:22 +01:00
parent 235c78a5c8
commit 245efee894
2 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@@ -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:

41
plugin/markdown/markdown.js
View File

@@ -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) );
}
}