測試 - HackMD

# HackMD簡介 <hr>  * 方便的線上Markdown書寫平台 * 如何用瀏覽器做簡報 *:question:* * 本份簡報便是以HackMD製作 --- ## HackMD是什麼 <hr>  * 一個提供線上寫作的網站: hackmd.io * HackMD 是個跨平台的Markdown即時協作筆記 * 使用[Markdown](/c/tutorials-tw/%2Fs%2Fbasic-markdown-formatting-tw)語法快速編輯、立即排版展示 * 用瀏覽器就能立即編輯與展示 --- ## HackMD的功用 <hr>  * 筆記、備忘等知識蒐集 * 教學文件 * 部落格文章撰寫 * 技術型的簡報 * 多人即時共筆 --- ## 筆記類型 1. 個人筆記 2. 協作筆記 <hr> * 可設定權限 * 可選擇是否公開 --- ## HackMD的模式 <hr>  * :page_facing_up: 文章模式 * :book: 書本模式 * 類似MS-Word的主控文件+子文件 * 用一個主控文章加入其他文章的連結 * :performing_arts: 簡報模式 * 形成瀏覽器簡報式的網頁 --- ## 選單功能 * 版本（修改歷程）控制 * 筆記範本 * 匯出/匯入 * 下載 ---- ## 選單功能－匯出/匯入 * Dropbox * Google Drive * Gist * 剪貼簿 (匯入) ---- ## 選單功能－下載 * Markdown * HTML－完整的HTML，含樣式表 * 純HTML－以`<div>`形成的HTML * ODF (以前是PDF) --- ## 如何開始？ 1. 註冊HackMD帳號，可使用下列帳號登入： * Facebook * Twitter * GitHub * Dropbox * Google 2. 建立新筆記 3. 切換編輯/瀏覽模式 4. 閱讀[使用教學](/c/tutorials-tw/) --- # HackMD簡報模式全攻略 * 製作HackMD簡報的步驟 * 主題樣式與轉場動畫 * 特殊按鍵進入主講者網頁 * 簡報聚光燈 --- ## 投影片分頁 * 大章節投影片之間以三個減號`---`分隔，換頁：:arrow_backward: :arrow_forward: * 小章節則用四個減號`----`分隔，換頁： :arrow_up_small: :arrow_down_small: * 分隔減號上下各空一列空行 * 跳到第幾張投影片：`[文字](#號碼)` - 如：`[跳到第3.3頁](#/2/2)` [跳到第3.3頁](#/2/2) - 井號的數字由網址取出 --- ## 投影片選項 - 投影片選項寫在檔案最開頭的 YAML 區域內 - YAML第一行與最後一行是3個減號 ### 範例 ``` --- title: 取代標題一的檔案名稱 tags: 標籤1, 標籤2 disqus: hackmd # 討論區 slideOptions: #投影片選項, 兩個空白開頭 theme: sky #主題 transition: zoom #轉場動畫 --- ``` *[YAML]: YAML（/ˈjæməl/，尾音類似camel駱駝）是一個可讀性高，用來表達資料序列化的格式。 --- ### 預設主題樣式 :::info :bulb:主題名稱以小寫指定。 ::: 主題 | 說明 --- | --- black | 預設，黑底白字 white | 白底黑字 league | 漸層黑底白字 sky | 漸層天空藍黑字 beige | 漸層米色黑字 ---- ### 預設主題樣式(續) 主題 | 說明 --- | --- simple | 白底黑字 serif | 漸層淡灰黑字 blood | 黑底白字(陰影)，超連結紅色 night | 黑底白字，超連結橘色 moon | 靛藍底米白字 solarized | 淡黃底藍字 --- ## 轉場動畫 :::info :bulb:轉場動畫名稱以小寫指定。 ::: 1. none 2. fade (褪色) 3. slide (滑動) 4. convex (凸) 5. concave (凹) 6. zoom (前進放大，倒退縮小) > 加-in表示進場，-out表示退場 ---- ### 單一投影片設定 * 指定轉場動畫 `` * 指定轉場速度；default / fast / slow `` ---- ### 單一投影片設定(續1) * 指定背景圖片或顏色 `` * 指定背景圖片或顏色 `` * 指定背景 `` ---- ### 單一投影片設定(續2) * 列表分段（Fragment）顯示控制 `` --- ## 特殊按鍵 * S：主講者網頁 * `Note:`後的文字是主講者的備忘，只會顯示在主講者網頁 * B或.：暫停投影 --- title: 常用Markdown語法與HackMD的擴充 tags: hackmd, markdown slideOptions: theme: blood transition: slide --- <style> code { color: red; background: #dddddd; } .reveal p code { background-color: #dddddd; dis-play: inline-block; border-radius: 7px; } </style> ## ![markdown](http://bit.ly/2LNAwnp =128x128) 常用Markdown語法與HackMD的擴充 * 標題 * 清單 * 字體變化 * ... --- ## 標題 * 簡報名稱預設為最大字體的標題一 * 以`# `開頭（半形井號加一個空白） * 次要標題可以用標題二`## `或標題三`## ` * 標題一至標題六，字體由大到小 * `###### tags: `設定筆記的標籤 ---- `# 這是標題一：最大字體` # 這是標題一：最大字體 ---- `## 這是標題二：次大字體` ## 這是標題二：次大字體 `### 這是標題三` ### 這是標題三 `#### 這是標題四` #### 這是標題四 ---- `##### 這是標題五` ##### 這是標題五 `###### 這是標題六` ##### 這是標題六 --- ## 清單（列表） 1. 無序清單用半形星號、加號或減號，再一個空白 2. 有序清單用數字、點（或右括號）與空白 * 如`1. `、`2. `、`3，) ` * 數字不拘，系統會自行排序 3. 待辦清單：清單後面再加中括號與空白或x(小寫) * 如`- [ ] Todo item 1` * 如`- [x] Todo item 2` * 按Tab或2個空白形成第二層清單 ---- ### 無序清單 ``` * 第1點 * 第1.1點 * 第1.2點 * 第1.3點 * 第2點 * 第3點 ``` * 第1點 * 第1.1點 * 第1.2點 * 第1.3點 * 第2點 * 第3點 ---- ### 有序清單 ``` 1. 第1點 1. 第1.1點 2. 第1.2點 1. 第2點 5. 第3點另一段： 16. 第16點 1. 第17點 ``` ---- 1. 第1點 1. 第1.1點 2. 第1.2點 1. 第2點 5. 第3點另一段： 16. 第16點 1. 第17點 ---- ### 待辦清單 - [x] 買啤酒 - [ ] 買牛奶 - [ ] 買尿布 - [X] x要用小寫 --- ## 引用(Quote) * 以大於與空白`> `表示 * `>> `第二層引用 * `>>> `第三層引用 * 以此類推 ### 擴充語法 * `> [name=姓名] [time=時間] [color=顏色碼]` ---- ### 引用(Quote) ``` Steve Jobs told: > 1. Stay hungry. Stay foolish. > [name=史提夫·賈柏斯] [time=June 12, 2005] [color=red] >> 2.「如果每個人都要去舊金山，那麼，花許多時間*爭執*走哪條**路並不是問題**。但如果有人要去舊金山，有人要去聖地牙哥，這樣的爭執就很浪費時間了。」[color=purple] ``` ---- Steve Jobs told: > 1. Stay hungry. Stay foolish. > [name=史提夫·賈柏斯] [time=June 12, 2005] [color=red] >> 2.「如果每個人都要去舊金山，那麼，花許多時間*爭執*走哪條**路並不是問題**。但如果有人要去舊金山，有人要去聖地牙哥，這樣的爭執就很浪費時間了。」[color=purple] *[Steve Jobs]: Apple Inc. ex-CEO --- ## 字體變化 * 斜體：*一個星號或底線* * 粗體：**兩個星號或底線** * 刪除線：~~兩個Tilde(波浪號)~~ * 底線：++兩個加號++ * 高亮：==兩個等號== * 上標：兩個`^`，如 `1024^16^`=1024^16^ * 下標：兩個`~`，如 `H~2~O~2~`=H~2~O~2~ ---- ### 字體變化 ``` * 斜體：*一個星號或底線* * 粗體：**兩個星號或底線** * 刪除線：~~兩個Tilde(波浪號)~~ * 底線：++兩個加號++ * 高亮：==兩個等號== * 上標：兩個`^`，如 `1024^16^`=1024^16^ * 下標：兩個`~`，如 `H~2~O~2~`=H~2~O~2~ ``` --- ## Emoji (繪文字，表情符號) * 格式：用兩個冒號夾住，`:Emoji代碼:` :tada: :heart: `:tada: :heart:` * [Emoji代碼清單](https://www.webfx.com/tools/emoji-cheat-sheet/) --- ## 程式碼 * 文字之間使用：前後用一個倒引號(`，Back-quote)夾住 * 一段獨立指令碼區塊 * 第一行與最後一行用三個倒引號開頭 * 第一行倒引號後面可以接程式語言名稱 * `程式語言名稱=`則會以語法強調格式呈現 * `程式語言名稱=開始行號`：行號1由指定行號開始 ---- ### 用```java= ```java= public static void main(String[] args) throws Exception { System.out.println("Hello World!"); } ``` ### 用```java=120 ```java=120 public static void main(String[] args) throws Exception { System.out.println("Hello World!"); } ``` --- ## 連結與圖片 * 連結格式：`[文字](網址)`或`[文字](網址 "提示文字")` * 圖片格式：`![文字](網址)`或`![文字](網址 =寬x高)` ---- `相關網址：[簡睿隨筆](http://jdev.tw/blog "技術分享的網站，歡迎參觀")` 相關網址：[簡睿隨筆](http://jdev.tw/blog "技術分享的網站，歡迎參觀") `![markdown.tw](https://markdown.tw/images/208x128.png)` `![markdown.tw](https://markdown.tw/images/208x128.png =48x48)` ![markdown.tw](https://markdown.tw/images/208x128.png) ![markdown.tw](https://markdown.tw/images/208x128.png =48x48) --- ## 參考式連結 - 連結格式：`[文字][參考代碼]` ➡ [文字][參考代碼] - 需要重覆使用的超連結即可使用此語法 - 縮寫：遊標顯示提示文字（前後要有空白），如：使用 Markdown 語法，語法：`*[Markdown]: ` ``` [參考代碼]: https://jdev.tw *[Markdown]: 一個輕量的標記語言 ``` [參考代碼]: https://jdev.tw *[Markdown]: 一個輕量的標記語言 --- ## 註腳 * 格式：`附註[^註腳自訂代碼]` ，如:附註[^註腳自訂代碼] `[^註腳自訂代碼]: 註腳說明` [^註腳自訂代碼]: 註腳說明 --- ## 外部資源參考 * 格式：`{%資源名稱參考代碼 %}` #### 資源名稱 * youtube * vimeo * gist * slideshare * speakerdeck * pdf * hackmd 引入HackMD的另一篇筆記 `{% hackmd S1rGsKHVS %}` ---- ### YouTube影片 `{%youtube tmiD065kuWA %}` {%youtube tmiD065kuWA %} --- ## 圖表功能以下圖表功能請參考[官方教學文件][mathjax] * MathJax * UML循序圖 * 流程圖 * Graphviz * 五線譜 [mathjax]: https://hackmd.io/c/tutorials-tw/%2Fs%2FMathJax-and-UML-tw --- ## 提示區塊 * 格式： * 第一行是`:::提示種類` * 最後一行是`:::` * 提示種類： * success * info * warning * danger ---- `:::info ... :::` :::info :bell: 訊息 Stay hungry. Stay foolish. > [name=史提夫] [time=June 12, 2005] [color=red] ::: `:::danger ... :::` :::danger :warning: 警告！系統發生錯誤！ ::: --- ## 表格 * 簡單格式：用 | (pipe or bar)分隔 ``` 表頭1 | 表頭2 | 表頭3 --- | --- | --- (1,1) | (1,2) | (1,3) (2,1) | (2,2) | (2,3) (3,1) | (3,2) | (3,3) ``` 表頭1 | 表頭2 | 表頭3 --- | --- | --- (1,1) | (1,2) | (1,3) (2,1) | (2,2) | (2,3) (3,1) | (3,2) | (3,3) ---- ## 表格（續） * 複雜格式 (左靠，置中，右靠) ``` | 表頭1 | 表頭2 | 表頭3 | |:---|:---:|---:| | 1 | 2 | 3 | | 4 | 5 | 6 | | 7 | 8 | 9 | ``` | 表頭1 | 表頭2 | 表頭3 | |:---|:---:|---:| | 1 | 2 | 3 | | 4 | 5 | 6 | | 7 | 8 | 9 | --- ## 參考 * [支援的YAML選項](https://hackmd.io/s/HkJ8ZwgM) * [數學式與圖表][mathjax] * [Emoji清單](https://www.webfx.com/tools/emoji-cheat-sheet/) [mathjax]: https://hackmd.io/c/tutorials-tw/%2Fs%2FMathJax-and-UML-tw