wrap markdown in script text/template to fix parsing errors (closes #146 #155 #162)

README.md

@@ -35,15 +35,17 @@ Markup heirarchy needs to be ``<div class="reveal"> <div class="slides"> <sectio
 
 ### Markdown
 
-It's possible to write your slides using Markdown. To enable Markdown simply add the ```data-markdown``` attribute to your ```<section>``` elements and reveal.js will automatically load the JavaScript parser. 
+It's possible to write your slides using Markdown. To enable Markdown simply add the ```data-markdown``` attribute to your ```<section>``` elements and reveal.js will automatically load the JavaScript parser. Additionally, you should wrap the contents in a ```<script type="text/template">``` like the example below to avoid HTML parsing errors.
 
-This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) which in turn uses [showdown](https://github.com/coreyti/showdown/). This is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks). Updates to come.
+This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) which in turn uses [showdown](https://github.com/coreyti/showdown/). This is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
 
 ```html
 <section data-markdown>
+	<script type="text/template">
 		## Page title
 		
 		A paragraph with some text and a [link](http://hakim.se).
+	</script>
 </section>
 ```
 

index.html

@@ -36,6 +36,7 @@
 
 			<!-- Any section element inside of this container is displayed as a slide -->
 			<div class="slides">
+
 				<section>
 					<h1>Reveal.js</h1>
 					<h3>HTML Presentations Made Easy</h3>
@@ -129,17 +130,18 @@
 				</section>
 
 				<section data-markdown>
+					<script type="text/template">
 						## Markdown support
 						
 						For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
 
-					<pre><code contenteditable style="margin-top: 20px;">&lt;section data-markdown&gt;
+							<section data-markdown>
 							  ## Markdown support
 
 							  For those of you who like that sort of thing. 
 							  Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
-&lt;/section&gt;
+							</section>
-					</code></pre>
+					</script>
 				</section>
 
 				<section>
@@ -314,6 +316,7 @@ function linkify( selector ) {
 					<h1>THE END</h1>
 					<h3>BY Hakim El Hattab / hakim.se</h3>
 				</section>
+
 			</div>
 			
 		</div>

lib/js/data-markdown.js

@@ -2,13 +2,15 @@
 // Modified by Hakim to handle Markdown indented with tabs
 (function(){
 
-    var slides = document.querySelectorAll('[data-markdown]');
+    var sections = document.querySelectorAll( '[data-markdown]' );
 
-    for( var i = 0, len = slides.length; i < len; i++ ) {
+    for( var i = 0, len = sections.length; i < len; i++ ) {
-        var elem = slides[i];
+        var section = sections[i];
+
+        var template = section.querySelector( 'script' );
 
         // strip leading whitespace so it isn't evaluated as code
-        var text = elem.innerHTML;
+        var text = ( template || section ).innerHTML;
 
         var leadingWs = text.match(/^\n?(\s*)/)[1].length,
             leadingTabs = text.match(/^\n?(\t*)/)[1].length;
@@ -20,8 +22,7 @@
             text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
         }
 
-        // here, have sum HTML
+        section.innerHTML = (new Showdown.converter()).makeHtml(text);
-        elem.innerHTML = (new Showdown.converter()).makeHtml(text);
     }
 
 })();