<!-- .slide: data-background="media/background.png" --> # 教會另一半用`Python`做投影片

### Benjamin Chen 

- EXPERIENCES - Data Scientist - Momagic Inc. - Linker Networks Inc. - 某補教機構講師 - 2021 iThome 鐵人賽 - 我不太懂 AI，可是我會一點 Python 和 Azure - Skills - Machine Learning - IoT - Email: benjamin0901@gmail.com

<!-- .slide: data-background="media/background.png" --> ## Outline - 一開始是這樣的... - I Got Revelation - 複習一下 Markdown - 來說一些特別的東西 - 還可以再活潑一點

# 一開始是這樣的... <!-- .slide: data-background="media/python_ninja.jpeg" -->

<!-- .slide: data-background="media/background.png" --> ## 故事開始 - ~~首先你需要男/女朋友~~ <!-- .element: class="fragment" data-fragment-index="2" --> - 但我真的有教會我老婆 <!-- .element: class="fragment" data-fragment-index="3" --> - 實際上故事是從被拜託教 Azure 開始<!-- .element: class="fragment" data-fragment-index="1" -->

<!-- .slide: data-background="media/background.png" --> ## 為什麼不用一般簡報軟體？ 取得課程需求與簡報母片後～ <br> 我發現太久沒做投影片，覺得排版超煩......

<!-- .slide: data-background="media/background.png" --> 對方應該也覺得我超煩...... <img src=media/LINE_capture.JPG width="50%"></img>

<!-- .slide: data-background="media/background.png" --> 反正，我就是只想專注在課程內容，不想花時間排版～～

<!-- .slide: data-background="media/background.png" --> ## 然後，我就找到了`Revelation` > - 釋義 > - 揭示 > - 被揭露的真相 > - 出乎意料的事 > - 天啟

<!-- .slide: data-background="media/background.png" --> # I Got `Revelation`

<!-- .slide: data-background="#999999" data-auto-animate data-auto-animate-unmatched="fade" --> ## Revelation = <img src=media/reveal-black-text.svg style="height: 100px;"> <img src=media/plus.png style="height: 100px;"> <img src=media/python.png style="height: 150px;">

<!-- .slide: data-background="#999999" data-auto-animate data-auto-animate-unmatched="fade" --> ## Revelation = <img src=media/reveal-black-text.svg style="height: 200px;"> <img src=media/plus.png style="height: 100px;"> <img src=media/python.png style="height: 150px;">

<!-- .slide: data-background="#999999" data-auto-animate data-auto-animate-unmatched="fade" --> ## Revelation = <img src=media/reveal-black-text.svg style="height: 150px;"> <img src=media/plus.png style="height: 100px;"> <img src=media/python.png style="height: 250px;">

<!-- .slide: data-background="#999999" --> ## reveal js 可以利用`markdown`做出`html5`投影片效果 

<!-- .slide: data-background="#999999" --> ## Revelation 幾乎只要用`Markdown`就可以快速做出舒服的投影片 

<!-- .slide: data-background="media/background.png" --> ## Start Revelation 1. 安裝revelation ```bash pip3.9 install revelation ``` 2. 安裝reveal.js ```bash revelation installreveal ``` 3. 產生簡報資料夾 ```bash revelation mkpresentation your_folder ``` ``` |____ your_folder/ | |____ slides.md | |____ config.py | |____ media/ ```

<!-- .slide: data-background="media/background.png" --> ## 開始簡報 ```bash revelation start slides.md ``` ``` Theme not detected, running without custom theme. Starting revelation server... * Running on http://localhost:4000/ (Press CTRL+C to quit) ```

<!-- .slide: data-background="media/background.png" --> ## 輸出HTML 初次產生 ``` revelation mkstatic slides.md ``` 用`--force`蓋過之前的檔案 ``` revelation mkstatic slides.md --force ``` ``` |____ your_folder/ | |____ slides.md | |____ config.py | |____ media/ | |____ output/ | | |____ media/ | | |____ static/ | | |____ index.html ```

