jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
Hakim El Hattab 2012-10-08 09:15:36 -04:00
parent f22e5f85e8
commit 25efef8c4f
3 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -35,15 +35,17 @@ Markup heirarchy needs to be ``<div class="reveal"> <div class="slides"> <sectio
### Markdown ### 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 ```html
<section data-markdown> <section data-markdown>
## Page title <script type="text/template">
## Page title
A paragraph with some text and a [link](http://hakim.se).
A paragraph with some text and a [link](http://hakim.se).
</script>
</section> </section>
``` ```

21
index.html
View file

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

13
lib/js/data-markdown.js
View file

@ -2,13 +2,15 @@
// Modified by Hakim to handle Markdown indented with tabs // Modified by Hakim to handle Markdown indented with tabs
(function(){ (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 // 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, var leadingWs = text.match(/^\n?(\s*)/)[1].length,
leadingTabs = text.match(/^\n?(\t*)/)[1].length; leadingTabs = text.match(/^\n?(\t*)/)[1].length;
@ -20,8 +22,7 @@
text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' ); 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);
} }
})(); })();