HackMD + Markdown 常用語法

HackMD是即時的共同協作筆記

它可以讓您用Markdown語法

無痛的協作文件與討論

同時支援手機、平板與電腦！

HackMD官網

簡報

原始檔

1. HackMD 語法

換頁符號

按鍵 語法
→ —
↓ —-


這頁可以往下喔

1
2
3
4
5
6
7
換頁符號顏色
正常：藍色
錯誤：橘色
若看到橘色請多加一個enter換行
換頁解析錯誤的話檢查換頁符號前後是否有空白

這是往下的頁面

更換投影片背景顏色

背景顏色換成#CC0000囉

1
<!-- .slide: data-background="#CC0000" -->

內容加上淡出動畫

1
<!-- .element: class="fragment" data-fragment-index="1" -->
  • data-fragment-index: 出場順序
1
2
3
4
- 淡出1 <!-- .element: class="fragment" data-fragment-index="1" -->
- 淡出2 <!-- .element: class="fragment" data-fragment-index="1" -->
- 淡出3 <!-- .element: class="fragment" data-fragment-index="3" -->
- 淡出4 <!-- .element: class="fragment" data-fragment-index="4" -->
  • 淡出1
  • 淡出2
  • 淡出3
  • 淡出4

轉場動畫

1
<!-- .slide: data-transition="zoom" -->
1
2
3
轉場效果共有
fade / slide / convex / concave / zoom

fade

1
<!-- .slide: data-transition="fade" -->

slide

1
<!-- .slide: data-transition="slide" -->

convex

1
<!-- .slide: data-transition="convex" -->

concave

1
<!-- .slide: data-transition="concave" -->

zoom

1
<!-- .slide: data-transition="zoom" -->

設定不同的進入及離開效果

1
<!-- .slide: data-transition="fade-in convex-out" -->
1
2
3
結尾可設定不同的進入及離開
進場：-in
離開：-out

以上就是所有轉場動畫進入及離開的效果

自訂轉場的速度

1
<!-- .slide: data-transition-speed="fast" -->

你可以使用：
default / fast / slow

default

1
<!-- .slide: data-transition-speed="default" -->

fast

1
<!-- .slide: data-transition-speed="fast" -->

slow

1
<!-- .slide: data-transition-speed="slow" -->

以上就是所有轉場動畫速度設定的效果

2. Markdown 語法

標題-效果

H1

H2

H3

H4

H5
H6

標題-語法

1
2
3
4
5
6
# H1
## H2
### H3
#### H4
##### H5
###### H6

清單-效果

  1. 第一則列表項目
  2. 另一個項目
    • 無序的次清單。
  3. 數字本身是否排序並不重要，通通使用相同的數字也可以。
    1. 排序的次清單。
  4. 另一個項目

清單-語法

1
2
3
4
5
6
7
8
9
10
11
1. 第一則列表項目
2. 另一個項目
  * 無序的次清單。
1. 數字本身是否排序並不重要，通通使用相同的數字也可以。
  1. 排序的次清單。
4. 另一個項目
* 可以使用星號建立無序清單
- 或是短橫線（負號）
+ 使用半形加號也可以

強調語法-效果

強調，例如義大利斜體，可以使用 asterisks 或 underscores。

加重語氣的強調，例如粗體，可以用 asterisks 或 underscores。

你還可以混用這兩種 asterisks and underscores。

替文字加上刪除線，像這樣 Scratch this.

強調語法-語法

1
2
3
4
5
6
7
強調，例如義大利斜體，可以使用 *asterisks* 或 _underscores_。
加重語氣的強調，例如粗體，可以用 **asterisks** 或 __underscores__。
你還可以混用這兩種 **asterisks and _underscores_**。
替文字加上刪除線，像這樣 ~~Scratch this.~~

連結設定-效果

這是一個行內連結

這是一個帶有標題的行內連結

這是一個參考連結

這是一個對應到 Git 倉儲檔案的相對參考連結

參考標的物也可以使用數字

直接使用文字對應也可以 這段文字連到參考項目

參考項目可以寫在文檔的最後，有點像書內的註解（註腳）。

連結設定-語法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[這是一個行內連結](https://www.google.com)
[這是一個帶有標題的行內連結](https://www.google.com "Google's Homepage")
[這是一個參考連結][Arbitrary case-insensitive reference text]
[這是一個對應到 Git 倉儲檔案的相對參考連結](../blob/master/LICENSE)
[參考標的物也可以使用數字][1]
直接使用文字對應也可以 [這段文字連到參考項目]
參考項目可以寫在文檔的最後，有點像書內的註解（註腳）。
[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[這段文字連到參考項目]: http://www.reddit.com

圖片-效果

這是我們的 logo （將滑鼠移到圖片上會顯示圖片標題）：

行內格式：
alt text

參考連結格式：
alt text

圖片-語法

1
2
3
4
5
6
7
8
9
這是我們的 logo （將滑鼠移到圖片上會顯示圖片標題）：
行內格式：
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo 標題文字範例一")
參考連結格式：
![alt text][logo]
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo 標題文字範例二"

程式代碼與語法高亮標示-效果

1
2
var s = "JavaScript syntax highlighting";
alert(s);
1
2
s = "Python syntax highlighting"
print s
1
2
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.

程式代碼與語法高亮標示-語法

表格-效果

  • table1
Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
  • table2
Markdown Less Pretty
Still renders nicely
1 2 3

表格-語法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
冒號（Colons）是用來對齊的（擺左齊左、擺右齊右，都擺就置中）。
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
最外圍的豎線（|）不是絕對需要，在原始文檔中你可以不要太在意美觀，實際轉成網頁或電子書時會呈現得很好。你也可以在表格內使用行內格式。
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

水平分隔線

1
2
3
4
5
6
7
8
9
10
11
12
13
三個或三個以上的符號，必須在獨立的一行，前後不能有其他文字。
---
短橫線（Hyphens）
***
半形星號（Asterisks）
___
下底線（Underscores）

iframe

1
<hexoescape>0</hexoescape>