<!-- .slide: data-background="media/background.png" --> ## config file `config.py` ```python # Reveal markdown slide separator REVEAL_SLIDE_SEPARATOR = "---" REVEAL_VERTICAL_SLIDE_SEPARATOR = "----" # Themes # beige, black, blood, league, moon, night, serif, simple, sky, # solarized, white REVEAL_THEME = "black" REVEAL_CONFIG = { "transition": "slide", # none/fade/slide/convex/concave/zoom } ```

## 隔頁 ``` 第1頁 按右鍵到第2頁 －－－ 第2頁 按下鍵到第2.1頁 －－－－ 第2.1頁 按右鍵到第3頁 －－－ 第3頁 ```

<!-- .slide: data-background-color="#000000" data-background-iframe="static/revealjs/demo.html#/themes" -->

<!-- .slide: data-background-color="#000000" data-background-iframe="static/revealjs/demo.html#/transitions" -->

## 其他效果，自己回家玩～

<!-- .slide: data-background="media/background.png" --> # 複習一下 Markdown

<!-- .slide: data-background="media/background.png" --> ## 標題 # # H1 ## ## H2 ### ### H3 #### #### H4

<!-- .slide: data-background="media/background.png" --> ## 無序清單與多階層 - 第一層 - 第二層 - 第三層 ``` - 第一層 - 第二層 - 第三層 ```

<!-- .slide: data-background="media/background.png" --> ## 有序清單與多階層混搭 1. *斜體* 2. **粗體** 3. ***粗斜體*** - ~~刪除線~~ ```python 1. *斜體* 2. **粗體** 3. ***粗斜體*** - ~~刪除線~~ ```

<!-- .slide: data-background="media/background.png" --> ## 引用別人的話 魷魚遊戲 > "무궁화꽃이피었습니다" > > "無窮花已經盛開了" ``` > "무궁화꽃이피었습니다" > > "無窮花已經盛開了" ```

<!-- .slide: data-background="media/background.png" data-transition="zoom" --> ## 表格 | Stock | Price | Shares | | ---- | ------ | ------ | | Apple | $144.1 | 7 | | TSM | $114.74| 36 | ``` | Stock | Price | Shares | | ---- | ------ | ------ | | Apple | $144.1 | 7 | | TSM | $114.74| 36 | ```

<!-- .slide: data-background="media/background.png" --> ## Code 在字裡行間塞一段 print- `print("hello world")` ``` 在字裡行間塞一段 print- `print("hello world")` ```

<!-- .slide: data-background="media/background.png" --> ## Code ```python class Hello(object): def __init__(self, text): self.text = text def __call__(self): print(self.text) ``` 用三個反引號backticks `  夾出程式碼區塊 ```python class Hello(object): def __init__(self, text): self.text = text def __call__(self): print(self.text) ```

<!-- .slide: data-background="media/background.png" --> ## Code 整段縮排四個空白鍵也可以 ``` class Hello(object): def __init__(self, text): self.text = text def __call__(self): print(self.text) ``` 但後面還有，更有趣的東西～

<!-- .slide: data-background="media/background.png" --> ## 插入連結或者圖片 - [Revelation](https://github.com/humrochagf/revelation) -  ``` - [Revelation](https://github.com/humrochagf/revelation) -  ```

# 來說一些特別的東西

## 改變背景顏色 <!-- .slide: data-background="#999999" data-background-transition="zoom" --> - [Revelation](https://github.com/humrochagf/revelation) -  ``` <!-- .slide: data-background="#999999" --> - [Revelation](https://github.com/humrochagf/revelation) -  ```

## 改變背景圖片 <!-- .slide: data-background="media/python_ninja.jpeg" --> ### [Revelation](https://github.com/humrochagf/revelation) ``` <!-- .slide: data-background="media/python_ninja.jpeg" --> [Revelation](https://github.com/humrochagf/revelation) ```

## 圖片也可以影分身 <!-- .slide: data-background="media/python_ninja.jpeg" data-background-size="300px" data-background-repeat="repeat" --> ### [Revelation](https://github.com/humrochagf/revelation) ``` <!-- .slide: data-background="media/python_ninja.jpeg" \ data-background-size="300px" \ data-background-repeat="repeat" --> [Revelation](https://github.com/humrochagf/revelation) ```

