[TOC] # Hack MD指令 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要用小寫 --- ## 引用(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 UF8uR6Z6KLc %}` {%youtube UF8uR6Z6KLc %} --- ## 圖表功能 以下圖表功能請參考[官方教學文件][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