# 簡報技法全收藏 一個技法就是一個 section，如果有說明就會在他的section分頁底下。 --- ## section 區隔符號 `---` 用了它，就會隔出新的一頁!! --- ## 分頁符號 `----` 用了它，就會在同一section底下，有新的分頁。 ---- 像是這樣XD --- ## 簡報註解 在 `Note:`, `note:`, `Note:` 底下打字， 通通會變成註解。 圖片也可以顯示在註解裡唷!! NOTE: 這邊是註解。  --- ## 多留一個空白區塊 阿就多一次 `---` 即可。 阿如果是要分頁多一頁，就用 `----` --- ---- 這就是一個空白分頁 ---- --- ## 背景圖片 語法如下，可以是 jpg, png, gif ``` <!-- .slide: data-background="圖片網址" --> ``` ---- <!-- .slide: data-background="https://i.imgur.com/6tUpn6X.gif" --> ---- <!-- .slide: data-background="https://media.giphy.com/media/pO4UHglOY2vII/giphy.gif" --> ---- 圖片會被拉到全滿。 ---- <!-- .slide: data-background="https://i.imgur.com/0Qsjugk.png" --> --- ## CSS-背景圖片變暗 要引用CSS語法自訂。 <style> html.dim .backgrounds { filter: saturate(.7) brightness(.55); transition: filter ease-in-out 500ms; } </style> ---- <!-- .slide: data-background="https://i.imgur.com/Tha3EdX.jpg" --> ---- <!-- .slide: data-background="https://i.imgur.com/Tha3EdX.jpg" data-state="dim" --> 這樣字就會圖現出來! --- ## 做動畫 以下依序出現動畫，如果是一般文字，需要多空一行做區隔，如果是列點，則不用 ---- 這樣會一起出現，即使 index 有做區別也一樣。 這是動畫01 <!-- .element: class="fragment" data-fragment-index="1" --> 這是動畫02 <!-- .element: class="fragment" data-fragment-index="2" --> ---- 這樣就會依序出現 這是動畫01 <!-- .element: class="fragment" data-fragment-index="1" --> 這是動畫02 <!-- .element: class="fragment" data-fragment-index="2" --> 這是動畫03 <!-- .element: class="fragment" data-fragment-index="3" --> 這是動畫03 <!-- .element: class="fragment" data-fragment-index="3" --> ---- 列點不用空一行 - 動畫01 <!-- .element: class="fragment" data-fragment-index="1" --> - 動畫02 <!-- .element: class="fragment" data-fragment-index="2" --> - 動畫03 <!-- .element: class="fragment" data-fragment-index="3" --> - 動畫03 <!-- .element: class="fragment" data-fragment-index="3" --> --- ## HTML-文字靠左 <div style="text-align: left; "> <h2>靠左</h2> 1. 快速搜尋存取最近的筆記 2. 用 HackMD 編輯 GitHub / GitLab 上的 Markdown 檔案 </div> --- ## HTML-註解+靠左 ---- 這置中。 > “那真是太諷刺了，紹安，你離開你師傅繞了一大圈，最後到達的境界，竟然是你不想學 ... 還是要回到故鄉來的，這個四千里長江的盡頭上海，或許正是你的極限也說不定。” ---- 這靠左。 <div class="text-left"> <blockquote> “那真是太諷刺了，紹安，你離開你師傅繞了一大圈，最後到達的境界，竟然是你不想學 ... 還是要回到故鄉來的，這個四千里長江的盡頭上海，或許正是你的極限也說不定。” </blockquote> </div> <style> .reveal .slides .text-left { text-align: left; } </style> --- # <ruby>限時<rt><small style="margin-top: 20px;">即將正式</small></rt>開放</ruby> # {限時|即將正式}開放 兩種語法皆可做到，但是CSS的方式靈活度較大。 ``` # <ruby>限時<rt><small style="margin-top: 20px;">即將正式</small></rt>開放</ruby> ``` ``` # {限時|即將正式}開放 ``` ---- ## {語言|Language}{伺服器|Server}{通訊協定|Protocol} ---- <div style="text-align: left; position: absolute; top: 0; padding-left: 60px;"> <h3> 編輯器或 IDE </h3> <h2 style="writing-mode: vertical-rl; height: 7em; "> <!-- .element: class="fragment" data-fragment-index="1" --> 與<ruby>語言<rt>Language</rt></ruby><ruby>伺服器<rt>Server</rt></ruby> </h2> <h1 style="margin-top: -1.8em; margin-left: 2em;"> 溝通的協定 <!-- .element: class="fragment" data-fragment-index="2" --> </h1> </div> --- ## 程式碼的顏色 其實不算是特別的語法，只是要指名程式碼的類型，就會自動變色 ---- ``` ABC ``` ---- ```{markdown} ABC ``` ---- ```{r} library(dplyr) print('Hello World') ``` ---- ```{python} import pandas print('cool') ``` --- ## 投影片背景顏色 `<!-- .slide: data-background="#ff6a00" -->` ---- <!-- .slide: data-background="#ff6a00" --> ---- 如果用下面這個語法，會變成全局設定。 但是如果要用全局設定，我建議在一開始用 yaml 檔撰寫。 ```{css} <style> .reveal .slide-background { background-color: #ff6a00; } </style> ``` --- ## 顏色渲染+字間距 一開始的 `.condensed-span` 是字與字之間的間隔。 後面的 `margin-left: -0.2em;` 則是整體該行與左邊的距離。 ---- <!-- .slide: data-background="#ffffff" --> <style> .condensed-span > span { margin-left: -.1em; margin-right: -.1em; } </style> <div style="font-size: 3em;" class="condensed-span"> <span style="color: #007EB2;">寫</span> <span style="color: #FF8A00;">文</span> <span style="color: #DB3623;">件</span> <span style="color: #DB3623;">？</span> </div> <div style="font-size: 3em; margin-left: -0.2em;" class="condensed-span"> <!-- .element: class="fragment" data-fragment-index="1" --> <span style="color: #007EB2;">Hack</span> <span style="color: #FF8A00;">M</span> <span style="color: #DB3623;">D</span> </div> --- ## END ``` <div class="large-code"> </div> <style> .reveal .large-code code { font-size: 2em; line-height: 1.8em; } </style> <div class="big-table"> |Markdown 台灣|VSCode 台灣| |:--:|:--:| || |https://bit.ly/2MNfisR|https://bit.ly/2MO833E </div> <style> .reveal section .big-table img { max-width: unset; max-height: unset; } </style> <div class="btn btn-primary thefancybutton"> 上線 </div> <style> .thefancybutton { font-size: 3em; padding: 10px; color: black; background-color: white; border-radius: 25px; width: 3em; display: block; margin: 0 auto; cursor: pointer; user-select: none; transition: background linear 250ms, color linear 250ms; } .thefancybutton:hover { background-color: #fff57c; } .thefancybutton:active { background-color: #9e9100; color: white; } </style> <style> .reveal section img { border: none; background: transparent; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { text-shadow: 1px 1px 14px #0000007a; } html.dim .backgrounds { filter: saturate(.7) brightness(.6); transition: filter ease-in-out 500ms; } </style> <style> .reveal .narrow-h1 h1 { letter-spacing: -5px; } </style> <div class="narrow-h1"> <h1> LSP </h1> <br><br><br><br> <h1> LSP &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; EVERYWHERE </h1> </div> ```