## 再花俏一點可以把影片當背景 <!-- .slide: data-background-color="#ffffff" data-background-video="media/Korean_Translator.mp4" data-background-video-loop --> [Reveal.js- video background](https://revealjs.com/backgrounds/#video-backgrounds) ``` <!-- .slide: data-background-video="media/Korean_Translator.mp4" data-background-video-loop --> [Reveal.js- video background](https://revealjs.com/backgrounds/#video-backgrounds) ```

<!-- .slide: data-background-color="#ffffff" data-background-iframe="https://revealjs.com/backgrounds/#iframe-backgrounds" --> ## 或者直接嵌入網頁 [Reveal.js- iframe backgrounds](https://revealjs.com/backgrounds/#iframe-backgrounds) ``` <!-- .slide: data-background-iframe= "https://revealjs.com/backgrounds/#iframe-backgrounds" --> ```

## 要看清明上河圖也是可以 <!-- .slide: data-background-video="media/river.mov" data-background-video-loop data-background-video-muted --> `config.py` ```python REVEAL_CONFIG = { "parallaxBackgroundImage": "media/river.jpeg", "parallaxBackgroundSize": "4478px 1222px", "parallaxBackgroundHorizontal": 400, "parallaxBackgroundVertical": 200, } ```

<!-- .slide: data-background="media/background.png" --> ## Code 也可以這樣呈現 可以凸顯特定程式碼 ```python [1-2|3,5] class Hello(object): def __init__(self, text): self.text = text def __call__(self): print(self.text) ``` ```python [1-2|3,5] class Hello(object): def __init__(self, text): self.text = text def __call__(self): print(self.text) ```

## 數學式 LaTeX $$ V^*(s) = max_a \sum _{s'}P(s'|s;a)[R(s,a,s'), +\gamma V^*(s')], \forall s $$ ``` $$ V^*(s) = max_a \sum _{s'}P(s'|s;a)[R(s,a,s'), +\gamma V^*(s')], \forall s $$ ``` 但是，需要在`index.html`，做一點小小的手腳，才會呈現數學式： ```js Reveal.initialize({ math: { // 下面這一行註解掉就好了 // mathjax: 'static/mathjax/MathJax.js', config: 'TeX-AMS_HTML-full', ```

<!-- .slide: data-background="media/background.png" --> ## Fragment - 讓你的台詞 <!-- .element: class="fragment highlight-current-red" data-fragment-index="1" --> - 一條一條 <!-- .element: class="fragment" data-fragment-index="2" --> - 依序出現<!-- .element: class="fragment" data-fragment-index="3" --> ``` - 讓你的台詞 <!-- .element: class="fragment" data-fragment-index="1" --> - 一條一條 <!-- .element: class="fragment" data-fragment-index="2" --> - 依序出現<!-- .element: class="fragment" data-fragment-index="3" --> ``` 其他效果<!-- .element: class="fragment" data-fragment-index="4" --> https://revealjs.com/fragments/<!-- .element: class="fragment" data-fragment-index="5" -->

<!-- .slide: data-background="#999999" --> ## 概觀模式 ### Press  按下 `esc` 進入概觀模式 

<!-- .slide: data-background="#999999" --> ## 暫停 ### Press  按下 `B` or `.` 可以暫停投影片。 <aside class="notes"> This slide has fragments which are also stepped through in the notes window. </aside>

<!-- .slide: data-background="#999999" --> ## Speaker View ### Press  按下 `S` 可以進入 Speaker View 。  Note: 可以寫下只有自己看得到的小抄。

<!-- .slide: data-background="#999999" --> ## Speaker View - 編輯 markdown ``` 按下 `S` 可以進入 Speaker View 。  Ｎote: 可以寫下只有自己看得到的小抄。 ``` - 編輯 `config.py` ```python # "postMessageEvents": True, ```

