add instructions to features that require a local web server (closes #732, #673, #559)

- new default separator for slide attributes
- new default separator for element attributes
Illustrate both, in html comments.

Gruntfile.js

@@ -69,7 +69,8 @@ module.exports = function(grunt) {
 				globals: {
 					head: false,
 					module: false,
-					console: false
+					console: false,
+					unescape: false
 				}
 			},
 			files: [ 'Gruntfile.js', 'js/reveal.js' ]

README.md

@@ -54,31 +54,38 @@ 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. The ```data-charset``` attribute is optional and specifies which charset to use when loading the external file.
 
+When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup).
+
 ```html
-<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:" data-charset="iso-8859-15"></section>
+<section data-markdown="example.md"  
+         data-separator="^\n\n\n"  
+         data-vertical="^\n\n"  
+         data-notes="^Note:"  
+         data-charset="iso-8859-15">
+</section>
 ```
 
 #### Element Attributes
 
-Special syntax is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
+Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
 
 ```html
 <section data-markdown>
 	<script type="text/template">
-		- Item 1 {.class="fragment" data-fragment-index="2"}
-		- Item 2 {.class="fragment" data-fragment-index="1"}
+		- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
+		- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
 	</script>
 </section>
 ```
 
 #### Slide Attributes
 
-Special syntax is available for adding attributes to the slide `<section>` elements generated by your Markdown.
+Special syntax (in html comment) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
 
 ```html
 <section data-markdown>
 	<script type="text/template">
-	<!-- slide-attributes: data-background="#ff0000" -->
+	<!-- .slide: data-background="#ff0000" -->
 		Mardown content
 	</script>
 </section>
@@ -388,7 +395,7 @@ Reveal.initialize({
 });
 ```
 
-Make sure that the background size is much bigger than screen size to allow for some scrolling.
+Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://lab.hakim.se/reveal-js/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&parallaxBackgroundSize=2100px%20900px).
 
 
 
