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

diff --git a/README.md b/README.md
index 5ad4a8aa0b618594a439a54487065ca278fc6192..8511f90a2903e716d7371705ca43162ad3951b71 100644 (file)
--- a/README.md
+++ b/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>
-       ## Page title
-       
-       A paragraph with some text and a [link](http://hakim.se).
+       <script type="text/template">
+               ## Page title
+               
+               A paragraph with some text and a [link](http://hakim.se).
+       </script>
 </section>
 ```
 

diff --git a/index.html b/index.html
index b5625c91f7f51b19f7d92e7edeb8093608c9c70c..ce10815ce39e11b49772372a0da49b54d43595ae 100644 (file)
--- a/index.html
+++ b/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>
-                                       ## 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).
+                                       <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;
-  ## Markdown support
+                                                       <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;
-                                       </code></pre>
+                                                         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).
+                                                       </section>
+                                       </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>

diff --git a/lib/js/data-markdown.js b/lib/js/data-markdown.js
index 84398a0eb37a87ab026cd4240db9c8694d26ee3d..80f8eb01b0b0680a21ae023d7c388af234510421 100644 (file)
--- a/lib/js/data-markdown.js
+++ b/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++ ) {
-        var elem = slides[i];
+    for( var i = 0, len = sections.length; i < len; 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
-        elem.innerHTML = (new Showdown.converter()).makeHtml(text);
+        section.innerHTML = (new Showdown.converter()).makeHtml(text);
     }
 
 })();
\ No newline at end of file