<!-- .slide: data-background="media/background.png" --> ## 輸出 pdf - 目前只能用 Google Chrome 和 Chromium 輸出 PDF - 在 **URL** 後加上`?print-pdf` - 例如：file:///Users/ben/slide/test/output/index.html?print-pdf#/

<!-- .slide: data-background="#555555" --> ## 輸出 pdf - 記得勾選<font color="#91B4F3">背景圖形</font> - 如果印出一片空白，可以考慮直接設定背景顏色，或者乾脆換 Theme

# 還可以再活潑一點

<!-- .slide: data-auto-animate --> <img src="media/python_ninja.jpeg" style="height: 100px;"> <p style="font-size: 2em">This will fade out</p> <div data-id="4" style="background: rgba(255,0,0,1); position: absolute; top: 55%; left: 33.2%; width: 30px; height: 30px; margin: -50px 0 0 -50px; border-radius: 400px;"></div> - 圖片、文字和物件都能動 - 甚至程式碼也能 Animate

<!-- .slide: data-auto-animate --> <img src="media/python_ninja.jpeg" style="height: 300px;"> <p style="opacity: 0.2; margin-top: 50px; font-size: 1em;">This will fade out</p> <div data-id="4" style="background: rgba(207,126,207,0.2); position: absolute; top: 59%; left: 0%; width: 1000px; height: 280px;"></div> - 圖片、文字和物件都能動 - 重點只有一行 `<!-- .slide: data-auto-animate -->` - 甚至程式碼也能 Animate

### Sample code in markdown file ```[1-7|9|11-18] <!-- .slide: data-auto-animate --> # Page 1 <img src="media/python_ninja.jpeg" style="height: 100px;"> <p style="font-size: 2em">This will fade out</p> <div data-id="4" style="background: rgba(255,0,0,1); position: absolute; top: 55%; left: 33.2%; width: 30px; height: 30px; margin: -50px 0 0 -50px; border-radius: 400px;"></div> - 圖片、文字和物件都能動 - 甚至程式碼也能 Animate －－－ <!-- .slide: data-auto-animate --> # Page 2 <img src="media/python_ninja.jpeg" style="height: 300px;"> <p style="opacity: 0.2; margin-top: 50px; font-size: 1em;">This will fade out</p> <div data-id="4" style="background: rgba(207,126,207,0.2); position: absolute; top: 59%; left: 0%; width: 1000px; height: 280px;"></div> - 圖片、文字和物件都能動 - 重點只有一行 `<!-- .slide: data-auto-animate -->` - 甚至程式碼也能 Animate ```

## Animate Code <!-- .slide: data-auto-animate --> <pre data-id="code-animation"> <code data-trim data-line-numbers> @app.route("/callback", methods=["POST"]) def callback(): """ LINE bot webhook callback """ # get X-Line-Signature header value signature = request.headers["X-Line-Signature"] print(signature) body = request.get_data(as_text=True) print(body) </code> </pre>

## Animate Code <!-- .slide: data-auto-animate --> <pre data-id="code-animation"> <code data-trim data-line-numbers="1-3|7,9|11-14"> @app.route("/callback", methods=["POST"]) def callback(): """ LINE bot webhook callback """ # get X-Line-Signature header value signature = request.headers["X-Line-Signature"] print(signature) body = request.get_data(as_text=True) print(body) try: HANDLER.handle(body, signature) except InvalidSignatureError: print( "Invalid signature. Please check your channel access token/channel secret." ) abort(400) return "OK" </code> </pre>

### Animate Code in Markdown file ```python [1|3,4,8,9|6,7|11|16|20-22] <!-- .slide: data-auto-animate --> # Page 1 <pre data-id="code-animation"> <code data-trim data-line-numbers> code 1 code 2 </code> </pre> －－－ <!-- .slide: data-auto-animate --> # Page 2 <pre data-id="code-animation"> <code data-trim data-line-numbers="1,7|4-6"> code 1 code 2 code 3 ... ... </code> </pre> ```

## 投影片 <img src=media/qrcode.png width="50%"></img>

# [Hackmd.io](https://hackmd.io)

# Thank you!