# Talkie.js HTML/CSS/JavaScript Presentation Library 支持markdown语法的网页幻灯片插件
## Feature - Markdown support - Code highlighting - Responsive scaling - FullScreen mode (press `F`) - Pointer mode (press `B`) - Layout attributes (WIP) - Progress indicator
## 特点 - 支持Markdown语法 - 支持语法高亮 - 支持键盘控制 - 支持移动触摸设备 - 支持全屏模式 - 支持背景图片和过滤器 - 显示当前进度条
## 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; linkShouldBlank?: boolean; } Talkie(options); ```
## Enjoy! [ahomu/Talkie - GitHub.com](https://github.com/ahomu/Talkie)