# Talkie.js HTML/CSS/JavaScript Presentation Library Go to [repository](https://github.com/ahomu/Talkie)
## Feature - Markdown support - Code highlighting - Responsive scaling - FullScreen mode (press `F`) - Pointer mode (press `B`) - Layout attributes (WIP) - Progress indicator
## 機能 (Japanese) - Markdown書けるよ (੭ु˵＞ヮ＜)੭ु⁾⁾ - ハイライトばっちり _:(°ω° 」∠):＿ - レスポンシブだよ (^з^)-☆ - フルスクリーン対応 (press `F`) (｡•̀ᴗ-)✧ - ポインターだせるよ (press `B`) ( ꒪◡꒪) - 属性でレイアウトできるよ (*´▽`) - 進行度インジゲータあるよ c⌒っ.ω.)っ
## in HTML ```html
Section Title
Lorem ipsum dolor sit amet, consect...
The bullets
Foo
Bar
Baz
```
## in Markdown ```html ``` You can use `template` element instead of `script`.
## Backface image & filter ```html
Title
foo, bar, baz, qux...
```
# Backface (北極) `backface-filter="blur(3px) brightness(.9)"`
## FullScreen mode When you press the **"f"** key will be a full-screen mode. "f" or "Esc" key Press and then exit.
## Pointer mode When you press the **"b"** key, the pointer `visibility` is toggled
## Presenter note Open developer tools, will show presenter notes ----- Yes! This is your note!
## Custom key binding & control (1/2) ```javascript var talkie = Talkie({wide:false}); talkie.key('space').subscribe(talkie.next$); talkie.key('s').subscribe(talkie.next$); talkie.key('n').subscribe(talkie.next$); talkie.key('a').subscribe(talkie.prev$); talkie.key('p').subscribe(talkie.prev$); ```
## Custom key binding & control (2/2) ```javascript window.next = function() { talkie.next$.next(); }; window.prev = function() { talkie.prev$.next(); }; window.jump = function(num) { talkie.jump$.next(num); }; ```
## All Options ```typescript interface TalkieOptions { wide?: boolean; control?: boolean; pointer?: boolean; progress?: boolean; backface?: boolean; notransition?: boolean; } Talkie(options); ```
## Enjoy! [ahomu/Talkie - GitHub.com](https://github.com/ahomu/Talkie)