@@ -499,6 +506,13 @@ By default, Reveal is configured with [highlight.js](http://softwaremaniacs.org/
 </section>
 ```
 
+### Slide number
+If you would like to display the page number of the current slide you can do so using the ```slideNumber``` configuration value.
+
+```javascript
+Reveal.configure({ slideNumber: true });
+```
+
 
 ### Overview mode
 
@@ -585,6 +599,8 @@ reveal.js comes with a speaker notes plugin which can be used to present per-sli
 
 Notes are defined by appending an ```<aside>``` element to a slide as seen below. You can add the ```data-markdown``` attribute to the aside element if you prefer writing notes using Markdown.
 
+When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup).
+
 ```html
 <section>
 	<h2>Some Slide</h2>
@@ -855,7 +871,7 @@ The core of reveal.js is very easy to install. You'll simply need to download a
 
 ### Full setup
 
-Some reveal.js features, like external markdown, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
+Some reveal.js features, like external markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
 
 1. Install [Node.js](http://nodejs.org/)
 

js/reveal.js

@@ -316,8 +316,8 @@ var Reveal = (function(){
 		// Make sure we've got all the DOM elements we need
 		setupDOM();
 
-		// Decorate the slide DOM elements with state classes (past/future)
-		formatSlides();
+		// Resets all vertical slides so that only the first is visible
+		resetVerticalSlides();
 
 		// Updates the presentation to match the current configuration values
 		configure();
@@ -1603,7 +1603,7 @@ var Reveal = (function(){
 		// Re-create the slide backgrounds
 		createBackgrounds();
 
-		formatSlides();
+		sortAllFragments();
 
 		updateControls();
 		updateProgress();
@@ -1613,10 +1613,10 @@ var Reveal = (function(){
 	}
 
 	/**
-	 * Iterates through and decorates slides DOM elements with
-	 * appropriate classes.
+	 * Resets all vertical slides so that only the first
+	 * is visible.
 	 */
-	function formatSlides() {
+	function resetVerticalSlides() {
 
 		var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
 		horizontalSlides.forEach( function( horizontalSlide ) {
@@ -1624,7 +1624,29 @@ var Reveal = (function(){
 			var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) );
 			verticalSlides.forEach( function( verticalSlide, y ) {
 
-				if( y > 0 ) verticalSlide.classList.add( 'future' );
+				if( y > 0 ) {
+					verticalSlide.classList.remove( 'present' );
+					verticalSlide.classList.remove( 'past' );
+					verticalSlide.classList.add( 'future' );
+				}
+
+			} );
+
+		} );
+
+	}
+
+	/**
+	 * Sorts and formats all of fragments in the
+	 * presentation.
+	 */
+	function sortAllFragments() {
+
+		var horizontalSlides = toArray( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) );
+		horizontalSlides.forEach( function( horizontalSlide ) {
+
+			var verticalSlides = toArray( horizontalSlide.querySelectorAll( 'section' ) );
+			verticalSlides.forEach( function( verticalSlide, y ) {
 
 				sortFragments( verticalSlide.querySelectorAll( '.fragment' ) );
 
@@ -3300,17 +3322,20 @@ var Reveal = (function(){
 		getQueryHash: function() {
 			var query = {};
 
-			location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
+			location.search.replace( /[A-Z0-9]+?=([\w\.%-]*)/gi, function(a) {
 				query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
 			} );
 
 			// Basic deserialization
 			for( var i in query ) {
 				var value = query[ i ];
+
+				query[ i ] = unescape( value );
+
 				if( value === 'null' ) query[ i ] = null;
 				else if( value === 'true' ) query[ i ] = true;
 				else if( value === 'false' ) query[ i ] = false;
-				else if( !isNaN( parseFloat( value ) ) ) query[ i ] = parseFloat( value );
+				else if( value.match( /^\d+$/ ) ) query[ i ] = parseFloat( value );
 			}
 
 			return query;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "The HTML Presentation Framework",
   "homepage": "http://lab.hakim.se/reveal-js",
   "subdomain": "revealjs",

plugin/markdown/example.html

@@ -68,20 +68,35 @@
                     </script>
                 </section>
 
+                <!-- Slide attributes -->
+                <section data-markdown>
+                    <script type="text/template">
+                        <!-- .slide: data-background="#000000" -->
+                        ## Slide attributes
+                    </script>
+                </section>
+
+                <!-- Element attributes -->
+                <section data-markdown>
+                    <script type="text/template">
+                        ## Element attributes
+                        - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
+                        - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
+                    </script>
+                </section>
+
                 <!-- Code -->
-                <section>
-                    <section data-markdown>
-                        <script type="text/template">
-                            ```php
-                            public function foo()
-                            {
-                                $foo = array(
-                                    'bar' => 'bar'
-                                )
-                            }
-                            ```
-                        </script>
-                    </section>
+                <section data-markdown>
+                    <script type="text/template">
+                        ```php
+                        public function foo()
+                        {
+                            $foo = array(
+                                'bar' => 'bar'
+                            )
+                        }
+                        ```
+                    </script>
                 </section>
 
             </div>

plugin/markdown/markdown.js

@@ -28,8 +28,8 @@
 
 	var DEFAULT_SLIDE_SEPARATOR = '^\n---\n$',
 		DEFAULT_NOTES_SEPARATOR = 'note:',
-		DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '{\\\.\s*?([^}]+?)}',
-		DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '^.*?<!--\\\sslide-attributes:\\\s(.*?)-->';
+		DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
+		DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
 
 
 	/**
@@ -73,7 +73,7 @@
 				value = attributes[i].value;
 
 			// disregard attributes that are used for markdown loading/parsing
-			if( /data\-(markdown|separator|vertical|notes|attributes)/gi.test( name ) ) continue;
+			if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
 
 			if( value ) {
 				result.push( name + '=' + value );
@@ -97,7 +97,6 @@
 		options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
 		options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
 		options.attributes = options.attributes || '';
-		options.slideAttributesSeparator = options.slideAttributesSeparator || DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR;
 
 		return options;
 
@@ -129,17 +128,14 @@
 		options = getSlidifyOptions( options );
 
 		var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
-			horizontalSeparatorRegex = new RegExp( options.separator ),
-			slideAttributesSeparatorRegex = new RegExp( options.slideAttributesSeparator, 'm' );
+			horizontalSeparatorRegex = new RegExp( options.separator );
 
 		var matches,
 			lastIndex = 0,
 			isHorizontal,
 			wasHorizontal = true,
 			content,
-			sectionStack = [],
-			matchAttributes,
-			slideAttributes = "";
+			sectionStack = [];
 
 		// iterate until all blocks between separators are stacked up
 		while( matches = separatorRegex.exec( markdown ) ) {
@@ -178,35 +174,19 @@
 		for( var i = 0, len = sectionStack.length; i < len; i++ ) {
 			// vertical
 			if( sectionStack[i] instanceof Array ) {
-				// The 'data-xxx' attributes of the first child must be set on the wrapping parent section to be effective
-				// Mainly for data-transition (otherwise, it is ignored for the first vertical slide)
-				firstChild = sectionStack[i][0];
-				matchAttributes = slideAttributesSeparatorRegex.exec( firstChild );
-				slideAttributes = matchAttributes ? matchAttributes[1] : "";
-				dataAttributes = "";
-				if( slideAttributes != "" ) {
-					// http://stackoverflow.com/questions/18025762/javascript-regex-replace-all-word-characters-except-word-characters-between-ch
-					// Keep only data-attributes for the parent slide section.
-					dataAttributes = slideAttributes.replace( /(data-\S+=\"[^\"]+?\")|\w|[\"=]/g, function(a, b) { return b || ''; });
-				}
-				markdownSections += '<section '+ options.attributes + ' ' + dataAttributes + '>';
+				markdownSections += '<section '+ options.attributes +'>';
 
 				sectionStack[i].forEach( function( child ) {
-					matchAttributes = slideAttributesSeparatorRegex.exec( child );
-					slideAttributes = matchAttributes ? matchAttributes[1] : "";
-					child = matchAttributes ? child.replace( slideAttributesSeparatorRegex,"" ) : child
-					markdownSections += '<section ' + slideAttributes + ' data-markdown>' +  createMarkdownSlide( child, options ) + '</section>';
+					markdownSections += '<section data-markdown>' +  createMarkdownSlide( child, options ) + '</section>';
 				} );
 
 				markdownSections += '</section>';
 			}
 			else {
-				matchAttributes = slideAttributesSeparatorRegex.exec( sectionStack[i] );
-				slideAttributes = matchAttributes ? matchAttributes[1] : "";
-				content = matchAttributes ? sectionStack[i].replace( slideAttributesSeparatorRegex,"" ) : sectionStack[i]
-				markdownSections += '<section '+ options.attributes + ' ' + slideAttributes +' data-markdown>' + createMarkdownSlide( content, options ) + '</section>';
+				markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>';
 			}
 		}
+
 		return markdownSections;
 
 	}
@@ -240,12 +220,12 @@
 				xhr.onreadystatechange = function() {
 					if( xhr.readyState === 4 ) {
 						if ( xhr.status >= 200 && xhr.status < 300 ) {
+
 							section.outerHTML = slidify( xhr.responseText, {
 								separator: section.getAttribute( 'data-separator' ),
 								verticalSeparator: section.getAttribute( 'data-vertical' ),
 								notesSeparator: section.getAttribute( 'data-notes' ),
-								attributes: getForwardedAttributes( section ),
-								slideAttributesSeparator: section.getAttribute( 'data-attributes' ),
+								attributes: getForwardedAttributes( section )
 							});
 
 						}
@@ -277,24 +257,12 @@
 					separator: section.getAttribute( 'data-separator' ),
 					verticalSeparator: section.getAttribute( 'data-vertical' ),
 					notesSeparator: section.getAttribute( 'data-notes' ),
-					attributes: getForwardedAttributes( section ),
-					slideAttributesSeparator: section.getAttribute( 'data-attributes' ),
+					attributes: getForwardedAttributes( section )
 				});
 
 			}
 			else {
-				var content = getMarkdownFromSlide( section );
-				var slideAttributesSeparatorRegex = new RegExp( section.getAttribute( 'data-attributes' )  || DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR, 'm' );
-				var matchAttributes = slideAttributesSeparatorRegex.exec( content );
-				if ( matchAttributes ) {
-				  var slideAttributes = matchAttributes[1];
-				  content = content.replace( slideAttributesSeparatorRegex,"" );
-					var slideAttributesRegex = new RegExp( "([^\"= ]+?)=\"([^\"=]+?)\"", 'mg' );
-					while( matchesAttributes = slideAttributesRegex.exec( slideAttributes ) ) {
-						section.setAttribute( matchesAttributes[1], matchesAttributes[2] );
-					}
-				}
-				section.innerHTML = createMarkdownSlide( content );
+				section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
 			}
 		}
 
@@ -319,40 +287,51 @@
 			var classes = matches[1];
 			nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
 			node.nodeValue = nodeValue;
-
 			while( matchesClass = mardownClassRegex.exec( classes ) ) {
 				elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
 			}
+			return true;
 		}
-
+		return false;
 	}
 
 	/**
 	 * Add attributes to the parent element of a text node,
 	 * or the element of an attribute node.
 	 */
-	function addAttributes( element, separator ) {
+	function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
 
-		if( element.childNodes.length > 0 ) {
+		if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
+			previousParentElement = element;
 			for( var i = 0; i < element.childNodes.length; i++ ) {
-				addAttributes( element.childNodes[i], separator );
+				childElement = element.childNodes[i];
+				if ( i > 0 ) {
+					j = i - 1;
+					while ( j >= 0 ) {
+						aPreviousChildElement = element.childNodes[j];
+						if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
+							previousParentElement = aPreviousChildElement;
+							break;
+						}
+						j = j - 1;
+					}
+				}
+				parentSection = section;
+				if( childElement.nodeName ==  "section" ) {
+					parentSection = childElement ;
+					previousParentElement = childElement ;
+				}
+				if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
+					addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
+				}
 			}
 		}
 
-		var nodeValue;
-		var elementTarget;
-
-		// From http://stackoverflow.com/questions/9178174/find-all-text-nodes
-		if( element.nodeType == Node.TEXT_NODE && /\S/.test(element.nodeValue) ) {
-			addAttributeInElement( element, element.parentNode, separator );
-		}
-		if( element.nodeType == Node.ELEMENT_NODE && element.attributes.length > 0 ) {
-			for( var j = 0; j < element.attributes.length; j++ ){
-				var attr = element.attributes[j];
-				addAttributeInElement( attr, element, separator );
+		if ( element.nodeType == Node.COMMENT_NODE ) {
+			if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
+				addAttributeInElement( element, section, separatorSectionAttributes );
 			}
 		}
-
 	}
 
 	/**
@@ -376,9 +355,12 @@
 				var markdown = getMarkdownFromSlide( section );
 
 				section.innerHTML = marked( markdown );
-				addAttributes( 	section, section.getAttribute( 'data-element-attributes' ) ||
+				addAttributes( 	section, section, null, section.getAttribute( 'data-element-attributes' ) ||
 								section.parentNode.getAttribute( 'data-element-attributes' ) ||
-								DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR );
+								DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
+								section.getAttribute( 'data-attributes' ) ||
+								section.parentNode.getAttribute( 'data-attributes' ) ||
+								DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
 
 				// If there were notes, we need to re-add them after
 				// having overwritten the section's HTML

test/test-markdown-attributes.js

@@ -1,47 +0,0 @@
-
-
-Reveal.addEventListener( 'ready', function() {
-
-  QUnit.module( 'Markdown' );
-
-  test( 'Vertical separator', function() {
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
-  });
-
-  test( 'Id on slide', function() {
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
-  });
-
-  test( 'data-background attributes', function() {
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
-    strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
-  });
-
-  test( 'data-transition attributes', function() {
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
-    strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
-  });
-
-  test( 'data-background attributes with default separator', function() {
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
-    strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
-  });
-
-  test( 'data-transition attributes with default separator', function() {
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
-    strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
-    strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
-  });
-
-  test( 'data-transition attributes with inline content', function() {
-    strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
-  });
-
-} );
-
-Reveal.initialize();
-

test/test-markdown-element-attributes.html

@@ -4,7 +4,7 @@
 	<head>
 		<meta charset="utf-8">
 
-		<title>reveal.js - Test Markdown</title>
+		<title>reveal.js - Test Markdown Element Attributes</title>
 
 		<link rel="stylesheet" href="../css/reveal.min.css">
 		<link rel="stylesheet" href="qunit-1.12.0.css">
@@ -13,7 +13,7 @@
 	<body style="overflow: auto;">
 
 		<div id="qunit"></div>
-  		<div id="qunit-fixture"></div>
+		<div id="qunit-fixture"></div>
 
 		<div class="reveal" style="display: none;">
 
@@ -24,19 +24,23 @@
 				<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
 				<section data-markdown data-separator="^\n---\n$" data-vertical="^\n--\n$" data-element-attributes="{_\s*?([^}]+?)}">>
 					<script type="text/template">
-						## Slide 1.1 {_class="fragment fade-out" data-fragment-index="1"}
+						## Slide 1.1
+						<!-- {_class="fragment fade-out" data-fragment-index="1"} -->
 
 						--
 
-						## Slide 1.2 {_class="fragment shrink"}
+						## Slide 1.2
+						<!-- {_class="fragment shrink"} -->
 
-						Paragraph 1 {_class="fragment grow"}
+						Paragraph 1
+						<!-- {_class="fragment grow"} -->
 
-						Paragraph 2 {_class="fragment grow"}
+						Paragraph 2
+						<!-- {_class="fragment grow"} -->
 
-						- list item 1  {_class="fragment roll-in"}
-						- list item 2  {_class="fragment roll-in"}
-						- list item 3  {_class="fragment roll-in"}
+						- list item 1 <!-- {_class="fragment roll-in"} -->
+						- list item 2 <!-- {_class="fragment roll-in"} -->
+						- list item 3 <!-- {_class="fragment roll-in"} -->
 
 
 						---
@@ -45,27 +49,75 @@
 
 
 						Paragraph 1.2  
-						multi-line {_class="fragment highlight-red"}
+						multi-line <!-- {_class="fragment highlight-red"} -->
 
-						Paragraph 2.2 {_class="fragment highlight-red"}
+						Paragraph 2.2 <!-- {_class="fragment highlight-red"} -->
 
-						Paragraph 2.3 {_class="fragment highlight-red"}
+						Paragraph 2.3 <!-- {_class="fragment highlight-red"} -->
 
-						Paragraph 2.4 {_class="fragment highlight-red"}
+						Paragraph 2.4 <!-- {_class="fragment highlight-red"} -->
 
-						- list item 1  {_class="fragment highlight-green"}
-						- list item 2  {_class="fragment highlight-green"}
-						- list item 3  {_class="fragment highlight-green"}
-						- list item 4  {_class="fragment highlight-green"}
-						- list item 5  {_class="fragment highlight-green"}
+						- list item 1 <!-- {_class="fragment highlight-green"} -->
+						- list item 2<!-- {_class="fragment highlight-green"} -->
+						- list item 3<!-- {_class="fragment highlight-green"} -->
+						- list item 4
+						<!-- {_class="fragment highlight-green"} -->
+						- list item 5<!-- {_class="fragment highlight-green"} -->
 
 						Test
 
-						![Example Picture{_class="reveal stretch"}](assets/image2.png)
+						![Example Picture](examples/assets/image2.png)
+						<!-- {_class="reveal stretch"} -->
 
 					</script>
 				</section>
 
+
+
+				<section 	data-markdown data-separator="^\n\n\n"
+									data-vertical="^\n\n"
+									data-notes="^Note:"
+									data-charset="utf-8">
+					<script type="text/template">
+						# Test attributes in Markdown with default separator
+						## Slide 1 Def <!-- .element: class="fragment highlight-red" data-fragment-index="1" -->
+
+
+						## Slide 2 Def
+						<!-- .element: class="fragment highlight-red" -->
+
+					</script>
+				</section>
+
+				<section data-markdown>
+				  <script type="text/template">
+					## Hello world
+					A paragraph
+					<!-- .element: class="fragment highlight-blue" -->
+				  </script>
+				</section>
+
+				<section data-markdown>
+				  <script type="text/template">
+					## Hello world
+
+					Multiple  
+					Line
+					<!-- .element: class="fragment highlight-blue" -->
+				  </script>
+				</section>
+
+				<section data-markdown>
+				  <script type="text/template">
+					## Hello world
+
+					Test<!-- .element: class="fragment highlight-blue" -->
+
+					More Test
+				  </script>
+				</section>
+
+
 			</div>
 
 		</div>

test/test-markdown-element-attributes.js

@@ -5,33 +5,41 @@ Reveal.addEventListener( 'ready', function() {
 	QUnit.module( 'Markdown' );
 
 	test( 'Vertical separator', function() {
-		strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
 	});
 
 
-	test( 'Attributes on vertical slides header', function() {
+	test( 'Attributes on element header in vertical slides', function() {
 		strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
 		strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
 	});
 
-	test( 'Attributes on vertical slides paragraphs', function() {
+	test( 'Attributes on element paragraphs in vertical slides', function() {
 		strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
 	});
 
-	test( 'Attributes on vertical slides list items', function() {
+	test( 'Attributes on element list items in vertical slides', function() {
 		strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.roll-in' ).length, 3, 'found a vertical slide with three list items with class fragment.roll-in' );
 	});
 
-	test( 'Attributes on horizontal slides paragraphs', function() {
+	test( 'Attributes on element paragraphs in horizontal slides', function() {
 		strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
 	});
-	test( 'Attributes on horizontal slides list items', function() {
+	test( 'Attributes on element list items in horizontal slides', function() {
 		strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
 	});
-	test( 'Attributes on horizontal slides list items', function() {
+	test( 'Attributes on element list items in horizontal slides', function() {
 		strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
 	});
 
+	test( 'Attributes on elements in vertical slides with default element attribute separator', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
+	});
+
+	test( 'Attributes on elements in single slides with default element attribute separator', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
+	});
+
 } );
 
 Reveal.initialize();

test/test-markdown-slide-attributes.html

@@ -13,7 +13,7 @@
 	<body style="overflow: auto;">
 
 		<div id="qunit"></div>
-  		<div id="qunit-fixture"></div>
+		<div id="qunit-fixture"></div>
 
 		<div class="reveal" style="display: none;">
 
@@ -25,7 +25,7 @@
 				<section 	data-markdown data-separator="^\n\n\n"
 									data-vertical="^\n\n"
 									data-notes="^Note:"
-									data-attributes="^\s*?--\s(.*?)$"
+									data-attributes="--\s(.*?)$"
 									data-charset="utf-8">
 					<script type="text/template">
 						# Test attributes in Markdown
@@ -34,11 +34,11 @@
 
 
 						## Slide 2
-						-- id="slide2" data-transition="zoom" data-background="#A0C66B"
+						<!-- -- id="slide2" data-transition="zoom" data-background="#A0C66B" -->
 
 
 						## Slide 2.1
-						-- data-background="#ff0000" data-transition="fade"
+						<!-- -- data-background="#ff0000" data-transition="fade" -->
 
 
 						## Slide 2.2
@@ -47,7 +47,7 @@
 
 
 						## Slide 3
-						-- data-transition="zoom" data-background="#C6916B"
+						<!-- -- data-transition="zoom" data-background="#C6916B" -->
 
 
 
@@ -66,11 +66,11 @@
 
 
 						## Slide 2 Def
-						<!-- slide-attributes: id="slide2def" data-transition="concave" data-background="#A7C66B" -->
+						<!-- .slide: id="slide2def" data-transition="concave" data-background="#A7C66B" -->
 
 
 						## Slide 2.1 Def
-						<!-- slide-attributes: data-background="#f70000" data-transition="page" -->
+						<!-- .slide: data-background="#f70000" data-transition="page" -->
 
 
 						## Slide 2.2 Def
@@ -79,7 +79,7 @@
 
 
 						## Slide 3 Def
-						<!-- slide-attributes: data-transition="concave" data-background="#C7916B" -->
+						<!-- .slide: data-transition="concave" data-background="#C7916B" -->
 
 
 
@@ -87,30 +87,30 @@
 					</script>
 				</section>
 
-        <section data-markdown>
-          <script type="text/template">
-            <!-- slide-attributes: data-background="#ff0000" -->
-            ## Hello world
-          </script>
-        </section>
+				<section data-markdown>
+					<script type="text/template">
+						<!-- .slide: data-background="#ff0000" -->
+						## Hello world
+					</script>
+				</section>
 
-        <section data-markdown>
-          <script type="text/template">
-            ## Hello world
-            <!-- slide-attributes: data-background="#ff0000" -->
-          </script>
-        </section>
+				<section data-markdown>
+					<script type="text/template">
+						## Hello world
+						<!-- .slide: data-background="#ff0000" -->
+					</script>
+				</section>
 
-        <section data-markdown>
-          <script type="text/template">
-            ## Hello world
+				<section data-markdown>
+					<script type="text/template">
+						## Hello world
 
-            Test
-            <!-- slide-attributes: data-background="#ff0000" -->
+						Test
+						<!-- .slide: data-background="#ff0000" -->
 
-            More Test
-          </script>
-        </section>
+						More Test
+					</script>
+				</section>
 
 			</div>
 
@@ -122,7 +122,7 @@
 		<script src="../plugin/markdown/markdown.js"></script>
 		<script src="qunit-1.12.0.js"></script>
 
-		<script src="test-markdown-attributes.js"></script>
+		<script src="test-markdown-slide-attributes.js"></script>
 
 	</body>
 </html>

test/test-markdown-slide-attributes.js

@@ -0,0 +1,47 @@
+
+
+Reveal.addEventListener( 'ready', function() {
+
+	QUnit.module( 'Markdown' );
+
+	test( 'Vertical separator', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
+	});
+
+	test( 'Id on slide', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
+	});
+
+	test( 'data-background attributes', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
+	});
+
+	test( 'data-transition attributes', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
+		strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
+	});
+
+	test( 'data-background attributes with default separator', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
+	});
+
+	test( 'data-transition attributes with default separator', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
+		strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
+	});
+
+	test( 'data-transition attributes with inline content', function() {
+		strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
+	});
+
+} );
+
+Reveal.initialize();
+

test/test.js

@@ -11,6 +11,22 @@
 
 Reveal.addEventListener( 'ready', function() {
 
+	// ---------------------------------------------------------------
+	// DOM TESTS
+
+	QUnit.module( 'DOM' );
+
+	test( 'Initial slides classes', function() {
+		var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' )
+
+		strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
+		strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
+		strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
+
+		strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
+
+		ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
+	});
 
 	// ---------------------------------------------------------------
 	// API TESTS