diff options
| -rw-r--r-- | README.md | 12 | ||||
| -rw-r--r-- | index.html | 21 | ||||
| -rw-r--r-- | lib/js/data-markdown.js | 13 |
3 files changed, 26 insertions, 20 deletions
@@ -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> ``` @@ -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;"><section data-markdown> - ## 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). -</section> - </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 84398a0..80f8eb0 100644 --- 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 |