====== Markup and Code-Behind Examples for reveal.js ======

===== Markup =====

==== Animate Slide Transitions ====

The ''data-auto-animate'' decorator causes automatic display transition styling of matching header markup on slides.

<code html>
<section data-auto-animate>
  <h2>Slide One</h2>
  <p>Contents</p>
</section>
<section data-auto-animate>
  <h2>Slide Two</h2>
  <p>Contents</p>
</section>
</code>

==== Block Quote ====

<code html>
<blockquote>
  Text of block quote.
</blockquote>
</code>

==== Fragments ====

Show text incrementally on a slide:

<code html>
<section>
  <h2>Fragments</h2>
  <p>Hit the next arrow...</p>
  <p class="fragment">... to step through ...</p>
  <p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
</section>
</code>

==== Image Backgrounds ====

<code html>
<section data-background="image.png">
  <h2>Data Backgrounds</h2>
</section>
</code>

==== Scale Image ====

<code html>
<img src="image.png" class="stretch" />
</code>

==== Small Text ====

Nice formatting for long paragraphs.

<code html>
<small>
Text of paragraph.
</small>
</code>

==== Syntax Highlighting ====

<WRAP center round box 60%>
<nowiki>
<p>
<pre><code class="language-c">
printf("Hello!\n");
</code></pre>
</p>
</nowiki>
</WRAP>

===== Customization =====

==== Default Background Image ====

Add this //after// the Reveal.initialize block:

<code javascript>
for (var slide of document.getElementsByTagName('section')) {
	if (!(slide.getAttribute('data-background') || slide.getAttribute('data-background-video') || slide.getAttribute('data-background-iframe') || slide.getAttribute('data-background-image'))) {
		slide.setAttribute('data-background-image', 'img/default-background.png')
	}
}
</code>

==== Make Text Stand Out ====

For text that is hard to read, you can make it stand out by enclosing it in a translucent box.

First, create a css/custom.js file, and add this style:

<code css>
.background-box-black {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 20px;
}
</code>

Include the custom CSS in your index.html:

<code html>
<link rel="stylesheet" href="css/custom.css">
</code>

Then, use it in a slide like this:

<code html>
<section>
  <div class="background-box-black">
    <p>Some text!</p>
  </div>
</section>
</code>

Here's some additional CSS for enhancing text display:

<code css>
.green-bold {
  color: green;
  font-weight: bold;
}

.red-bold {
  color: red;
  font-weight: bold;
}

.blue-bold {
  color: blue;
  font-weight: bold;
}

.simple-quote {
  background-color: rgba(0, 0, 0, 0.8);
  font-style: italic;
}

.force-italic {
  font-style: italic;
}
</code>