xobs
/
lca20-bt
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)

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
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>
```

21
index.html
View File

@ -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>

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

@ -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);
}
})();