Hackmd.io使用指南

發表於 | 分類於 | | 閱讀次數: |
| 字數統計: 2,490

簡介

HackMD 是一個跨平台的Markdown即時協作筆記。所以你可以和朋友們在電腦、平板甚至是手機上同一時間製作你們的筆記。最方便的就是，你可以在首頁透過Facebook、Twitter、GitHub、Dropbox以及Google來登入HackMD。

分享功能

你可以輕易的複製文件的網址來分享此文件。

權限設置

在頁面的右上方有個小按鈕，你可以透過以下選項來更改權限：
隨意：任何人都可以編輯以及瀏覽這份筆記。
可編輯：已經登入的使用者才可以編輯這個筆記。（客人可以瀏覽）
限制：已經登入的使用者可以編輯這個筆記。（禁止客人瀏覽）
鎖定：只有擁有者可以更改這份筆記。（客人可瀏覽）
保護：只有擁有者可以更改這份筆記。（禁止客人瀏覽）
私有：只有擁有者可以更改與檢視這份筆記。

只有筆記的擁有者可以更改權限。

模式轉換

電腦 & 平板
檢視：只看到結果。
同時：同時看到兩邊。
編輯：只看到編輯器。

手機
檢視：只看到結果。
編輯：只看到編輯器。

匯入和匯出

你可以在點擊Menu功能後，從 Dropbox 、Google Drive 、Gitgist 匯入 .md 或是從剪貼簿Clipboard 匯入。至於匯出也一樣如此。

下載格式

你可以將此Markdown文件在下載的時候轉換成以下格式：

  • MarkDown
  • HTML
  • RAW HTML
  • ODF(beta)

上載圖片

上傳圖片
只要按下這個按鈕
或是 拖放 圖片到編輯器，甚至 貼上 圖片也可以喔！
這會自動上傳圖片至 imgur，啥都不必煩惱了 🤖

Emoji功能

你可以在HackMD自由的使用表情符號
😭 😓 😪 😴 🙄 🤔 😍 😘 😗 😁 😆 😅 😂

完整的表情符號列表在這裡

簡報模式&書本模式

除此之外，HackMD還具備了讓你將MarkDown文件變成簡報模式和書本模式的功能。那樣你就可以直接用此來進行你的Presentation或者輕鬆的向看電子書那樣，閱讀你的MarkDown文件。

目錄功能

在同時模式裡面，你可以再右下角找到目錄的小按鈕 。當你按下之後，他會顯示出你當前所在的區塊，以及完整的目錄表。若想跳轉到其他區塊，你只需要點擊目錄裡面列出的章節題目就可。

Sublime Text快捷鍵

可以在這網站找到一些快捷鍵來提升你的文件處理的效率。

Markdown自動完成功能

提供完整的 Markdown 自動完成與提示。

  • 表情符號：輸入:
  • 程式碼區塊：輸入以下格式
  • 標頭：輸入#
  • 參考：輸入[]
  • 外部：輸入{}
  • 圖片：輸入!

程式碼區塊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}

如果想要行號，在表明程式語言之後輸入 =以及想處於的行號碼=101。
您也可以指定開始行號，如下所示，行號從101開始。

這就是顯示後的樣子。

或是可以接續上一個程式碼區塊的行號，使用 =+。

本人用Python Code的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import sys
from sympy.solvers import solve
from sympy import Symbol

# This comes from https://github.com/sourcekris/RsaCtfTool/blob/master/wiener_attack.py
# He made it, and I am incorporating it into my Factorizer. 

# A reimplementation of pablocelayes rsa-wiener-attack for this purpose
# https://github.com/pablocelayes/rsa-wiener-attack/

class WienerAttack(object):
    def rational_to_contfrac (self, x, y):
        a = x//y
        if a * y == x:
            return [a]
        else:
            pquotients = self.rational_to_contfrac(y, x - a * y)
            pquotients.insert(0, a)
            return pquotients

標籤

如同以下方式來使用標籤，它們會顯示在您的歷史紀錄。
要寫tags: + 筆記 教程 作業

顯示結果如下

YAML metadata

提供描述筆記的資訊，以進階設定瀏覽行為，詳細請至上連結。

  • robots: 設定網路機器人 meta。
  • lang: 設定瀏覽器顯示語言。
  • dir: 設定文字方向。
  • breaks: 設定是否使用分行。
  • mathjax: 設定是否使用 mathjax。

清單功能

  • 待辦
    • 打東東
    • 喝珍珠奶茶
    • 玩CTF

引用區塊標籤

