HTML5ベースのスライドつくる場合はJadeみたいなインデントでブロックを表現するような形式のほうが見やすいし書きやすい。
html2jadeを使えば、逆にhtmlをjadeに変換して読みやすく出来るのでオススメです。
impress.jsのindex.htmlをjadeに変換してみた。読みやすい。
#bored.step.slide(data-x='-1000', data-y='-1500')
q
| Aren't you just
b bored
| with all those slides-based presentations?
.step.slide(data-x='0', data-y='-1500')
q
| Don't you think that presentations given strong in modern browsers
| shouldn't strong copy the limits
| of 'classic' slide decks?
.step.slide(data-x='1000', data-y='-1500')
q
| Would you like to strong impress your audience
| with strong stunning visualization
| of your talk?
#title.step(data-x='0', data-y='0', data-scale='4')
span.try then you should try
h1
| impress.js
sup *
span.footnote
sup *
| no rhyme intended
#its.step(data-x='850', data-y='3000', data-rotate='90', data-scale='5')
p
| It's a
strong presentation tool
br
| inspired by the idea behind
a(href='http://prezi.com') prezi.com
br
| and based on the
strong power of CSS3 transforms and transitions
| in modern browsers.
#big.step(data-x='3500', data-y='2100', data-rotate='180', data-scale='6')
p
| visualize your
b big
span.thoughts thoughts
#tiny.step(data-x='2825', data-y='2325', data-z='-3000', data-rotate='300', data-scale='1')
p
| and
b tiny
| ideas