-
Notifications
You must be signed in to change notification settings - Fork 55
Home
Hacker Slides allows the creation of HTML5 presentations using the reveal.js framework. It has a built-in markdown editor (using github flavoured markdown) and a preview.
You can add images using standard html tags, but why not do something more fancy and pull an image from Davros:
<img src="https://sandstorm:hfd6jhf89JHGdf98udsl@api-31052a61d12babd65be678a416e5ss.server.net/remote.php/webdav/logo.png" width=400 style="background-color:white;"/>
add iframes also using standard html
<iframe src="https://server.net" width="600" height="200"></iframe>
To access the features of reveal.js to customise the look and transition of slides, we can insert commands using the following example syntax (which will add a background image to a slide):
<!-- .slide: data-background="image_url" -->
<!-- .slide: data-background="#dddddd" -->
<!-- .slide: data-background="image_url" -->
<!-- .slide: data-background="image.png" data-background-repeat="repeat" data-background-size="100px" -->
<!-- .slide: data-background-video="video.mp4,video.webm" -->
can use animgifs too
<!-- .slide: data-background-iframe="https://yourserver.com/coolpage" -->
You can use different transitions for text versus background
eg:
<!-- .slide: data-background="#2d9e3a" data-transition="slide" data-background-transition="zoom"-->
choice of transitions:
- none
- fade
- slide
- convex
- concave
- zoom
Place this after the element that should come up incrementally (a fragment)
<!-- .element: class="fragment" data-fragment-index="2"-->
notice that you can change order there too by using the index
Try the tutorial available at https://www.markdowntutorial.com/ for basic tips Or you can visit https://www.markdownguide.org/ to get some background on syntax and a getting started guide.
- many of the transitions and background effects don't render in the preview. you may need to open the presentation and refresh to see the effects.