diff --git a/demo.md b/demo.md new file mode 100644 index 00000000..1efe5f94 --- /dev/null +++ b/demo.md @@ -0,0 +1,29 @@ +# External markdown + + + +## Slide 1.1 + +Content 1.1 + + +## Slide 1.2 + +Content 1.2 + + + +## Slide 2 + +Content 2.1 + + + +## Slide 3.1 + +Content 3.1 + + +## Slide 3.2 + +Content 3.2 diff --git a/index-markdown.html b/index-markdown.html new file mode 100644 index 00000000..367c8798 --- /dev/null +++ b/index-markdown.html @@ -0,0 +1,116 @@ + + + + + + + reveal.js - The HTML Presentation Framework + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ + + + + + + + diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js index b1660a1b..ae4d08b0 100644 --- a/plugin/markdown/markdown.js +++ b/plugin/markdown/markdown.js @@ -6,11 +6,7 @@ throw 'The reveal.js Markdown plugin requires Showdown to be loaded'; } - var sections = document.querySelectorAll( '[data-markdown]' ); - - for( var i = 0, len = sections.length; i < len; i++ ) { - var section = sections[i]; - var notes = section.querySelector( 'aside.notes' ); + var stripLeadingWhitespace = function(section) { var template = section.querySelector( 'script' ); @@ -27,11 +23,125 @@ text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); } - section.innerHTML = (new Showdown.converter()).makeHtml(text); + return text; + + }; + + var slidifyMarkdown = function(markdown, separator, vertical) { + + separator = separator || '^\n---\n$'; + + var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'), + reHorSeparator = new RegExp(separator), + matches, + lastIndex = 0, + isHorizontal, + wasHorizontal = true, + content, + sectionStack = [], + markdownSections = ''; + + // iterate until all blocks between separators are stacked up + while( matches = reSeparator.exec(markdown) ) { + + // determine direction (horizontal by default) + isHorizontal = reHorSeparator.test(matches[0]); + + if( !isHorizontal && wasHorizontal ) { + // create vertical stack + sectionStack.push([]); + } + + // pluck slide content from markdown input + content = markdown.substring(lastIndex, matches.index); + + if( isHorizontal && wasHorizontal ) { + // add to horizontal stack + sectionStack.push(content); + } else { + // add to vertical stack + sectionStack[sectionStack.length-1].push(content); + } + + 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
tags + for( var k = 0, klen = sectionStack.length; k < klen; k++ ) { + markdownSections += typeof sectionStack[k] === 'string' + ? '
' + sectionStack[k] + '
' + : '
' + sectionStack[k].join('
') + '
'; + } + + return markdownSections; + }; + + var querySlidingMarkdown = function() { + + var sections = document.querySelectorAll( '[data-markdown]'), + section; + + for( var j = 0, jlen = sections.length; j < jlen; j++ ) { + + section = sections[j]; + + if( section.getAttribute('data-markdown').length ) { + + var xhr = new XMLHttpRequest(), + url = section.getAttribute('data-markdown'); + + xhr.onreadystatechange = function () { + if( xhr.readyState === 4 ) { + section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical') ); + } + }; + + xhr.open('GET', url, false); + xhr.send(); + + } else if( section.getAttribute('data-separator') ) { + + var markdown = stripLeadingWhitespace(section); + section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical') ); + + } + } + + }; + + var queryMarkdownSlides = function() { + + var sections = document.querySelectorAll( '[data-markdown]'); + + for( var j = 0, jlen = sections.length; j < jlen; j++ ) { + + makeHtml(sections[j]); + + } + + }; + + var makeHtml = function(section) { + + var notes = section.querySelector( 'aside.notes' ); + + var markdown = stripLeadingWhitespace(section); + + section.innerHTML = (new Showdown.converter()).makeHtml(markdown); if( notes ) { section.appendChild( notes ); } - } -})(); \ No newline at end of file + }; + + querySlidingMarkdown(); + + queryMarkdownSlides(); + +})();