4e0d34413b
Now any Hugo section can be configured to generate a presentation without altering its type, and the theme is more easily copied into existing sites without conflicting with any preexisting layouts.
129 lines
4.1 KiB
HTML
Executable file
129 lines
4.1 KiB
HTML
Executable file
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>reveal.js - Markdown Demo</title>
|
|
|
|
<link rel="stylesheet" href="../../css/reveal.css">
|
|
<link rel="stylesheet" href="../../css/theme/white.css" id="theme">
|
|
|
|
<link rel="stylesheet" href="../../lib/css/zenburn.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="reveal">
|
|
|
|
<div class="slides">
|
|
|
|
<!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
|
|
<section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
|
|
|
|
<!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
|
|
<section data-markdown data-separator="---">
|
|
<script type="text/template">
|
|
## Demo 1
|
|
Slide 1
|
|
---
|
|
## Demo 1
|
|
Slide 2
|
|
---
|
|
## Demo 1
|
|
Slide 3
|
|
</script>
|
|
</section>
|
|
|
|
<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
|
|
<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
|
|
<script type="text/template">
|
|
## Demo 2
|
|
Slide 1.1
|
|
|
|
--
|
|
|
|
## Demo 2
|
|
Slide 1.2
|
|
|
|
---
|
|
|
|
## Demo 2
|
|
Slide 2
|
|
</script>
|
|
</section>
|
|
|
|
<!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
|
|
<section data-markdown>
|
|
<script type="text/template">
|
|
A
|
|
|
|
---
|
|
|
|
B
|
|
|
|
---
|
|
|
|
C
|
|
</script>
|
|
</section>
|
|
|
|
<!-- Slide attributes -->
|
|
<section data-markdown>
|
|
<script type="text/template">
|
|
<!-- .slide: data-background="#000000" -->
|
|
## Slide attributes
|
|
</script>
|
|
</section>
|
|
|
|
<!-- Element attributes -->
|
|
<section data-markdown>
|
|
<script type="text/template">
|
|
## Element attributes
|
|
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
|
|
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
|
|
</script>
|
|
</section>
|
|
|
|
<!-- Code -->
|
|
<section data-markdown>
|
|
<script type="text/template">
|
|
```php
|
|
public function foo()
|
|
{
|
|
$foo = array(
|
|
'bar' => 'bar'
|
|
)
|
|
}
|
|
```
|
|
</script>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../lib/js/head.min.js"></script>
|
|
<script src="../../js/reveal.js"></script>
|
|
|
|
<script>
|
|
|
|
Reveal.initialize({
|
|
controls: true,
|
|
progress: true,
|
|
history: true,
|
|
center: true,
|
|
|
|
// Optional libraries used to extend on reveal.js
|
|
dependencies: [
|
|
{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
|
{ src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
{ src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|
{ src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
|
{ src: '../notes/notes.js' }
|
|
]
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|