From 25f3884bf4deb315aaf9a5236ec1c05f85e3ff42 Mon Sep 17 00:00:00 2001 From: Lars Kappert Date: Tue, 29 Jan 2013 23:49:17 +0100 Subject: [PATCH 1/3] Support for external markdown files, including configurable (vertical) slide separator --- demo.md | 29 +++++++++ index-markdown.html | 105 ++++++++++++++++++++++++++++++ plugin/markdown/markdown.js | 126 +++++++++++++++++++++++++++++++++--- 3 files changed, 252 insertions(+), 8 deletions(-) create mode 100644 demo.md create mode 100644 index-markdown.html diff --git a/demo.md b/demo.md new file mode 100644 index 0000000..1efe5f9 --- /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 0000000..f46575b --- /dev/null +++ b/index-markdown.html @@ -0,0 +1,105 @@ + + + + + + + reveal.js - The HTML Presentation Framework + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ +
+ + +
+ +
+ +
+
+ + + + + + + + diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js index b1660a1..8d40019 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 queryMarkdownSlides = 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') ); + + } + } + + querySlides(); + + }; + + var querySlides = 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 + }; + + queryMarkdownSlides(); + +})(); From 5dd63e4919b58bde83591590bacf37a1f091fa2a Mon Sep 17 00:00:00 2001 From: Lars Kappert Date: Tue, 29 Jan 2013 23:59:57 +0100 Subject: [PATCH 2/3] More/better examples in markdown demo --- index-markdown.html | 39 +++++++++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/index-markdown.html b/index-markdown.html index f46575b..367c879 100644 --- a/index-markdown.html +++ b/index-markdown.html @@ -38,33 +38,44 @@
- -
+ +
- + +
+ +
+ +
From 7207122c75137c0d2c7dfd0e1d9a1a0e9bf0a88f Mon Sep 17 00:00:00 2001 From: Lars Kappert Date: Wed, 30 Jan 2013 00:09:02 +0100 Subject: [PATCH 3/3] Slightly refactored "slidify" flow --- plugin/markdown/markdown.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugin/markdown/markdown.js b/plugin/markdown/markdown.js index 8d40019..ae4d08b 100644 --- a/plugin/markdown/markdown.js +++ b/plugin/markdown/markdown.js @@ -81,7 +81,7 @@ return markdownSections; }; - var queryMarkdownSlides = function() { + var querySlidingMarkdown = function() { var sections = document.querySelectorAll( '[data-markdown]'), section; @@ -112,11 +112,9 @@ } } - querySlides(); - }; - var querySlides = function() { + var queryMarkdownSlides = function() { var sections = document.querySelectorAll( '[data-markdown]'); @@ -142,6 +140,8 @@ }; + querySlidingMarkdown(); + queryMarkdownSlides(); })();