# Hacker's Tiny Slide Deck
## (Or HTSD in short)
### A feature demonstration
Press ➡️ (right arrow) or swipe left to go to the next slide.
_9th Dec 2019_
---
## Keyboard shortcuts
⬅️ (left arrow) or _swipe right gesture_ to show the previous slide
➡️ (right arrow) or _swipe left gesture_ to show the next slide
`Home` to show the first slide
`End` to show the last slide
`Shift+F` to toggle fullscreen
---
## Code snippet
An implementation in JavaScript to calculate the [Fibonacci number], to
demonstrate syntax highlighting with [Prism.js]:
``` javascript
/* iterative implementation */
function fibonacci(n) {
let a = 1
let b = 0
let temp
while (n >= 0) {
temp = a
a = a + b
b = temp
n -= 1
}
return b
}
```
(You might have to scroll to reach here, and that's intentional.)
---
## Usage
1. Prepare a Markdown document, like the [example][example.md]
you're looking at currently. Separate content between intended slides
with `---` (three dashes, these become as `
` tags in the html
conversion).
2. Append a `
```
We use the following CSS to make the font-size in the code snippets of
this slide smaller:
``` css
/* select the html code block in the 7th slide */
.htsd-slide:nth-of-type(7) pre code {
font-size: 0.6rem;
}
```
…but instead of relying on slide numbers in building CSS selectors,
there's a better way (see the next slide).
---
## Styling customization, generated ids
HTSD generates id attributes for each slide from the highest header
level contained in the slide. This makes styling selected slides
easier.
Let's paint the `` below red:
``` css
#htsd-slide--styling-customization--generated-ids .red-block {
margin-top: 1em;
width: 5em;
height: 2em;
background-color: red;
}
```
---
## Other customizations
See the bottom of the [Markdown source][example.md] of this slide deck
and the [README].
Being tiny, you can easily hack the implementation for your own needs!
---
# End
Thank you!
The code is available at GitHub:
[hackers-tiny-slide-deck]
[CSS Custom Properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
[Fibonacci number]: https://en.wikipedia.org/wiki/Fibonacci_number
[Prism.js]: https://prismjs.com/
[README]: https://github.com/tkareine/hackers-tiny-slide-deck/blob/master/README.md
[example.md]: https://raw.githubusercontent.com/tkareine/hackers-tiny-slide-deck/master/example.md
[hackers-tiny-slide-deck]: https://github.com/tkareine/hackers-tiny-slide-deck/
[marked]: https://github.com/markedjs/marked