reveal.js is a Javascript library embedding presentations to HTML.
Starting boilerplate with markdown functionality is as follows:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/black.min.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script>
<script>
Reveal.initialize({
plugins: [ RevealMarkdown ]
});
</script>
</body>
The above code doesn’t include slides yet.
It can be implemented any part inside of <body>.
If you want, you can have even multiple presentation blocks in 1 page, initializing each DOM.
Slides
Slides should have .reveal and .slides tags as their container.
<div class="reveal" style="height: 350px"><div class="slides">
<section data-markdown data-separator="^---">
<text-area data-template>
# Presentation title
---
### Page title
Contents
</text-area>
</section>
</div></div>
The above code have a boilerplate for markdown plugin.
Markdown slides can be written inside <text-area></text-area>.
- CSS
heightfor outermostdivcontrols rendering for embedded usage.
Multiple sections
You can utilize markdown notation for separating each page with ---.
This is quite handy for text based presentations.
And more, you can have multiple sections other than markdown:
<div class="reveal" style="height: 350px"><div class="slides">
<section>
<div style="color: lightgreen"><u>This is decorated message</u></div>
</section>
<section data-markdown data-separator="^---">
<text-area data-template>
# Presentation title
---
### Page title
Contents
</text-area>
</section>
</div></div>
While markdown plugin provides
several attributes, HTML section can be written with full CSS functionality.
This composition results:
Customize
You can switch
themes for basic visual choices.
Furthermore, original themes can be written with SCSS.
Official plugins and 3rd party ones extends its functionality.
Chuma Takahiro
Related articles
