# 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