你可以使用以下語法，表明自己的 姓名、時間與顏色 並與其他的引用區塊做區別。
[name=Milo] [time=Sun, October 22, 2017 9:59 PM] [color=#907bf7]

也支援巢狀引用區塊喔！
[name=Milo] [time=Sun, October 22, 2017 10:00 PM] [color=red]

顯示結果如下

視頻

  • Youtube
    用這格式輸入可公開Youtube視頻鏈接的代號
    例子：輸入{},然後在裡面加上%youtube CJ9xqHAdFjM %

  • Vimeo
    用這格式輸入可公開Vimeo視頻鏈接的代號
    例子：輸入{},然後在裡面加上%vimeo 230308008 %

Gist

用這格式輸入可公開Gist
例子：輸入{}，然後在裡面加上例子：輸入{},然後在裡面加上%gist schacon/4277 %

SlideShare

輸入{}，括號裡面再輸入%slideshare HacksInTaiwan/ctf-56046764 %
你的Hackmd.io就會有以下的顯示

Speakerdeck

輸入{}，括號裡面再輸入%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %
你的Hackmd.io就會有以下的顯示

PDF

注意：請使用 https 的網址，否則可能會被您的瀏覽器阻擋載入。
輸入{}，括號裡面再輸入%pdf https://beginners.re/RE4B-EN.pdf %

MathJax

你可以使用 MathJax 語法來產生LaTeX 數學表達式，如同 math.stackexchange.com：

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

更多關於 LaTeX 數學表達式 請至這裡

UML 圖表

循序圖

您可以像是以下使用循序圖：
在程式碼區域輸入sequence
你的Hackmd.io就會有以下的顯示

更多關於 循序圖 語法 在這裡.

流程圖

您可以像是以下使用流程圖：
在程式碼區域輸入flow
你的Hackmd.io就會有以下的顯示

更多關於 流程圖 語法 在這裡.

Graphviz

在程式碼區域輸入graphiz
你的Hackmd.io就會有以下的顯示

更多關於 Graphviz 語法 在這裡

Mermaid

在程式碼區域輸入mermaid
你的Hackmd.io就會有以下的顯示

更多關於 Mermaid 語法 在這裡

警告區塊

輸入
:::success 成功板塊 :::
:::info 公佈信息 :::
:::warning 注意一下 :::
:::danger 危險地帶 :::
你的Hackmd.io就會有以下的顯示

排版功能

標題

1
2
3
4
5
6
# h1 標頭
## h2 標頭
### h3 標頭
#### h4 標頭
##### h5 標頭
###### h6 標頭

水平分隔線

1
2
3
___
或者
***

字形替換

輸入

1
(c) (C) (r) (R) (tm) (TM) (p) (P) +-

會顯示這樣

“Smartypants, 雙引號”

‘Smartypants, 單引號’

強調

輸入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
**這是粗體文字**

__這是粗體文字__

*這是斜體文字*

_這是斜體文字_

~~這是刪除文字~~

上標： 19^th^

下標： H~2~O

++這是底線文字++

==這是標記文字==

會顯示這樣

引用區塊

1
2
3
> 引用區塊也可以是巢狀的喔...
>> ...可以多層次的使用...
> > > ...或是用空白隔開

引用區塊也可以是巢狀的喔…

…可以多層次的使用…

…或是用空白隔開

清單

1
2
3
4
5
6
7
+ 在行開頭使用 `+` `-` 或是 `*` 來建立清單
+ 空兩個空白就可以產生子清單
  - 當清單標記使用的字元不同，會強制建立新的清單
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ 非常簡單！
  • 在行開頭使用 + - 或是 * 來建立清單
  • 空兩個空白就可以產生子清單
    • 當清單標記使用的字元不同，會強制建立新的清單
      • Ac tristique libero volutpat at
      • Facilisis in pretium nisl aliquet
      • Nulla volutpat aliquam velit
  • 非常簡單！

編號

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit

  3. Integer molestie lorem at massa

  4. 您可以逐次增加項目數字…

  5. …或是全部都使用 1.
  6. feafw
  7. 332
  8. 242
  9. 2552
  10. e2

從其他範圍開始編號清單

  1. foo
  2. bar

表格

1
2
3
4
5
| 選項 | 描述 |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
選項 描述
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

向右對齊

1
2
3
4
5
| 選項 | 描述 |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
選項 描述
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

向左對齊

1
2
3
4
5
| 選項 | 描述 |
|:------ |:----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
選項 描述
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

置中對齊

1
2
3
4
5
| 選項 | 描述 |
|:------:|:-----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
選項 描述
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

連結

連結文字
加上標題的連結文字

圖片

顯示出來的結果(只放部分圖片)

註腳


顯示出來的結果

你的Markdown文字最後也會出現你之前寫下的Footer。

定義清單


使用後的結果如下

縮寫

這是 HTML 的縮寫範例
它會轉換 “HTML”，但是縮寫旁邊其他的部分，例如：”xxxHTMLyyy”，不受影響

最後顯示成這個樣子

0%