
# 混成教學(Blended Learning)：師生協作，強化自主學習成效

![](https://hackmd.io/_uploads/rkeyFs4KF.png)


疫情不只影響全球企業，也加速傳統教育的轉型，根據 OECD 於 2020 年的調查，在歐洲，超過 5 成的國家認為虛實融合的「混成教學」[^blended-learing]模式將成為新趨勢。

[^blended-learing]:https://www.oecd-ilibrary.org/education/teachers-as-designers-of-learning-environments/blended-learning_9789264085374-7-en

過去一年，國內外許多大學教授紛紛來信詢問 **HackMD 教育方案**，原先已經在使用 HackMD 做為教學工具的頻率也大幅增加。

究竟，文件即時協作服務是如何成為了遠距教學不可或缺的利器？

## 後疫情時代的教育關鍵字：混成教學 (Blended Learning)

>教育部資科司長郭伯臣表示：「遠距教學建議採取雜揉同步和非同步併進的「混成教學」 (Blended Learning)模式。」

何謂「混成教學」，其實並未有一致的標準，主要概念以課程內容以線上同步及非同步的方式搭配進行，其主要目的是為了強化學生整體學習的 **參與感（Engagement）及自主學習（Active Learning）** 的能力。混成學習不是將實體課程及教材搬到網路上進行，教師需要掌握以下重點來重新設計適合的課程。
- **設計明確的教學目標**
- **創造互助學習的機會**
- **強調自主學習的能力**
- **重視師生協作及互動**
- **紀錄學習過程及成果**

## 關注課程執行和師生互動的成效
>「從 2016年 開始，成功大學的[『Linux 核心設計相關課程』](http://wiki.csie.ncku.edu.tw/linux/schedule) 採用 HackMD 作為師生協作平台，直到現在 2021 年仍持續使用中。HackMD 的即時線上筆記協作，對課程執行和師生互動的成效有顯著的幫助，讓我可以在強調實作的課程當中，藉由師生的相互協作，去追蹤學員個別的課後學習狀況。」
 [name= 黃敬群 (Jserv) 助理教授]

黃敬群助理教授表示：「對於實作導向的課程來說，學生是否在課堂時段『專注』，不是最關鍵的議題，例如課程提供講解的錄影，學生若是無法會意，課後可以看錄影複習。但傳統的問題一直都是，無法即時知道學員的實作狀況，但有了 HackMD，就能要求學員更新作業並由系統主動發訊息告知，我還能在及時給予眉批和改進建議，而不用等到作業繳交截止日才知道。」

學生透過 HackMD 提交作業，教授可直接於作業內進行審閱及意見回饋，不但支援多種程式語言的程式碼 highlight 顯示，相較一般文書軟體，數學式及流程圖都需要較為複雜的編輯，在 HackMD 上都可輕鬆編輯。

程式碼範例：

![](https://hackmd.io/_uploads/rkBbjkMYK.png)

```javascript=
var i = 0;
```
此外，對自己期許較高的學生，教授也會利用共筆，額外指派作業要求和精進的建議，學生就會受到鼓舞，並得以在專業上強化，利用數位工具輕鬆達到因材施教的目的。教授還利用 HackMD 讓學員相互評論彼此的作業，互相指出優缺點，教學相長。


除提供學生製作專題文件有很好的呈現效果，有許多學生也利用 [**書本模式(Book Mode)**](https://hackmd.io/s/how-to-create-book-tw) 將過去的學習成果收整成自已的 **學習歷程(E-Portfolio)**，或者編輯自已的 **個人履歷(Resume)**，有豐富的情境可以運用。

## 同步及非同步兼具的互動協作
黃敬群助理教授進一步分享：「隨堂測驗也使用 HackMD 來進行，事先建立個別學生的筆記，要求學員在測驗期間作答，助教和我就一邊評分，還能互動地給予講評和改進建議，這樣就能讓測驗期間也有學習效果。」

利用 HackMD 同步協作的特性，課程進行時，學生們可將其問題留言於文件內的「問答區塊」，助教可即時回覆或整理問題後交由教授統一回答；至於課堂上來及不完成的，就交給非同步解決。

課後，除了可持續於文件內留言提問，學生之間也透過共同筆記進行分享及討論，讓不常在課堂上發言的同學也有機會參與，除賦予學習延伸性也強化學習動機。

## 創造自主的學習環境
使用數位工具並重新設計教學方式，目的是透過互動討論與實作，讓學習者能提升自主學習的能力，而非單純的接收知識，教師也需要轉換角色，不再只是講者，而是引導、帶領學生創造自主的學習環境。

>Blended learning seeks to use the potential of new technology to offer more individualised teaching and direct instruction.[name=Teachers as Designers of Learning Environments(OECD iLibrary)]

新科技、新工具輔助的混合教學，有國際理論與在地經驗的實證。文件即時協作服務，成為了遠距教學不可或缺的利器。

混成教學(Blended Learning)：師生協作，強化自主學習成效


# 文件：後疫情時代的新課題，企業如何管理遠端協作並保持生產力


自疫情爆發，Work From Home 已經成為工作常態，許多國內外的企業紛紛鼓勵員工在家工作，甚至大方贊助居家辦公所需用品，只為了降低員工感染的風險。

如今疫情減緩，當企業要求員工回到辦公室恢復過去的辦公型態，多數的員工卻希望維持「遠端工作」，甚至不惜主動辭職尋求可以遠端工作的職務，企業主這才發現一切都回不去了。

實體、遠端工作的溝通與轉換，該怎麼辦？

## 遠端工作是趨勢，如何管理保持生產力是新課題

2019年 VMware 的《數位化員工體驗調查》顯示，78% 的亞太地區受訪者希望能 **「更輕鬆地在辦公室以外的地方工作」**。

而最新一期的《麥肯錫季刊》表示，自 2021 年 4 月以來掀起了大離職潮 (The Great Resignation)，已有超過 1,900 萬美國員工主動辭職（持續增加中），人們並沒有在逐漸復甦的經濟下擁抱工作，反而選擇在高失業率的狀態下，離開現有的工作型態，其中遠端工作的職務成為了熱門選擇。

產業結構發生變化，部署遠端工作的企業組識，該如何管理遠端協作並保持生產力，成為了新的課題。

## 線上會議效率不佳，可能乎略了會議紀錄的重要性

因為疫情無法進行實體會議，企業大量啟用各家視訊會議服務來進行會議討論，少了面對面的監督，發生了許多問題讓會議效率大打折扣，除了會議無法準時開始、話語權不均、容易離題或分心，更嚴重的是，因為缺乏組織性的管理及紀錄，最容易發生 **「會而不議、議而不決、決而不行」** 三種狀況。

文字紀錄，是為了為確保與會者對過程及結論的認知一致，此時會議紀錄的重要性更為突顯。

**掌握會議紀錄三大重點**
* 議程（Agenda）
* 關鍵人物（Key Person）
* 執行決策（Action Item）

## 建立議程，任務指派，進度追蹤


公司成員分佈在兩個時區，基本維持遠端辦公 (Remote-Work)，會議都需以視訊方式進行，讓我們來看看 HackMD 業務團隊如何使用自家的文件協作服務來完成會議紀錄。

1. 事前準備效率加倍
    - 在例行會議的前一週，就預先建立會議文件並套用設定的範本，團隊成員就會各自依照議程大綱編輯內容，需要補充的檔案資料或圖片，可透過上傳、嵌入 iframe 或使用建立連結的方式整統於會議文件內，這樣一來會議上需要討論及決策的項目也可以明確有效的進行溝通。

2. 善用標記帳號功能
    - 若有需要同仁協助或是指派任務的事項，在文件內 @標記帳號，負責執行的同仁便可收到通知並進行確認回覆，這樣一來也大大減少因課責不明產生的問題。

3. 協作編輯權限分層
    - 難免會遇到臨時性的會議，與會者以即時協作編輯的方式將會議討論過程給紀錄下來，內容上有誤解或落差的部份也可立即提出修正，主要為了能將會議過程還原並確認共識，若有需要補充之處，會後也可編輯修改，HackMD 會自動標註編輯者及版本控管功能。
    - 若需要與客戶或外部合作夥伴進行會議時，因文件與使用者權限各自獨立，可邀請訪客到指定的議文件協作，並設定編輯或閱讀不同的權限管理。

4. 紀錄問題臨時動議
    - 會議過程中，團隊成員也習慣先將問題紀錄下再進行討論，避免影響議程的進行，造成會議時間延宕。

5. 留言討論追蹤進度
    - 紀錄好決策項目並標記各項的負責人後，剩下的就是追蹤執行進度。過程中，除了在通訊軟體上即時溝通，由於分屬兩個不同的時區，有時太過即時的通訊軟體反而是種打擾；所以，團隊習慣在 **文件段落內使用留言功能**，除了讓討論重點更聚焦，也方便隨時補充重要資訊讓內容更完整。

## 效率來自信任，打造高效、數位的工作環境

打造數位工作環境需先盤點自身的需求，制定遠端工作策略並選擇最適合團隊運作的協作工具組合。除此之外，企業管理者需積極建立團隊溝通及協作的管道，培養注重結果的工作文化，而非固守既定辦公形式。

從微觀管理 (Micromanagement) ，轉向尊重與信任，讓人才無論在什麼地方，都能夠發揮所能。信任，是後疫情時代的課題，也是企業如何留住人才提升競爭力的關鍵。



文件：後疫情時代的新課題，企業該如何管理遠端協作並保持生產力


# 技術：なぜ漢字をタイピングする際、漢字が割れますか？

![](https://i.imgur.com/TSqyqSg.png)


漢字を入力するあなたは、「漢字割れ」という苦境に陥ったことありますか？例えば、「共同」と二文字を入力したいのに、「kyoudou」になってしまって、そのままウェブページに表示されて、どうしても漢字に合成されません。

この問題について、テキストエディター自体は「コンポジションイベント」がちゃんと処理されなかった可能性があります。フェースブックメッセンジャーもちゃんと「コンポジションイベント」が処理されなかっただろう…毎回更新すると痛い目に遭う。

今回の内容は皆さんに簡単に「キーイベント」と「コンポジションイベント」、またこのイベントと「グループウェア」の関連性を紹介します。

この紹介を通して、 HackMD の中にどんな技術を秘めているのかを理解するための最初の礎になると思います。
 
:point_right: [HackMD Blog](https://hackmd.io/@hackmd/blog-tw)

## タイピングは入力するだけなのでは？キーイベント（Key Event）を紹介する

![](https://i.imgur.com/280Cfej.gif)

ウェブブラウザーの文字は、キーボードを押した瞬間に、「キーイベント」が執行されます。簡単な動きに見えますが、実は三つの操作が含まれます：keypress, keydown, keyup.

ここは先に **keydown** と **keyup** を紹介します。==Keydown==とは、名前通り、「押した瞬間」とのことで、キー毎に相応なキーコードが存在し、キーを押すと、そのコードが取得できます。同じに、==keyup==とは「指を離した瞬間」とのことです。

例えば、「h」キーを押した際、キーボード上は「h」と書いて、モニター上のウェブページも「h」と表示されて、非常に単純なことです。

```
keydown: h
keyup: h
```

だが、漢字を入力する際、例えば「共」という文字を入力する場合、発音入力の間、「共」が出てきて、更にスペースキーを押すことで、リストから「共」を探すため、もっとスペースキーキーを押します。

ではどうなるんでしょうか？


```
keydown: k
keyup: k
keydown: y
keyup: y
keydown: o
keyup: o
keydown: u
keyup: u
keydown: Space
keyup: Space
keydown: Space
keyup: Space
keydown: Enter
keyup: Enter
keydown: Enter
keyup: Enter
```

ここまで見れば、英語と中国語がウェブページに入力する際の違いが理解できるだろうと思います。

### keydown と keyup は違いますか？

上の down と up のコロン以降の内容は同じじゃないですか？と思えるかもしれません。

先ほど説明した down とは「押した瞬間」とのことですが、もし一瞬間押すではなく、押しっぱなしになると、キーイベントは「連続発生」になり、逆に、 up とは指を離した瞬間のことですので、連続発生ができません。

「共」の例から見ると、例えば家の猫 :cat2: がキーボードを踏んで、「kyou」を入力した直後、猫の手で「スペース」何秒押しっぱなしにすると、キーイベントがどうなるんでしょうか？ 

```
keydown: k
keyup: k
keydown: y
keyup: y
keydown: o
keydown: u
keyup: o
keyup: u
keydown: d
keyup: d
keydown: o
keydown: u
keyup: o
keyup: u
keydown: Space
keydown: Space
keydown: Space
keydown: Space
keydown: Space
keydown: Space
keydown: Space
keydown: Space
keyup: Space
```

そこで六つの keydownがあると分かります。ただ keyupが一つだけです。そうすると、両者の関連性が分かると思います。キーボードでパソコンゲームを遊んだことがある人なら、ここでなんとなく分かるだろうと思います。~~~射撃する際、押しっぱなしでは連続発射できますが、狙ってキーを離した瞬間に発動するボムだと一回しか投げれません。多分そうした仕組みで射撃とボム投げがよくkeydown と keyup と設定されるだろう。~~~

### では keypress とは何でしょうか？

続きまして、 keypress とは何でしょうかを紹介します。名前通り、押さえることです。でもこれって keydown と同じじゃないでしょうか？いや、ここの操作は「文字キー」と「非文字キー」の間に差が出ます。

例えば、「h」を押すと、一つアルファベット「h」が表示されますが、「enter」キーだと「文字を表示」というイベントではないので、これに相応する keycodeしか執行されません。

**keypress は「文字を入力するキー」しか効果ありません。**「Esc」、「Enter」みたいなキーでは効果がありません。

例えば「英語の大小文字」の件ですが、キーが同じ「h/H」でも、 keypress という操作があるからこそ、違う keycode を取得することが区別できます。これは down と up だけでは判断できないことです。

## ではなぜ漢字をタイピングする際、割れることになるんでしょうか？コンポジションイベントを紹介（Composition Event）

Keydown、keypress、keyup を皆に紹介するのはもう一つ重要なことを強調したい目的があります。

先ほど説明していた keypress は「文字を入力するキー」しか発生しませんので、漢字を入力する際、次の問題が気付くかもしれません。

平仮名を入力するタイミング、漢字が入力されてますか？

平仮名では keypress の操作が発生しますか？ほどんとの状況が「ノー」です。:no_entry_sign: 

先ほど「共」を入力する際、キーボードイベントから keydown と keyup の動作を分解しました。 down もしくは up がまだ個別のスペルだけで、==まだ漢字出てませんよね==？


```
keydown: k
keyup: k
keydown: y
keyup: y
keydown: o
keyup: o
keydown: u
keyup: u
keydown: Space
keyup: Space
keydown: Space
keyup: Space
keydown: Enter
keyup: Enter
keydown: Enter
keyup: Enter
```

:eight_spoked_asterisk: ここでポイントです。もしテキストエディターの中に CJKを使いたければ （中国語、日本語、韓国語）、例えば中国語入力みたいなことで、私たち必要なのはキーボードイベントだけではなく（Key Event）、 **コンポジションイベント（Composition Event）** も必要です。

例えば、先ほど入力法で入力した「共同」の場合
「Kyoudou」の後はまた漢字リストから正しい文字を選びます。コンポジションイベントはこうなります： 

```
Composition Events:
compositionstart:
compositionupdate: k
compositionupdate: ky
compositionupdate: きょ
compositionupdate: 喬
compositionupdate: 喬d
compositionupdate: きょうど
compositionupdate: 匈奴う
compositionupdate: 共同
compositionupdate: 共同
compositionend: 共同
```


コンポジションイベントの過程では キーイベント の「Space、Space、Enter」と同時にコンポジションイベントの「きょうど、匈奴う、共同」に転換することに見えるでしょう？

これこそコンポジションイベントで、キーイベントと違って、「合成が必要な言語」しか出てきません。

>P.S.：ブラウザー毎のデスクトップ、モバイルの違いによって、違う結果も出てきます。[私たちの開発者 Maxさんから作った codepen](https://codepen.io/jackycute/pen/EvNmWv)でテストしてみましょう。 

## 「コンポジション」を処理するがどうかによって、結構違います

なぜたまにソフトウェアサービスが良いのに、更新した後、中国語入力がスムーズに使うことができないんでしょうか？よく「割れ」が発生し、コンポジションがうまくいかないでしょうか？~~例えばよくアップデートする フェースブックメッセンジャー~~

実は、色んな文字編集の方から「コンポジション」を受け取る際、「合成する間、現れた『字』」という要素の考慮を欠けていて、テキストエディターの中に、処理しなかった可能性があり、もしくはソフトウェアを更新する際、言語テストを忘れる可能性もあります。

>この文書を書いてる同時、私たちのメンバー [Yukai]((https://hackmd.io/@Yukai)) さんも VSCode に対して、コンポジションイベントの文章を発表することを気づきました。 PR: [Fix backspace in IME composition on iOS Safari](https://github.com/microsoft/vscode/pull/40546)。

## 更に「コラボレーション」！

もしテキストエディターは言語入力の中に、「コンポジションが必要な言語入力」を考慮しなければ、keypress 側は「コンポジションの間に生まれる『準文字』」が漏れることになります。
勿論、考え方を変えると、もしコンポジションの言語のユーザーがいなければ、このような需要や問題も存在しなくなる。

更に重要なのは、もし「コラボレーション」エディターはキーボードイベントだけでなはなく、コンポジションイベントのことも考慮しないと、リアルタイムコラボレーション（Realtime Collaboration）上では様々な難関が出るだろう。

ソフトウェア毎にターゲットが違い、例えば Notion は同一ブロックのコラボレーション処理が少な目です。同時編集の際、相手がどこにいるのか見つからなくて（カーソルが表示されません）、同時同じブロックを編集すると、一方が上書きされます。

>「コラボレーション」をテストする一番厳しい試験は皆が一緒にエディターの中で同じ行を入力してみて、何が起こるのか確認します。

キーボードイベント、コンポジションイベントを紹介する目的は将来「コラボレーション」という技術を説明する際、解決策を理解できるようになるためです。

## テキストエディターが「コンポジション」を処理したことがどうやって分かるんですか？

文章の最初に、「中国語割れ」という状況を提起しましたが、これは多くの人がGoogle Doc、Dropbox Paperを使用する時、同時入力する際遭った経験です。 

コンポジションイベントを邪魔する要素は色々あって、ソフトウェアのアルゴリズムをもたらしたい体験によります。

HackMD は keypress のほう、「コンポジションの過程」（注音入力法に言うと、注音符号を合成して漢字を選ぶ）も一つのイベントとしてお送りますので、パートナーと一緒に作業する際、相手側の「コンポジションの過程」が見れます！

ミーティング、共同編集は丸見え感があるかもしれません。入力する過程が全部リアルタイムで表示されます。

## お使いになるソフトウェアはコンポジションイベントを送ったりしますか？


違うエディターとメモ用ソフトウェアによって、やり方が違います。思い出してみてください。

>「コンポジションの過程」はグループウェアのドキュメントに出たことありますか？ 

例えば共同作業の方が「共同」二つの漢字を入力したい場合：

- ドキュメント上は ==「Kyou共 Dou同」== のような表示見たことありますか？ 

それとも、相手は直接「共同」が出てくる

- その後、0.X秒の間隔で、カーソルカラー、アンダーバーが点滅し、また相手は「協同」、「教導」、「京道」の文字が出てきますか？


もしくは、何秒待った後、相手は既に入力済み。

- その後、また「共同」二文字に見えますか？

やり方はそれぞれメリット、デメリットがあります。タイピングの流暢性、文字入力の速度を優先するHackMD にとって、コンポジションの過程も考える必要があって、同時にサーバー側に負担も重くなる。これをプロダクトのコアバリューによります。

## メモ用ソフトウェアかと思っていたが、オンラインゲームだった

HackMDの開発者 Max さんはある一言が言っていた：**「これはマルチプレイオンラインゲームみたです！」**

一人入力だけで、テキストエディターにタイピングし、文字入力の表示の速さだけでも重要な体験でした。

二人、三人、三十人など、同時に同じテキストエディターに閲覧、編集の際、まるでマルチプレイオンラインゲームみたいです。あるプレイヤーは一つの動きをし、もう一人のプレイヤーがフィードバックを受け取る。ゲーム内のキャラクターは複数キャッチボールや干渉を処理し、うまくクリアできるのか。

一つ嵌めることで、巨獣がいきなり飛んでくるみたいな感じで、プレイヤーが逃げる時、ポータルを使って、戦場から安全地域に戻る。あと、チームワークでパートナーと戦術を連携するなどみたいな感じで、グループウェアの中でもそういったシチュエーションがあります。

**キーボード、コンポジション、マルチユーザー、リアルタイムでドキュメントに入力する、尚且つスムーズ、これは思ったより複雑な作業です。**

ゲーム体感のコンセプトから始まり、「皆に楽しくメモする」がコアとしてプロダクトを開発、これは私たちのコアバリューです。

こちらの技術はまだ色々深堀できる面白い内容があります。また少しずつシェアしましょう。

### 参考文献
- [現代ブラウザのスペルMaxWu @ COSCUP 2017](https://hackmd.io/@MaxWu/HackMD-COSCUP2017#/)
- [Composition Eventsを通じて、非ラテン入力法の入力ボックスに対するサポートを強化](https://kuro.tw/posts/2016/10/11/%E7%AD%86%E8%A8%98-%E9%80%8F%E9%81%8E-Composition-Events-%E5%A2%9E%E5%BC%B7%E9%9D%9E%E6%8B%89%E4%B8%81%E8%AA%9E%E7%B3%BB%E8%BC%B8%E5%85%A5%E6%B3%95%E5%B0%8D%E8%BC%B8%E5%85%A5%E6%A1%86%E7%9A%84%E6%94%AF%E6%8F%B4/)
- [keydown, keypress, keyup の違い](https://github.com/jijigo/notes/issues/30)
- [keydown, keypress, keyup の違いを比較](https://medium.com/@yitailin/%E6%AF%94%E8%BC%83-keydown-keypress-keyup-%E7%9A%84%E5%B7%AE%E7%95%B0-4e873ba17e81)


技術：なぜ漢字をタイピングする際、漢字が割れますか？


# 製造業主管如何善用數位文件，讓第一線專注作戰

所有的公司，所有的行業，都需要文件。有些行業愛用紙本，有些全面數位化，也有一些夾雜在兩者之間的複雜排列組合之中，徒增同步對齊的「工人智慧」。

在台灣，基礎規模已經相當巨大、利潤營收也很穩定的傳統製造業，面對數位轉型的洪流及疫情衝擊，也需要趕上這一波智慧城市、智慧產業的趨勢，各產業紛紛購置更多、更新潮的軟體。

但，最根本的「轉型」關鍵，其實是在作業現場，工作人員的手裡，始終沒有被取代掉的那一張「紙」、那一隻「筆」，還有通訊軟體及版本爭議的無止盡衍生困擾。

HackMD 成功替台灣製造業工廠，打造了一套以管理者為本的「數位文件」模式。

## 問題：龐大的溝通成本，隱藏在工作流程之中

傳統製造業的工廠裡，頭戴安全帽的廠長、作業員與廠商代表，手拿著夾板，夾著好幾張待勾稽的文件。廠長從上衣口袋中，掏出原子筆，在生產線機台旁一一湊近，查看這次修繕的項目，是否都已經確實完成。你看完，我看完，拿筆，紙上打勾。

為了避免爭議，甲乙方相關人員都在現場，手機拍照記錄現場的狀況跟問題。實地保修計畫結束後，組內工作人員回到辦公室，才用文書軟體統整繕打。

影印出來，檢核確認；通訊軟體傳出去，檢核確認；管理系統提交，退回檢核確認。

**這樣來來回回的過程，從來沒有計算過，消耗了多少人、多少時間。**

除了人員的工作文化，紙本工具、老舊軟體的路徑依賴，導致隱形而龐大的「溝通成本」。

數位化洪流之中，想要「轉型」卻難以察覺內部工作流程上的致命弱點，就是「**文件**」。

## 解法：不是工人配合工具，是「數位文件，配合作業情境」

不久前，HackMD 與這位四十歲的李姓工廠廠長接洽，他提到，工廠每季需要例行的大型維修保養計劃，工期往往需要兩到三個月，也需要與外部的廠商合作。

過去，都是工期結束後，才由乙方提出工作報告，讓甲方進行驗收。然而，因為沒有「即時確認檢核項目」，過程中的溝通，雜亂的內容又散落在通訊軟體裡，無法統整。

結果，就是溝通上的爭議：小則來回幾次文字訊息、電話釐清、傳送照片附件處理，大則重要回現場再請人員檢查方能解決。若是衍生雙方之間的合作誤解與衝突，更是得不償失。

**紙本**，仍然是許多製造行業的習慣。面對數位接軌的需求時，為了「電子化」而將文件掃描成電子檔，只是多一道工，卻還是難以查找文件、再次取用文件內容，文件的資料價值也隨之封存。

**數位協作文件**，過去被認為是屬於資訊業、軟體工程人員的專屬，但在本土產業轉型、智慧化的趨勢當中，以本土筆記軟體起家的 HackMD ，以最輕便、簡單的線上文件形式，透過長期陪伴、與傳統製造業的廠內夥伴共學，打造了一種最有利於多方稽核單位的模式。

- 由負責管控保修程序的廠長，事先寫好一份 HackMD 數位文件；
- 同個網址，現場人員僅需一起打開手機，即時勾稽同步；
- 現場拍照，由廠長統一將照片，歸至文件當中，簡化協作步驟；
- 各方人員都可以隨時，在數位文件中追蹤即時更新的版本；
- 事後查找每個動作都可以被系統記錄、具有可課責性，查詢版本紀錄；
- 匯出成文字檔案，保存容易；架設廠內伺服器，完整保障隱私。

## 以管理者為本的「高主導、低協作」模式：數位文件，因地制宜

![](https://hackmd.io/_uploads/HJSswVpEt.png)

不需要所有同仁都「完整學會、應用所有功能」，反而是幫管理者設計一套操作流程，讓身為主管稽核的主事者，能夠在簡潔的頁面上，最快速將他的想法與意志，轉換到數位文件上。

**李姓廠長善用數位文件的彈性，為第一線的人員準備好文件，列出所有需要勾稽的項目，為第一線人員節約心神，專注在複雜的現場，仔細做好檢核工作。**

介面簡潔、載入快速，不需要複雜「協作共筆」，只需要拿起手機現場掃 QRcode ，點開預先建立好代辦項目的工單，所有人可以「同時」地看見哪些項目被勾選、更新；僅需要少數的甲乙方對口，在文件內以文字或照片的方式進行補充，所有人都能查找、同步溝通保修計畫的內容。

數位轉型（Digital Transformation），不是要求所有「人被轉型」，而是在技術數位化的基礎之上，讓所有工作人員，透過數位工具的因地制宜，將工作流程及工作方法「轉型」成一種真正能夠節省承辦成員、一線作業人員的壓力，並解決所有人一起長期埋下的溝通課題。



製造業主管如何善用數位文件，讓第一線專注作戰



# HackMD Prime 個人方案 詳細介紹


:::success
:tada: 免費試用升級版一個月「折扣碼」，即將於中秋連假（9/18）正式公開。
:::

>:point_left: 回到 [HackMD 中文官方部落格](https://blog.hackmd.io/zh) :point_right: [本文單篇連結](https://blog.hackmd.io/zh/blog/2021/9/15/Personal_Prime)
> :penguin: [English version: HackMD Prime Personal](https://hackmd.io/@hackmd/Prime_Personal_english)



<style>
.hmd-primer-logo {
    background-image: url(https://hackmd.io/_uploads/HkrpIo3MK.png);
    background-size: cover;
    width: 1em;
    height: 1em;
    min-height: 18px;
    display: inline-block;
}

</style>


![](https://hackmd.io/_uploads/rJENhWkmF.png)

## <span class="hmd-primer-logo"></span> HackMD Prime 個人方案，是什麼 :question:

為什麼 $A'$ 後面那個角分符號 "Prime" 看起來特別熟悉？因為演算法、數學式大量使用在 HackMD 核心技術之中。我們把更好的、上等的、加值過後的產品，取名為 <span class="hmd-primer-logo"></span> **HackMD Prime**。

HackMD 是一個台灣團隊，使用者眾多，也經常有人許願；我們將陸續實現。而你，成為 Primer ，為真正幫助到你思考學習的軟體，付費訂閱。

### :sunrise: 首波功能升級

2021 年 9 月，初登場的 Prime 個人方案，最優先新增的功能，就是解決最多使用者反映「圖片隱私」問題：以前，照片拉進筆記會上傳到免費空間 imgur ；現在，升級 Prime，將是你的私有雲端空間，每張圖片都受到保護。

### :sunrise_over_mountains: 未來陸續推出 

我們將筆記邀請者的數量、版本紀錄的數量、範本的數量，以及預設套用的功能，都保留給 Prime 的使用者；不久後，「回收桶、標籤樹、筆記 API」 也會陸續上線；明年，更力求實現「資料夾、全文檢索」等功能。

#### HackMD 陪伴你成長，希望你也陪伴 HackMD 升級，一起茁壯。


## 你可能會問，為什麼要升級 <span class="hmd-primer-logo"></span> Prime :question:

所有軟體服務都希望你訂閱，但哪些軟體，真正幫助你滿足實際的需求？根據我們的調查，HackMD 的使用者，有很高比例是每週超過三天的高頻率使用、甚至每天都會用。

專注於「輕量、彈性、快速」，點開 HackMD 的筆記，你不會有非得要達成完美的心理負擔；反之，是簡約的版面、即時的效能感。沒有花俏的模塊跟過量項目的干擾，最有利於「將散落的想法，快速地結晶化」。接著，成為一份可以累積、可以分享、可以協作的價值文件。

珍貴的討論協作情境，可遇不可求。因為是 HackMD ，點開同一個網址馬上同時打字也不干擾、不打斷、不蓋過任何的意見；尤其在 CJK（中、日、韓） 語言的組字輸入不打架。這樣的場景，或許不是天天發生，但這樣的內容，若能保存起來，更加珍貴稀有。

### 為真正幫助到你的軟體付費 :clinking_glasses: 

很多人都說「免費版就很好用了。」但是升級 Prime 之後，還會更好用，或許你也會發現有一些以前沒發現的用法。讓工具陪伴你，在進步的挑戰區，更往前推進一點。

升級 Prime 方案，是延續你良好的學習累積習慣；是與知識朋友交往，落實合作精神時更隱私、更彈性的辦法；也是在關鍵時刻，能最全力以赴將你努力的成果，付諸實現的路徑。

## 哪些人，最需要升級 <span class="hmd-primer-logo"></span> HackMD Prime :question:

你是[開發者](https://medium.com/starrocket/hackmd-product-story-1e332f83d343)，寫文件跟寫 code 的一致介面最親和，管理 repo 跟套用範本將省下更多力氣；

你是[筆記家](https://hackmd.io/@hackmd-marketing/primerusecase)，將獲得更完整的知識痕跡留存；`參考更多`:arrow_forward: [來自 Primer 的範本](https://hackmd.io/@hackmd-marketing/primerusecase)

你是[學術工作者](https://www.facebook.com/hackmdio/posts/4466103463446828)，程式碼、數學式支援與合作撰寫溝通，跨領域的合作愈來愈頻繁；

你是[接案工作者](https://www.facebook.com/hackmdio/posts/4448953288495179)，圖片隱私保障，最迅速的專案管理、溝通交付，也透過彈性權限來實現；

你是[團隊主持](https://www.facebook.com/hackmdio/posts/4460955603961614)，管理會議紀錄、行政文件，無上限的編輯人數跟版本紀錄，無後顧之憂；

你是[寫作者](https://www.facebook.com/hackmdio/posts/4458332684223906)，純文字專業者，值得專業編輯器，無限制版本紀錄，節省大腦空間。

## <span class="hmd-primer-logo"></span> 訂閱價格＆優惠期程

使用折扣碼，將享首月免費試用。訂閱期滿一個月，會自動扣費續訂，你也能繼續享有秋季的早鳥優惠價格：==每個月 US$4== （換算台幣約一份麥當勞套餐）。

冬季到來以前，我們會推出更有利於使用者的**年繳功能**。屆時，方案將恢復原價==每個月 US$6== ；若選擇年繳，則能繼續享有每個月 US$4 的優惠計價[^秋季早鳥優惠延續]。

[^秋季早鳥優惠延續]: 如果您在秋季早鳥期間訂閱 HackMD Prime，未來年繳方案上線後，您仍舊維持月繳 US$4。不過，如果您解除訂閱，重新訂閱時就會套用當時的計費方式。

別擔心，年繳功能上線前，我們會優先通知所有 Primer ，你不會錯過第一時間的年繳折扣。而且，只要在早鳥期間訂閱，你就會持續享有每個月 US$4 的優惠價，也將持續擁有未來上線的新功能。

# 優惠方案，中秋啟動

:::success
:tada: 免費試用升級版一個月「折扣碼」，即將於中秋連假（9/18）正式公開。
:::


<span class="hmd-primer-logo"></span> HackMD Prime 個人、團隊方案，即將啟動**最優惠**的「免費試用」及「早鳥優惠」。

我們會在電子報、社群媒體即時公告，請密切注意。
> :penguin: [English version: HackMD Prime Personal](https://hackmd.io/@hackmd/Prime_Personal_english)

>團隊方案，將同樣適用折扣碼優惠；
>已訂閱團隊方案者權益不受影響，並自動升級 Prime 版本。


>想了解更多，歡迎你跟我們互動 :point_right: 
>-  追蹤 [Facebook 粉絲專頁](https://www.facebook.com/hackmdio)
>-  Follow Our [Twitter](https://twitter.com/hackmdio)

>想要更深度的內容，歡迎你跳進來 :point_right: 
>- 訂閱 [Primer News電子報](https://airtable.com/shrcv8ye0qwrqe7YY)
>- 加入 [Facebook Primer 社團](https://www.facebook.com/groups/hackmd)

>:point_left: 回到 [HackMD 中文官方部落格](https://hackmd.io/@hackmd/blog-tw/https%3A%2F%2Fhackmd.io%2F%40hackmd%2Fblog-home) :point_right: [本文單篇連結](https://hackmd.io/@hackmd/Personal_Prime)


HackMD Prime 個人方案詳細介紹


# Try HackMD Prime Personal, first month is on us


:::success
:tada: Try HackMD Prime Personal with the promo code "PrimerONE" for 30 days.
:::

<style>
.hmd-primer-logo {
    background-image: url(https://hackmd.io/_uploads/HkrpIo3MK.png);
    background-size: cover;
    width: 1em;
    height: 1em;
    min-height: 18px;
    display: inline-block;
}

</style>


![](https://hackmd.io/_uploads/rJYvhby7F.png)

>[URL for this article](https://hackmd.io/@hackmd/Prime_Personal_english)

## <span class="hmd-primer-logo"></span> What is Prime Personal plan :question:

You are already familiar with the "prime" symbol ($'$) as in $A'$, because it's everywhere in algorithm and mathematics, on which are the bricks the core technologies of HackMD build.

<span class="hmd-primer-logo"></span> **HackMD Prime** is the first-class, value-added flavor of HackMD.


### :sunrise: What you get right now

Upgrade to Prime Personal to strengthen privacy to your data, for you will have dedicated cloud storage for uploaded images, whose permissions follows the containing notes.

There will be **unlimited** number of invitees, templates, and you can set default permissions to your note to save time.

### :sunrise_over_mountains: And more is coming

Note API for connecting your notes to other apps. Recycle bins where you can recover deleted notes. Folders for better arranging your notes.



## Why <span class="hmd-primer-logo"></span> Prime :question:

Every app craves your subscription, not all of them are essential to your productivity. HackMD is lightweight, flexible, and fast. No blocks. No modules. No databases. Just jot down your thoughts.

With collaboration and sharing in its DNA, HackMD boosts your productivity by decreasing the frictions for others to get their hands on. For freelancers whose works often involves contacts in other organziations, custom permalink, flexible permissions, full-fledged version control and quietly colored editing marks, all holds your work to be accessible and accountable.

HackMD comes with a Free version, which is free forever, yet Prime is for those who see the value in it and would like to use it without limitations.

Pay for what truly helps :clinking_glasses: 

## Does <span class="hmd-primer-logo"></span> HackMD Prime fit your use case :question:

**Are you a developer?** HackMD can simulate Emacs and vim, provides comprehensive keyboard shortcuts, code blocks with custom line numbers, GitHub integration, and much more.

**Are you promoting an idea?** HackMD is great for publishing your thoghts. Invite people to work together, to comment on your piece, and get notified for your publishings in one place.

**Are you an academic member?** Communicate with your colleagues or students with native languages of your discipline(s). LaTeX, mermaid.js, Graphviz, [slide mode](https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck), and much more.

**Are you an administrator?** Manage meeting minutes and all the admin documentations in one place. Onboarding is a lot easier with [Book Mode](https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book).

**Are you a writer?** Novels, poems, screenplays, translations, copys and everything in plain text are what HackMD is good at. A stable and fast editor, auto-save, traceable versions, plus excellent collaboration. 

## How much does <span class="hmd-primer-logo"></span> HackMD Prime cost?

Use promo code to get Prime, the first month is on us. You will be charged ==US$4== at the beginning of the next month.

Later this year, you will be able to pay anunally, then the monthly fee of Prime Personal will be US$6/paid monthly or US$4/paid annually. If you subscribe to HackMD before the annual plan, you can keep US$4 plan and save 33% every month ever after, until cancellation.


# Get the promo code this weekend! (updated)

:::success
:tada: Try HackMD Prime Personal with the promo code "PrimerONE" for 30 days.
:::

>Learn more :point_right: 
>-  Follow Our [Twitter](https://twitter.com/hackmdio)
>- Email us: support@hackmd.io

Try HackMD Prime Personal, first month is on us


# 人物：吳承翰，以及他的 HackMD Prime

疫情間難得到辦公室上班，離開前 Max（承翰的英文名）說他聞到佛手柑的香味，我心想怎麼可能，我用的是複方精油，而這間辦公室明明都是一些宅宅男性，竟有人聞得出其中有佛手柑。

今年收費方案要改版上線，社群經理覺得取一個通俗的名字比較好，煞有其事地搞了民主投票，最後還是被 Max 的「角分符號論」打動。好，就叫做 HackMD Prime。

聞得出佛手柑的工程師，瀏覽器預設卡娜赫拉的男人。我相信他。

>:point_left: 回到 [HackMD 中文官方部落格](https://hackmd.io/@hackmd/blog-tw/https%3A%2F%2Fhackmd.io%2F%40hackmd%2Fblog-home) :point_right: [本文單篇連結](https://hackmd.io/@hackmd/max_and_prime)

# 為什麼升級版，要叫 Prime？

![](https://hackmd.io/_uploads/B1HnEcdft.png)

前幾天，我在 HackMD 粉絲專頁發了一個輕鬆的貼文：Why ==Prime==？

這個問題，對使用者而言，或許一點也不重要，重要的是「升級付費之後，產品究竟能不能幫助我更多？」不過 HackMD 一向都是有點浪漫色彩的團隊，為了名稱，內部其實苦思頗久。

根據臉書民意，最多人覺得是「上等牛肉」，這是我們想具象傳遞的好料沒錯；其次多人選的是「以上皆是」這答案也不錯；就像學 Amazon 也是一種普及使用的檢驗指標。

但最接近正解的，是「猜 C 按加油：怕人家不知道這是數學的==角分符號==」。

有網友留言說「會先想到質數」，這也是數學，但我們不是為了賣弄數學，而是這段對話：

# 開發就是創作，行銷兼顧初衷

>[name= Max] Prime 在數學上，可以表達一個變數經過事件後的符號，就像 A 變成 $A'$

>[name=社群經理] ~~看不起文組膩？~~ 為什麼是數學？

>[name= Max] 我現在在編輯器裡打一個字，經過伺服器處理，傳送到你那邊，才看得到這個字[......]我們開發就是一直看到演算法，看到 Prime 就很有感覺。

>[name=社群經理]跟[中文裂掉](https://hackmd.io/@hackmd/CompositionEvent)那篇提到的有關嗎？

>[name= Max] 對，這是協作軟體的重要技術，從我這裡打字，到你那裡看見，要有一個「操作轉換」。

>[name=社群經理]有聽 Yukai 提過那叫 Operational Transformation。

>[name= Max]Prime 其實就是一個標記，同樣的符號，只是加上了角分。當然也可以兩撇，變成角秒，還可以三撇[......]不斷累加，對我們來說，就是表示變得更好。

![](https://hackmd.io/_uploads/BJ-kTidMK.png =600x)

HackMD，也是經過很多的事件，變得更好，加上標記，加值成為 HackMD Prime。幾經思索，我們不是唯一一個用這個單字來代表「加值」的產品服務，同時音節數已經很多，念起來順口。

我看著 Max 分享給我的畫面，是關鍵字 `Operational Transformation` 搜尋出來的技術論文。確實會一直看到像是 $X'$ 這樣的符號。我雖然不是開發者，也能從他興沖沖的描述裡，理解這對編輯器開發者而言，會是一個更有意義的名字。

# 募資成功，伴隨壓力與喜悅

HackMD 是 Max 北科大的期末作業，[Star Rocket 有做過專訪](https://medium.com/starrocket/hackmd-product-story-1e332f83d343)，這份作業，過了幾年之後，像魔法般地衍生，到了今天，已經變成一個完成天使輪募資的耀眼產品。

身為產品的最初開發者，面對招募來的社群經理、業務開發等新同事，有各種各樣的問題要問他，他偶爾會像是「解釋了一萬遍」的機器表情疲倦。

但每當聽到新的用法、新的詮釋，他又會嘩啦嘩啦開心分享起來。像是「你知道我因此學了好多語言學，還有排版學」，或是興高采烈說著意想不到的使用者，用來做好多他本來完全沒聽過的事。

聽他信手捻來的使用情境，像心智圖一樣從產品衍生出去每一個枝幹，我想，過去幾年他身兼技術的領導，又要帶領台北辦公室的大小事，應該總有許多力不從心的事。募資成功之後，要逐一來實踐了，這條路走起來確實不容易。難怪對 Prime 的描述「變數，經過事件」如此深刻。

>[name=社群經理]對了，您幾歲啊？

>[name=Max]我 1993 啊，所以比你晚一週打疫苗。

# Prime 有太多意思，其實是好事

起初，HackMD 團隊內在選擇改版後收費方案的名稱時，並不特別看好 Prime 這個選手。

![](https://hackmd.io/_uploads/BJCodhuzt.png =600x)

總覺得 Prime 有太多意思了，首先會有點餓，而且似乎用 Pro 或 Plus 才更接近我們的原意。各項名稱選手裡面，團隊成員在共筆裡補著各式各樣的意見，最後才進到決定的環節。

如同文章一開始所說，最後我覺得產品有產品的氣味，創作有創作的初衷，HackMD 有各種用法，所以也經常被詢問「產品調性」是否明確？我們有太多意思。但現在這會變成一個好事。

就像 Prime 有多種意思，下週即將上線的全新方案，是從來沒出現過的「**HackMD Prime 個人方案**」，同時也升級了「**HackMD Prime 團隊方案**」。

HackMD 定位在團隊生產力工具。我們是台灣本土團隊，卻有許多國外的組織、團隊採用，作為內部溝通、協作的平台，也有企業採用自架設的版本，用來銜接數位轉型的困難。

台灣在疫情之後，漸漸也要搭上這個趨勢，但我們仍要推出個人方案，因為有太多的使用者，已經創造出了專屬於他們的個人筆記用法，也期望更好的、加值的服務。個人、團隊、企業，**HackMD 有好多用法，好多意涵，不是內部工作團隊自己決定，也是使用者們跟著我們一起創造出來。** 

:::success
:tada: 免費試用升級版一個月，立刻使用折扣碼：[PrimerONE](lihi1.cc/J4tG4)
:::

Prime 還有一個意思，是「最初的」。許多個人筆記家，他們可能也會用更完整、繽紛的筆記軟體，但「想法最初發生紀錄之處」常是在最快速、便捷、文字為本的 HackMD。Prime 上線，請多指教。:rocket: 


人物：吳承翰，以及他的 HackMD Prime

# 文件：用註腳，俐落收納資料

註腳有種學究味。只有教科書、學術書籍才會在字裡行間穿插蠅頭小數字，一言不合就編到上百號，誰會看呢，我就聽過許多人抱怨書後的註腳內容、參考書目應該全部拿掉，賣便宜一點。

不過，實際撰寫文件，尤其需要做功課再下筆的文件，註腳其實挺好用的。譬如開發產品，常要設想使用情境，拍完腦門拍膝蓋，光憑自己設想還是有點乾，需要引用調查、論壇文章，甚至是論文。又好比一個功能可能有好幾種實現方式，各有優缺點，多半要參考許多討論才能定案，其間的折衷，有時也需要留下紀錄。

我們寫在文件裡的一句話，往往花了十倍時間和力氣調查、比較、分析。文件的讀者可能是主管、同事、外部合作單位或未來的新人，他們不見得下過相當的工夫了解文件的主題，因此，需要額外說明考慮的因素與經過。

傳達論點，同時也希望化解讀者可能有的疑問，所以需要附資料佐證。這時，註腳就是**簡明**和**翔實**的平衡點。

不過在 Markdown 文件裡，怎麼使用註腳呢？

>:point_left: 回到 [HackMD 中文官方部落格](https://blog.hackmd.io/zh) :point_right: [本文單篇連結](https://blog.hackmd.io/zh/blog/2021/10/12/footnote)

# 跟字面脱勾

本來 Markdown 沒有專屬於註腳的語法。HackMD 遵循的主要規範 [CommonMark](https://spec.commonmark.org/) 中，最接近的是「連結參照」。


「連結參照」包含連結標籤、網址、標題（可省）：

```md
[連結標籤]: hackmd.io "HackMD"

[連結標籤]
```

上面這段 Markdown 會被解析為以下的 HTML：

```htmlembedded=
<p><a href="hackmd.io" title="HackMD">連結標籤</a></p>


```
跟常用的超連結功能，也就是`[連結標籤](網址)`，效果是一樣的。

如果寫在 Markdown 文件中，算繪結果如下分隔線夾住的內容（請用 <i class="fa fa-columns"></i> [雙欄模式](https://hackmd.io/Ajzseh5wQbi1KwjqyIXewQ?both)參看 Markdown 的語法）：

---

這裡有一個[連結標籤]，不過連結的目的地其實寫在這個段落後面。

還隔了一個段落。請開 <i class="fa fa-columns"></i> [雙欄模式](https://hackmd.io/Ajzseh5wQbi1KwjqyIXewQ?both)看看呀  :point_up_2: 也可以按 `Ctrl` + `Alt` + `B`。按 `Ctrl` + `Alt` + `V` 可以切回檢視模式。

[連結標籤]: hackmd.io "HackMD"

---

可以發現，上面的寫法跟常用的超連結寫法 `[連結標籤](網址)` 會得到幾乎一致的結果，只是 `[連結標籤]` 可以放在文件的任何位置。

這個「連結參照」其實已經很接近我們從書本、論文接觸到的註腳。不過它有一個缺點：不管你把連結標籤取名為 `[大中天]` 還是 `[AZ]`，它一定會有「字面」，有字面就難以避免跟文件的正文混淆。

印刷文化裡的註腳之所以會演化成蠅頭小數字，固定長在字面的右上角（或用中括號括住），就是要讓註腳成為一種結構，好比樑、柱、牆之於建築，才不會跟正文混淆。

# Caret 不是胡蘿蔔

於是，在各式擴充的 Markdown 語法裡，出現了專屬註腳的語法。 :sparkles: 

HackMD 透過 [markdown-it](https://github.com/markdown-it/markdown-it) 的 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) 支援註腳，而 markdown-it-footnote 則是根據 Pandoc 的[成例](https://pandoc.org/MANUAL.html#footnotes)。所以在 HackMD 當中，我們用以下的語法來寫註腳：

```md
[^註腳標籤]

[^註腳標籤]: 註腳內容

    如果註腳超過一個段落，第二個段落開始請記得縮排 4 個空白字元。
```

「^」：這個符號叫**脱字符**，不過大家比較熟悉的可能是 Y-hat $\hat{Y}$ 的「^」，英文叫 `caret`[^懺悔]。

[^懺悔]: 我每次都以為是胡蘿蔔。

實際應用的情況：

> 我知道有一項研究的主題是，圖書館裡哪種書最常被偷。[^Schwitzgebel][^label_caution]

你發現了嗎？在 HackMD 裡，註腳有兩大特性：

### 首先，你**不需**幫註腳編號。 :exclamation: 

在 Markdown 文件裡的註腳經過解析後，會自動依連結參照出現的順序編號，跟連結標籤的內容（`[也就是中括號裡的文字]`）無關。所以你可以隨時增刪註腳，不用擔心重新編號的問題。

### 其次，註腳的內容可以出現在文件的**任何**位置。 :exclamation: 

一個值得推薦的作法是：把註腳內容寫在註腳出現段落的下一個段落。這樣一來，即使直接閱讀 Markdown 檔案，仍舊很容易讀懂。


![](https://hackmd.io/_uploads/BkTBLZrbK.png =600x)

>你發現「我每次都以為是胡蘿蔔。」只有出現在本文最下方的註腳處了嗎 :eyes: 


# 善用註腳，精簡兼翔實，流通更容易

如果你曾經在 Word 或 Google Doc 裡用過註腳，就會知道**註腳**跟**正文**，屬於文檔的不同部分，而且樣式通常有別；意思是說，在不同軟體、甚至同一軟體的不同版本間，註腳的格式還有可能會跑掉，還要多換心思處理。 :sweat_drops: 

在 Markdown 的情況，因為是純文字的格式，註腳的內容跟正文寫在一起，直接讀沒問題，不必多費心思再去手調格式，文件仍然保持著良好的可攜性。

雖然**註腳**不在 CommonMark 規格中，但已獲得廣大支援（阿就真的好用咩），不擔心淪為語法孤兒，可以放心使用，享受「註腳自己會編號」跟「註腳內容放在正文段落裡也不會被發現」的快感。

下次提案，就利用註腳讓你的文件更精簡、更有說服力！


[^Schwitzgebel]: Schwitzgebel 2009; Schwitzgebel and Rust 2014.

[^label_caution]: 請留意，註腳標籤中間不能有空白。建議使用 `-` 或 `_` 代替，英文也可以用 CamelCase，來兼顧可讀性。

文件：用註腳，俐落收納資料


# 情境：用 HackMD 做「不斷更新」的懶人包


長期搬運敏感資訊進出中國的異議人士突然音訊全無，關心他的人用 HackMD 做了懶人包，此事登上了[《The Diplomat》](https://thediplomat.com/2021/07/ghost-in-the-machine-a-faceless-famous-chinese-blogger-goes-silent/)線上雜誌。

當一個爭議事件迅速發展，各方說法和內容都隨時在更新，不適合貿然製圖、簡化散佈，但，又需要一個平台整理這些內容，方便**不斷更新**，快速打字加段落來補充、修訂，容易畫重點加警語規則，快速排版放圖片，還能開放網友留言補充、更正——沒有比 HackMD 更適合的平台了。

不斷補充「文字、截圖」的事件連載敘述，讓「製作」本身「懶人化」，這是其中一種獨特的 HackMD 使用情境。


>:point_left: 回到 [HackMD 中文官方部落格](https://blog.hackmd.io/zh) :point_right: [本文單篇連結](https://blog.hackmd.io/zh/blog/2021/08/19/eventrecord)

# 哪一份懶人包，登上了國際雜誌？

今年六月，[《被捕、病逝、主动静默，编程随想停更事件长文分析 2021-06-21》](https://hackmd.io/@comemory/programthink-2021-06-21)一文直接以公開發布的形式吸引許多瀏覽次數，因此當時馬上就從 HackMD 的熱門文件裡面發掘到。

同時，這篇文章也在台灣的網站[方格子](https://vocus.cc/article/60d3dd21fd8978000105f34b)發佈，原因是這篇內容的性質屬於政治敏感，要多方的備份，以免資訊突然消失。

這裡，我們並不是要討論任何一份懶人包的實質內容及政治立場，而是，從網友選擇不同網站進行備份的使用方法，很容易**理解 HackMD 在使用上跟單純的部落格、文章發布網站有什麼樣的區別**：

>HackMD 版的事件分析，是不斷在更新內文內容，同時有許多留言不斷在幫忙加註、討論，正適合一篇文章在未定稿、不斷更新狀態下持續撰寫之用。

尤其當一個事件需要「備份」的時候， **「速度」** 是很重要的。

為了即時捕捉事件，我們可能用電腦的內建筆記本來做文字紀錄，或是用截圖來快速存證。這時候，如果有線上同步的軟體工具，可以同樣快速地把文字、截圖放在一起，甚至能簡易排版，就很符合 ==「快速交代一件事並傳播出去」== 這種需求了。

>HackMD 非常注重「編輯器」體驗，堅持在 Markdown 基礎上保留純文字的編輯格式，同時支援直接拉進圖片、嵌入各種格式的功能。

# 共筆體現了事件當下，網友們的合作

在這則事件的傳播上，HackMD 成為最廣泛使用的版本，或許也是因為網友在這份文件上的瀏覽次數即時顯示在介面上，留言、編輯與修改的痕跡也在文件呈現，體現「網友如何協力保留這個事件」。

不只是內容，也是分散式協作的體現，跟事件原初的性質似乎有所呼應，跟 HackMD 的產品初衷也不謀而合。這或許是為什麼《The Diplomat》選擇放上我們的連結。


# 這些功能，對「製作懶人包」特別實用

Markdown 語法有「純文字排版的魔法」之美名，一個井字號是大標，兩個井字號是次標，項目符號和縮排的符號又直觀，對於追求內容邏輯的一致、層次分明的人而言，本來就是相當低門檻的排版方法了。

而 HackMD 額外支援的幾項功能，在迅速大量資訊轟炸的狀況下，又特別適合輔助：
1. ==收合功能==：把暫時不需要全盤佔用版面的文字「收」起來
1. ==區塊上色==：適合標明文件的撰寫規則、免責聲明或重要提醒
1. ==自動目錄==：只要井字號標題層級訂好，可自動產生連結目錄
1. ==彈性權限==：事件發展階段可開放共筆，免費方案可指定三人協作
1. ==版本紀錄==：不斷更新，可能漏掉或要撈回舊內容，不怕手殘誤刪
1. ==雙欄檢視==：時間緊迫，即時渲染省下檢視的功伕，降低寫作門檻
1. ==自訂網址==：文件公開發佈時可以自訂 id 後的網址，方便搜尋
1. ==自訂縮圖==：在社群媒體分享時的標題、縮圖與敘述，更方便傳播
2. ==留言回應==：寫作多少會有疏漏，開放補充、腦力激盪或是善意提醒
3. ==愛心收藏==：擔心文章找不到，可以收藏，同時也給寫作者鼓勵

# 上述功能，你都會用了嗎？

懶人包必備的十項技能，你都知道怎麼使用嗎？這裡很簡短再提醒一下，同時附上相關的教學文件：
1. [收合功能](https://www.facebook.com/hackmdio/photos/4217593094964534)：單行最前面，打三個冒號，選 spoiler 區塊在檢視頁可以收合
1. [區塊上色](https://hackmd.io/s/features-tw#%E8%AD%A6%E5%91%8A%E5%8D%80%E5%A1%8A)：單行最前面，打三個冒號，選 info 等等的都是上色
1. [自動目錄](https://hackmd.io/s/features-tw#ToC)：半形方框框，裡面打上英文字 TOC ，像這樣`[TOC]`
1. [彈性權限](https://hackmd.io/s/how-to-set-permissions-tw)：右上角三角點的分享鈕，可以做編輯、留言的筆記權限設定
1. [版本紀錄](https://hackmd.io/s/how-to-save-tw)：右上角三點點的目錄鈕，第一項圓圈符號就是自動版本紀錄
1. [雙欄檢視](https://hackmd.io/s/quick-start-tw)：左上角三個正方形，是編輯（黑）、雙欄（黑白）、檢視（白）頁面
1. [自訂網址](https://hackmd.io/s/how-to-share-note-tw)：右上角三角點的分享鈕，最上方就可更改發佈網址
1. [自訂縮圖](https://hackmd.io/s/yaml-metadata-tw)：文件編輯頁最上方，三槓區塊內用 YAML metadata 快速制定 
2. [留言回應](https://hackmd.io/s/how-to-use-comments-tw)：檢視頁選取文字反白，就有留言功能，文件最上方有留言總覽
3. [愛心收藏](https://hackmd.io/@docs/like-bookmark-profile)：公開檢視頁最下方有個愛心，按下之後會留存在你的介紹頁

:crescent_moon: 以其中一個「版本紀錄」功能為例，如果很擔心短時間內的共筆協作，會有錯誤或違背了前一個書寫者的想法，可以在撰寫之後「命名版本」來回頭檢視，這樣就能無後顧之憂地「先寫再說！」

![](https://hackmd.io/_uploads/BywWPBsgF.gif)


# 定稿後，可攜性的部分

如果你需要切換不同的生產力工具、筆記軟體或各種網頁編輯器，用 HackMD 撰寫的優勢是  Markdown 語法的通用性，文章不必鎖死在這個平台，也不需要格式調整就能覆用。

:point_right: 點右上角三點點，選擇下載成 **.md** <i class="fa fa-file-text"></i> 的格式，就能匯到任何支援 Markdown 語法的地方。

同時，文件也可以匯出到 Google Drive、Dropbox、Gist 。除了網站的 HTML 檔，若有需要印製成紙本時（過了三十歲，眼睛要好好保養啊！），**用網頁列印選 PDF 格式**也是個容易的選項。

懶人包定稿之後，除了網址連結的傳遞，內容也有可攜性、變換格式容易，而不只是紀錄事件當下的便捷，使得 HackMD 意外成為眾多懶人包發佈的平台。

# 圖文「不斷更新」的應用啟發

不斷補充「文字、截圖」的事件連載敘述，不是 HackMD 獨有的內容，相反地，這種情境可能比我們想像更常出現。從前在 BBS 的文章就經常出現這種型態，到各種論壇、報導文章的網頁用括號來更新，通訊軟體裡的訊息用文字備註跟時間點來追蹤，種種情境都可以看到這種「不斷更新、連載」需求出現在各種突發、多方說法的事件之中。

HackMD 讓這件事變得更方便了，凡是 :bulb: **某些文章**有需要從前補充、往後增補內容，或是 :bulb: **某些報告或計畫書** 需要多人一起啟動協助，克服單打獨鬥的寫作門檻，因而保留一種回頭綜合整理跟對齊口吻和風格的文章；又或者是 :bulb: **某些動態場景的描述紀錄**，內容一直變，又需要多種格式的支援和自動整齊的版面——都可以嘗試轉換來用 HackMD 製作看看，製作效率、應用性會大增喔！

隨著使用者們的互相分享，多元應用的範本漸漸出現在大家面前。未來，我們的社群平台跟部落格，也會為大家整理這些使用情境。

# 還有哪些懶人包可以參考？

許多懶人包皆是以 HackMD 整理，或是以 HackMD 作為最初草稿撰寫協作發佈的地方，由於數量眾多，涉及的事件爭議也各種各樣，這裡就不列舉。建議有興趣的朋友，可以直接 Google 搜尋 `hackmd` & `懶人包` 這兩個關鍵字，或是`hackmd` 搭配事件名稱的關鍵字來找找囉 :eyes: 



情境：用 HackMD 做「不斷更新」的懶人包

# 文件：不怕找不到的 JD 整理術

認真作筆記一陣子，你發現筆記愈來愈多、用途不盡相同，找起來很吃力。

團隊順利完成各項專案，但營運過程接到、製作的各種檔案，**慢慢漫**出不同時期、情境下建立的目錄或標籤。每次花在找文件的時間都快要可以重新製作一份了。

找不到文件、文件找很久，這就是文件的「碎片化」。

打從人類開始製作、保存各式各樣的檔案，碎片化的夢魘就一直糾纏不去。所幸，人們也發明了各種整理檔案的規則，才有辦法管理像圖書館或行政機關等龐大的文件庫。

一個簡單的管理規則：「強尼十進位分類法」（[Johnny.Decimal](https://johnnydecimal.com/)，以下簡稱 JD），可以幫助你整理筆記和文件，克服碎片化的夢魘。

>:point_left: 回到 [HackMD 中文官方部落格](https://blog.hackmd.io/zh)

# 最多兩層！

殺雞焉用牛刀，一般人作筆記、團隊管理文件，用上分類人類知識的[杜威十進位分類法](https://en.wikipedia.org/wiki/Dewey_Decimal_Classification)未免太完備了。「==強尼十進位分類法==」（[Johnny.Decimal](https://johnnydecimal.com/)，以下簡稱 ==JD==），這是一個大幅簡化過後，適合個人和團隊的分類方法。

John Noble 先生提出的 JD 分類系統有兩層，也期待使用者**盡量**維持兩層：

- **領域（Area）**：用 `10`～`99` 的二位數字表示，上限十個，所以每個領域會佔用一個十位數。例如「財務」這個領域佔用 `10`～`19`。
	- **類別（Category）**：再細分領域，例如領域 `10-19 財務` 就可以再細分 `11 信用卡帳單`、`12 券商對帳單`、`13 貸款`、`14 税單`、`15 保單`，上限一樣是十個。

領域和類別組成一個二位數字，接著將相關的文件歸檔時，就可以給它們一個流水號，例如：

- `12.01 202106 ACME 券商對帳單`：第一碼 `1` 代表財務領域，第二碼 `2` 代表「券商對帳單」這個分類，`01` 是流水號（ID）。
- `14.28 2020 所得稅收執聯`

所以，我們可以將要操心的所有事情，分成至多十種領域，各類再細分至多十種類別，那麼 `12.01`、`14.28` 就代表一份獨一無二的文件——同時也緊扣著一大類我們關注、追蹤的事情。

在 JD 中，我們用 `AC.ID` 表記套用 JD 規則的一組代號。

# 這樣做有什麼好處？

別的不說，超好搜尋的啦！例如我在 HackMD 寫筆記，想起日前聽 podcast 聽到相關內容，但忘記是哪個節目、哪個單集，但我知道我的 podcast 筆記都歸檔在 `37` 底下。

那麼我按 `Ctrl` + `Shift` + `P` 叫出 HackMD 的 Spotlight，鍵入 `37`，馬上就篩選出有作筆記的節目。

![](https://hackmd.io/_uploads/HkuFQtPyY.png)

我還是想不起來到底在哪個節目聽到的，但沒關係，我是找不到資料的大人了，`Ctrl` + `Enter`（Windows/Linux）或 `CMD` + `Enter` （Mac），在新分頁開啟筆記吧。

如果你用這個方式命名資料夾，例如：

- `80-89 合約`
    - `80 經銷`
        - `80.01 老王_201607`
        - `80.02 小美_201608`
        - `80.03 老王_201607_附約`
        - `80.04 老王_2018`
    - `81 僱傭`
    - `82 委任`
    - `83 保險`

那麼今天要跟老王續約，想找之前的合約出來看，我們就知道去哪裡找。常用的分類很容易留下印象，所以實際上很有機會直接開啟 `80 經銷` 瀏覽，手甚至不必離開滑鼠。

協作的時候除了傳連結，也可以告知對方：「聖誕節那檔合作的特殊報價，去看 Dropbox 的 `80.03`。」就像去超商買菸的時候，可以告知店員「我要帆船號的茶菸，架上的 64 號。」

# 夠用嗎？

如果一個集合的元素**肯定會超過**十樣，它就**絕對不適合**放在兩層的領域或分類。

不過分店、客戶、經銷商、專案，這些都是預期會超過十樣的東西。該怎麼處理呢？

遇到這類情況，你有三種應對方式：

1. 建立**多個 JD 系統**：連鎖品牌的每家分店都可以有自己的 JD 系統，各自維護。
2. 換個**進位制**：例如 ID 換成十六進位或三十二進位。以十六進位為例，`52.79` 是 `52` 這個分類下的第 121 樣物件。這作法有點瘋，但如果你（和團隊成員）腦筋很靈活，也不失為一種配套。 `只是這就變成 Jonny.Hexadecimal 啦 XD`
3. 在 `AC.ID` 前面再加上三位數的 **「專案」編號**：例如 `102.72.21` 表示專案 102 的 `72.21`。

# 記不起來啦！

`AC.ID` 全部用完會有 100 個項目，別人我不知道，但我鐵定記不起來。定期維護一份索引，有需要的時候開出來查對，然後好好感謝那個高瞻遠矚的自己吧。

`00`～`09` 的領域、以及每個領域下的`00` 分類，可用來存放該領域或分類的詮釋資料（說明該領域或分類的用途等），就像圖書分類裡總論的意思。


此外，索引紀錄歸類資訊的**結構**，不是紀錄事物本身。如果把分類下的東西都放進索引，那就本末倒置了。



# 打破規則，不可恥且有用

John Noble 說明強尼十進位分類法時，提醒我們留意：

- 檔案要歸到一個完整的 Jonny.Decimal 數字對應的目錄下。
- 歸類任何事物的階層深度不超過兩層。

不過 John 自己還是會打破第二條規則——畢竟建立系統的初衷是容易收納、方便取用，不是要刁難自己。有些事務有時間的規律，例如一位接案工作者在 `41 請款憑證` 底下按每年週次建立目錄；有些事務會綁定某個地點，所以總公司的 `38 加盟合約` 下，再按照加盟店別建立目錄。

上述可能都是合理的考量，確實會加速歸檔和提取資料，足以支持我們打破規則。不過打破規則的代價，就是要記憶例外，例外一多起來，我們就無法信任這套分類法，導入它的效益就會遽降。

規則、例外可以靈活切換，重點是龐大的文件量，值得嘗試一種分類方式，擺脫碎片化的夢魘。

# 試試 JD 吧！

如果你還沒有採行某一套分類系統，也常苦惱找不到筆記、檔案等，甚至為此加班重做，那不妨馬上開新筆記，列出你操心、關注的事物，著手把它們分成**不超過**十個領域吧！

:::info
:bulb: 如果你使用 HackMD 來做這件事，一定會不斷用到這組交換上下行的快捷鍵：
- Windows/Linux：`Shift` + `Ctrl` + 方向鍵上下
- Mac：`Cmd` + `Ctrl` + 方向鍵上下
:::

文件：不怕找不到的 JD 整理術


# 技術：為什麼中文打字會裂掉？


中文打字的你，有沒有經歷過「中文裂掉」的窘境呢？例如說，當你想要打「筆記」兩個字的時候，卻變成「ㄅㄧˇㄐㄧˋ」這幾個注音符號赤裸裸地在網頁上，怎麼樣都組不成一個真正的中文字。

這個問題，來自編輯器有沒有好好處理「組字事件」。~~Facebook Messenger 可能就是沒有好好處理組字事件的軟體吧每次更新都超痛的。~~

這一篇，簡單帶大家認識「鍵盤事件」跟「組字事件」，以及這些事件與「協作軟體」的相關性。

這些認識，能夠幫助我們以後開啟 **HackMD 究竟蘊含了什麼樣的技術** 之大門。

:point_left: 回到 [HackMD 中文官方部落格](https://blog.hackmd.io/zh)

## 打字不就是按下去？認識鍵盤事件（Key Event）

![](https://hackmd.io/_uploads/Sy0tsKTa_.gif)


網頁瀏覽器裡面的文字，從鍵盤按下去的那一刻，會啟動一個「鍵盤事件」，這個看似簡單的動作，其實又分成三個操作：keypress, keydown, keyup. 

這邊先簡化一點講 **keydown** 跟 **keyup** ：==keydown==顧名思義是「按下去的那個瞬間」這件事，每一個按鍵都會有一個相對應的 keycode ，按鍵按下去就是取得了那個代碼；同樣顧名思義，==keyup==則是「放開手指頭的那個瞬間」所觸發的那件事。

舉例來說，當你打了「h」這個英文字，沒錯你在鍵盤看到它寫著「h」，在螢幕的網頁上也是「h」，事情相當單純。

```
keydown: h
keyup: h
```

但是，如果你用中文注音輸入法，想要打出「筆」這個字，而且不幸地，笨笨的注音輸入法，在拼字過程中出現了「比」，你還要按往下的箭頭，去選到候選清單上的另外一個「筆」，再多按幾下。

那麼事情會變成怎麼樣呢？

```
keydown: ㄅ
keyup: ㄅ
keydown: ㄧ
keyup: ㄧ
keydown: ˇ
keyup: ˇ
keydown: ArrowDown
keyup: ArrowDown
keydown: ArrowDown
keyup: ArrowDown
keydown: ArrowDown
keyup: ArrowDown
keydown: Enter
keyup: Enter
keydown: Enter
keyup: Enter
```

看到這邊，就可以理解英文字跟中文字，在網頁輸入時候的差別了。

### keydown 跟 keyup 有不一樣嗎？

接著你可能會想，上面的 down 跟 up 冒號後面的內容，不是看起來都一樣嗎？

剛剛說 down 是「按下去的那個瞬間」這件事，但如果你不只按一瞬間，而是**長按**，那麼可以「連續觸發」；相反地，因為 up 的抬起手指頭一定是一瞬間的事，所以沒有辦法連續觸發。

用「筆」來舉例，如果說你家的貓 :cat2: 踩到鍵盤，在你按完「ㄅㄧ」之後幫你按了那個三聲「ˇ」好幾秒，鍵盤事件會長什麼樣子呢？

```
keydown: ㄅ
keyup: ㄅ
keydown: ㄧ
keyup: ㄧ
keydown: ˇ
keydown: ˇ
keydown: ˇ
keydown: ˇ
keydown: ˇ
keydown: ˇ
keyup: ˇ
```

你會發現有 6 個 keydown，但只有一個 keyup。這樣一來，兩者的關係應該就清楚了。用鍵盤玩過電腦遊戲的人，相信此時也有點心領神會了。~~射擊的時候，按下去可以連續觸發，不過如果是那種瞄準了放開按鍵才丟出去的炸彈，那只能丟一次，所以開槍跟丟炸彈分別就是以 keydown 跟 keyup 兩種時刻觸發的吧我想。~~（還是比較像「上膛」&「擊發」呢？）

### 那麼 keypress 是什麼？

再回來介紹， ==keypress== 又是什麼？顧名思義，那是一種「按壓」。欸那跟 keydown 不是一樣嗎？不，這的動作，在「文字按鍵」跟「非文字按鍵」之間會有差別。

例如說，你按「h」會出現的是一個英文字「h」，不過你按「enter」並不是「出現一個字」這件事，而只有會執行這個對應的 keycode。

**keypress 只會出現在「產生文字的按鍵」**，像是「Esc」、「Enter」這些按鍵是沒有觸發的。

例如「英文字的大小寫」這件事，雖然都是按鍵同一個「h/H」，正因為多了 keypress 這個按壓的操作，而能區辨要去拿不同的 keycode 。而這，就是無法透過 down 跟 up 這兩個瞬間就判斷的事情。


## 所以為什麼中文打字會裂掉？認識組字事件（Composition Event）

介紹了 keydown, keypress, keyup 給大家認識，其實是為了凸顯另外一件事的重要性。

剛才說 keypress 是「產生文字的按鍵」才會發生，中文輸入的你，可能會想到下一個問題：

>注音算是「有產生文字」嗎？

注音會有 keypress 的操作嗎？多數時候，答案是沒有。 :no_entry_sign: 

剛剛中文的「筆」在輸入時，鍵盤事件裡拆解出了 keydown 跟 keyup 的每一個動作，不管 down 或 up ，其實都還只出現個別的注音符號和聲調，都==還沒有出現真正的中文字==，對吧？

```
keydown: ㄅ
keyup: ㄅ
keydown: ㄧ
keyup: ㄧ
keydown: ˇ
keyup: ˇ
keydown: ArrowDown
keyup: ArrowDown
keydown: ArrowDown
keyup: ArrowDown
keydown: ArrowDown
keyup: ArrowDown
keydown: Enter
keyup: Enter
keydown: Enter
keyup: Enter
```

:eight_spoked_asterisk: 重點來了：如果要在編輯器裡面使用 CJK （中、日、韓文），像是中文輸入，我們需要的是就不只有鍵盤事件（Key Event），還需要**組字事件（Composition Event）**。

以剛剛我們用注音輸入法打的「筆」為例：

「ㄅㄧˇ」之後還要從候選字庫裡選出對的選項，組字事件是長這樣的：

```
Composition Events:
compositionstart:
compositionupdate: ㄅ
compositionupdate: ㄅㄧ
compositionupdate: 筆
compositionupdate: 筆
compositionupdate: 筆
compositionupdate: 筆
compositionupdate: 筆
compositionupdate: 筆
compositionend: 筆
compositionstart: 筆
compositionupdate: ㄅ
compositionupdate: ㄅㄧ
compositionupdate: 比
compositionupdate: 比
compositionupdate: 🆚
compositionupdate: 筆
compositionupdate: 筆
compositionupdate: 筆
compositionend: 筆
```

看到組字事件的過程，是不是彷彿就看見從 Key event 的「ArrowDown、ArrowDown、Enter」同時地轉換成 Composition Event 的「比、🆚、筆」呢？

這就是組字事件，有別於鍵盤事件。唯有出現在「需要組字的語言」情境。

>註：每個瀏覽器的桌面、手機行為不同，也有可能有不同結果。可以用[我們的開發者 Max 寫的 codepen](https://codepen.io/jackycute/pen/EvNmWv) 來測試看看。

## 有沒有處理「組字」，會差很多

為什麼有些軟體服務很好用，但改版時，中文輸入就是有那麼一點卡卡的？經常「裂掉」而無法順利的組字呢？~~像是經常改版更新的 Facebook Messenger（到底多創傷要一直提）。~~

其實，就是在接收各種文字輸入者的「組字」過程時，沒有考慮到「組的過程出現的『字』」這個元素，要如何在編輯器裡面處理。很可能，因為也是在軟體更新時，忘記測試到這些語言啦！

>在撰寫這篇部落格的同時，也發現到我們的成員 [Yukai](https://hackmd.io/@Yukai) 曾經對 VSCode 發過一個組字事件的 PR: [Fix backspace in IME composition on iOS Safari](https://github.com/microsoft/vscode/pull/40546)。

## 何況還要「協作」！

如果一個編輯器，沒有想過它要接收的語言輸入裡面，會遇到「需要組字的語言輸入內容」，在 keypress 這端就漏掉了「組字過程中會產生的『準文字』」。

當然，換個角度想，如果沒有這些組字語言的使用者，這樣的需求與問題，也就不存在。

更重要的是，如果一個「協作」編輯器，沒想到要處理的不只是鍵盤事件，也還要處理組字事件，那麼在即時協作（Realtime Collaboration）這件事情上，恐怕就會遇到很多難關了。

每個軟體的產品定位不同，像是 Notion 就對於同一區塊的協作處理著墨較少。多人、同時編輯時，不容易找到對方在哪裡（沒有顯示游標），同時編輯一個區塊，甚至會出現某一方被蓋掉。

>測驗「協作」最嚴峻的考驗，就是找人一起，在編輯器同一行，打字，看看會發生什麼事。

介紹鍵盤事件、組字事件，是因為未來在談論「協作」這個技術時，能夠幫助認識解法的各種可能。

## 怎麼看得出來，編輯器有處理「組字過程」？

文章開頭，提到了「中文打字裂掉」的情境，這是許多人在使用如 Google Doc、Dropbox Paper **同時打字**經驗時曾經遇過的狀況。

干擾組字事件的可能因素有很多，端視軟體的演算法，想要優先帶給使用者什麼樣的體驗。

HackMD 在 keypress 這端，將「組字過程」（以注音輸入法來說，就是注音符號拼起來選取中文）也當成一個事件傳送出去。所以你跟夥伴在協作的時候，是可以看對方的「組字過程」的唷！

有時開會，共筆編輯時，也難免有點赤裸感，按鍵輸入過程都即時呈現出來了。~~說不定可以衍生用法藉此來迂迴委婉表達一種想說又不敢說得太明白的感覺呢。~~


## 測試看看你有在用的軟體，有沒有把組字事件傳送出去？

不同的編輯器和筆記軟體，有不同作法，你可以回想看看——

>你曾經看過「組字過程」出現在共筆文件上面嗎？

假設你的共筆對象，要打出「筆記軟體」這四個字——

- 你曾經在文件上，看到 ==「ㄅㄧˇ 筆 ㄐㄧˋ記」== 的這個過程嗎？

還是說，你會直接看到對方打出了「筆」——

- 然後隔了零點幾秒，游標顏色、底線閃爍，再看見對方打出了「記」、「軟」、「體」？

還是說，是等了多秒之後，對方已經打完好一陣子了，

- 你才看見「筆記軟體」這四個字？

各種做法有其優劣。以追求寫作流暢度、文字快速產出為優先的 HackMD 而言，將組字過程納入協作的一環是必要的，同時也會帶來較大的伺服器負擔。這就要回到產品的核心價值了。

## 還以為是筆記軟體，原來是線上遊戲

HackMD 的開發者 Max 曾經說過一句話：「這就像**大型多人線上即時遊戲**！」

單一個人輸入者，在編輯器上打字時，文字輸入即顯示的快慢，已經是一個重要的體驗了。

何況是兩個人以上，三個人、三十個人，同個時間在同一個編輯器上瀏覽、編輯時，就像多人即時的線上遊戲。有些玩家給出了一個動作，另外一個玩家反映了另外一個回饋，遊戲內的角色又要怎麼去處理多重拋接球及在互動過程的衝突干擾，而能順利闖關。

嵌入一個什麼，就像突然飛來一隻巨獸；玩家逃跑的時候需要一個傳送門，從戰場快速回到安全的堡壘；對了，還要跟隊友溝通聯繫戰術等等的事情。這種腳本，也通用在協作軟體的使用情境裡。

**鍵盤、組字；多使用者；即時輸入到文件裡——而能夠流暢——可能是個比你想像更複雜的事。**

從遊戲體驗的共鳴出發，以「讓大家快樂做筆記」為核心去開發產品，是我們的核心價值。

這些技術，還有許多可以深挖的有趣內容，就留待未來，慢慢分享了。

###

#### 參考資料
- [現代瀏覽器的拼字處理 Max Wu @ COSCUP 2017](https://hackmd.io/@MaxWu/HackMD-COSCUP2017#/)
- [透過 Composition Events 增強非拉丁語系輸入法對輸入框的支援](https://kuro.tw/posts/2016/10/11/%E7%AD%86%E8%A8%98-%E9%80%8F%E9%81%8E-Composition-Events-%E5%A2%9E%E5%BC%B7%E9%9D%9E%E6%8B%89%E4%B8%81%E8%AA%9E%E7%B3%BB%E8%BC%B8%E5%85%A5%E6%B3%95%E5%B0%8D%E8%BC%B8%E5%85%A5%E6%A1%86%E7%9A%84%E6%94%AF%E6%8F%B4/)
- [keydown, keypress, keyup 的差異](https://github.com/jijigo/notes/issues/30)
- [比較 keydown, keypress, keyup 的差異](https://medium.com/@yitailin/%E6%AF%94%E8%BC%83-keydown-keypress-keyup-%E7%9A%84%E5%B7%AE%E7%95%B0-4e873ba17e81)



技術：為什麼中文打字會裂掉？


# 文件：非同步工作的成功關鍵


受疫情影響，許多人體驗了一段在家工作的日子。縱然在家工作，大多數公司是把同在一處的工作方式移到線上，上、下班換成在通訊軟體上打卡，上班時間要求員工開語音、開視訊，本來有開的會議一個都沒少，甚至因為不習慣開線上會議，時間反而拖長。

換成遠端工作，如果能搭配==非同步==的工作方式，更能彰顯遠端的優勢。

## 什麼是「非同步」？

非同步，意思是團隊成員的工作時間不必一致。你工作的時候，我可能在陪孩子。我工作的時候，你可能在做家事。我們都呼呼大睡的時候，地球另一端的成員亮起了上線的燈號。 :crescent_moon: 

「不必一致？那開會怎麼辦！」非同步工作的團隊，成員往往散布在不同時區；但就算共處在同樣時區，成員之間仍然可以尊重彼此的作息，採取非同步工作的模式。

跟同在一處的團隊相比，非同步工作的團隊更難約時間、開會的成本更高。表面上的劣勢，卻未必不能轉換成優勢。

非同步的團隊仰賴各式文件來溝通，雖然需要較長的準備時間（打字畢竟比說話慢），換來的好處是充分的思考（可能會發現同事變更成熟了）。

此外，成員要貢獻想法，文件打開隨時補充；搭配版本控制，決策過程更容易稽查。 

## 不是每個人都習慣「文字」溝通，怎麼辦？

覺得文字太冰冷，線上白板和短影片都能輔助溝通，有些公司甚至有內部的 podcast。聲音和影像都可以重新鑲嵌在文件裡（至少 HackMD 沒問題）。

知名的架站工具 WordPress，其出品公司 Automattic 內部就[使用](https://wordpress.com/p2/) WordPress 架設的部落格溝通。

## HackMD 內部又是如何「非同步工作」呢？

HackMD 團隊的成員目前分布在兩個時區，內部當然也大量仰賴文件來溝通——當然，**我們的文件都使用 [HackMD](https://hackmd.io) 來管理。** 

最近我們要為付費方案取名，過程是這樣的：首先當然先開一份文件，列上標題，敘明這是一篇為付費方案取名的投票箱。 :ballot_box_with_ballot: 

行銷團隊先考察、整理了一些方案，再讓其他成員提案，接著投票，重要的是附上理由。非同步的狀況下，只要訂下一個截止時間，成員都可以在時段內思考、修改跟定稿他的選擇。

藉著顏色區分，不同人的意見在 HackMD 的編輯器裡一目了然；雖然不在同一間會議室腦力激盪，彼此的想法仍然在各自的腦海裡迴響，激發新的創意，隨時更新，直到新意收斂，再作統整。

>所以收費方案到底叫什麼名字？還請期待～

## 小孩子才做選擇：同步、非同步的排列組合

同步或非同步工作各有利弊，視公司的規模、業務性質等兼採所長，會是務實又聰明的作法。 

目前常見的安排，是以同處、同步工作為主，提供遠端工作的彈性；在同步工作的情境裡，納入非同步工作的前提。

組織性質與工作流程的排列，掌握到最舒適與效率的組合。這樣去重新檢視文件工具的使用，或許會有不一樣的啟發。

本文連結：https://blog.hackmd.io/zh/blog/2021/07/24/async-work


文件：非同步工作的成功關鍵


# 人物：初登板的新夥伴


2021年，HackMD 有一個重大的變革，就是首度公開對外招募夥伴了。

今年年中，新夥伴一個一個陸續加入，HackMD 正在忙著，長成稍稍不一樣的樣子。

## 新夥伴是誰，怎麼會加入 HackMD 呢？

2018年6月29日，HackMD 的宗鎧，寄出了一封名為「使用者訪談 - 文播手」的信。

> HackMD 的使命是：促進知識分享。文播對我們來說是一個好像可以發揮我們的價值，但是我們並不瞭解的使用情境，還希望能多多請教！

顧名思義，「文字轉播」是透過文字來進行一場會議、活動，或是任何一個討論脈絡的詳細記錄。比起逐字稿那種全面性的文字輸出，經由人類聽打、消化而書寫的文件，更有可讀性。

> 只需要對議題有初步了解，剩下就是勞力密集的「聽打」。但這項簡單的「聽打」卻奠定出一種文本傳播基礎，改寫公民社會運作。——[端傳媒：「打字，轉動公民社會」](https://theinitium.com/article/20160602-opinion-enenhsu-g0v/)

除了自己振筆疾書，在像是 g0v 等知識交流的研討會上，眾人一起共筆，協作文件裡面大家運用文字來捕捉內容、留下紀錄、互相溝通。這是文字愛好者的解放，不用拘泥於完整的文章書寫。

但是，文播手如果只是一個人，肉體極限上不可能撐太久，需要協作夥伴。跟許多使用者一樣，文播手也經歷了這個平台轉移路徑：**Hackpad ➡️（dropbox paper, google doc）➡️ HackMD**

對於打字速度飛快、需要持續性 typing 的文播手來說，中文輸入的協作不干擾，沒有比 HackMD 更出色的產品了。從 2018 年，文播手比任何人都更清楚，順暢的共筆協作，是一件多麼珍貴的事。

> HackMD 開始招募新成員 與我們一同創造未來吧！—— [HackMD 粉絲專頁](https://www.facebook.com/hackmdio)

2021 年，懷著對這個產品的好印象，這名文播手加入了 HackMD。（他只是其中一個，新夥伴。）

上工的第一個月之後，曾經的文播手，開始撰寫這篇部落格文章「HackMD 最近在忙什麼？2.0」。


## 新夥伴的第一個月，都在忙些什麼呢？

從 ~~大寶山、筆記家、玩樂團~~ 發臉書、做訪談、說故事，開始說起。

### 1. 發臉書：發現 HackMD 是座大寶山 :mount_fuji: 
新夥伴，並不是工程師，當他加入 HackMD 這個團隊之後，發現團隊夥伴跟他們的朋友，使用這個產品的方式，有點不太一樣。

他以前只知道打字體驗很舒服，共筆做會議紀錄很流暢，做草稿的發佈區很方便，Markdown的排版容易上手。他曾經在編輯文章時，被路人問說「你是工程師嗎？」😹 `我是麻瓜RRR`

因為黑底跟編輯器左邊「第幾行」的這種介面，實在太像在寫 code 了。當然他一直知道 HackMD 的編輯器似乎對於保存程式碼很友善，不過他都把這功能當作小字註解在用。 `就像這樣偷murmur`

> 原來，不同身份的人，會有完全不一樣的使用情境。

新夥伴在跟同事的聊天中，才發現原來 HackMD 有這麼多隱藏功能。說是隱藏，其實可能只是不好找，又或者對某些使用身份的人來說，他們還不知道怎麼善用這些功能。

新夥伴的第一任務，或許也是最容易上手的任務，是要在臉書粉專上發文。

於是一系列的發文以「你知道嗎？」為題，這個問題意識，所體現的就是一個特定身份的使用者，因為只看到 HackMD 的一個斷面，所以沒挖掘到的有趣功能。

> 另一名新夥伴，是這麼說的：HackMD 是一座大寶山 :snow_capped_mountain: 

在臉書發出一系列的功能教學文之後，他發現好多使用者，也不知道 HackMD 有這麼多炫砲的功能。或許在許多面向上，因為團隊過去的人手不足，而未能擴張去做的事情，現在都該來做了。


### 2. 做訪談：發現有孤獨筆記家，也有分享知識家 :man_and_woman_holding_hands: 

發現使用情境的不同，於是新夥伴開始做訪談。有很多身邊的朋友，屬於對知識有熱忱，需要快速簡潔的編輯器來充實自我。他們的筆記很豐富、很美，但多是自己默默整理。

曾經，在 FB 粉專上做了調查，發現會主動來填寫問卷的粉絲們，多是屬於這種「孤獨的筆記家」。孤獨的筆記家，並不是真的孤獨，而是能夠在撰寫筆記的過程中，品味一個人寫作的美好。

還有許多的筆記家，同時也是「分享知識家」。公開發表的筆記、邀請協作的筆記開出來，不特定的人們打下字，獲得的不是利益上的回報，而是知識觀點交流，更像是傳統上的「筆友」？:pencil:

原來， HackMD 後來才開發的留言功能，更多元的編輯多能，在拓展人們交流互動上扮演了這個角色。難怪，接近下半年，眾多研討會的共筆文件，都是採用以 HackMD 建置的書本模式。

除了筆記家之外，以「團隊」為單位的使用群體，他們往往需要快速把珍貴的討論紀錄下來，有時候不同的夥伴要肩負紀錄的任務，同時有好多人打字、補充，協作的流暢度成為團隊的首選。 :1234: 

> 團隊為了把筆記權限、圖片隱私的控管做好，可能會付費購買「私有團隊」方案，以外國人，尤其美國和日本特別多。或許是為軟體付費的習慣，或是工作文化差異，這部分還不清楚。

為企業所打造的客製化版本，又是另一個世界。當新夥伴接觸了企業客戶，發現原來大組織內部，各個部門在使用不同工具時，能夠在各種狀況下使用 HackMD，又增進了好大一塊理解。:office: 

> 個人、團隊、企業所需要的並不盡然相同。甚至企業內的需求，也很不一樣。

邊做訪談，邊探索著大寶山的內容，圖像越來越完整了。總之，無論是默默寫著筆記，在適當的時刻分享給其他人；團隊內以累積、任務取向，更追求效率及產出的組織社群；企業跨部門的文件溝通，多種工具結合成工作流程——

當共享、共筆、共創的價值出現，新夥伴就覺得，來到這個地方工作真是一件好事。

### 3. 說故事：怎麼想都覺得比較像是玩樂團 :guitar: 

新夥伴第一次加入新創公司，讀過 HackMD 最早期成員的故事。其實好幾個成員，年紀都還比新夥伴小一點點，這種青春熱血的味道，很像是獨立樂團的故事。

玩樂團，往往來自學生時期的熱音社之類，出於對音樂純粹的愛好，或是社團教學什麼的契機，漸漸對創作有熱忱，甚至發過在地下圈子迴響不錯的 demo ，畢業後，很多團員只能撥有限時間練團。

在聽團仔的圈子裡，這個樂團已經小有名氣，粉絲引以為傲。甚至也有幾次大型亮相的機會，資源的連結，受到鼓舞。團員們必須下定決心，是不是要走音樂這條路，去搞一張完整的專輯看看。 :cd: 

發行專輯之後，就會遇到許多真正在產業裡的挑戰，原來跟市場打交道，是一個漫漫學習的長路，有陸續加入的夥伴，專輯的風格與早期的 demo 或許調性也有點不同了，許多的取捨。

> 新夥伴有時候會被別人問：你為什麼會到這家公司來？你們在賣什麼？你們公司怎麼樣呢？

新創團隊的語言，多少學會了一些，不過在新夥伴的心中，其實 HackMD 就是一個還在發展與摸索的獨立樂團。作品無疑是受到多方肯定的，才會一步步走往專業。 :film_projector: 

不過，要讓樂團生存下來，不能只有埋頭苦幹做專輯，這一點大家都很清楚，真正要謀取平衡的時候，就會有好多實作的難題，那又有好多的故事。

新夥伴，像這個樂團的經紀人，有時也參與專輯製作的一隅。說故事的同時，也成為故事中的角色。


## 邁向 2021 的下半年，HackMD究竟在忙什麼？

新夥伴的第一個月，發現處處有想要動手實作的坑，似乎會繼續有機生長下去，像新芽長出來一樣，冒出了頭，還有許多探索的方向。

在暈頭轉向的多任務，以及探索的新鮮感之中，不時回到心中的叩問「我們的產品是什麼:question:」

這個問題，團隊內當然早就有一些答案，但如果不是新夥伴自己找出來的，似乎就不是那麼踏實。

網路上搜尋，會有一篇最動人的解答，那就是 「[為工程師文件而生的協作平台](https://medium.com/starrocket/hackmd-product-story-1e332f83d343)」，讓開發者社群能夠更加喜愛、善用且重視文件，讓文件變成一個轉換價值的重要橋樑。

對新夥伴來說，同時也是「為文字工作者而生的協作平台」，因為所謂的文字工作者，早就不只是作者、記者、紀錄者，更是所有透過文字來創造價值的人。

或者，好像還可以追加「我們的產品『還能』是什麼:question:」這樣的問題。

當然，很多時候，也有「我們還『無法』、『來不及』、『不適合』做什麼:question:」這樣的問題。

所以，**「究竟在忙什麼？」** 這個問題，可以很簡單，也可以很複雜。

對這個，似乎總是做得太多、說得太少的團隊而言——用更多管道，更豐富的語言，去回答這個問題，說給更多的人聽，就是新夥伴的任務。



人物：初登板的新夥伴


# HackMD 最近在忙什麼？

本篇文章的標題原本是叫做「HackMD 2019 年度回顧」的，不過由於筆者拖了又拖，從聖誕節拖到農曆新年，再從新年拖到了 228。2020 都已經要過完第一季了還在開天窗，只好忍痛改了標題 😂

在過去的幾個月，HackMD 團隊不斷努力為大家帶來更好的協作體驗。忙了這麼久，也該說說自己做了什麼吧！這次的文章將會總結最近一年 HackMD 在產品各個面向帶來的改進，錯過我們臉書貼文更新、或是很久沒關注 HackMD 消息的朋友，也可以藉此複習一下。

就讓我們開始吧！

## 利用範本快速建立新筆記

在[四月時][fb-template] HackMD 上線了「[範本][tutorial-template]」功能。利用範本，你可以快速的以預設內容來建立新筆記，不用每次開新筆記時，都得重複複製貼上。我們也提供了幾種不同的預設範本，像是會議記錄、簡報、README範例 等，讓對文件比較陌生朋友能夠快速上手 :handshake: 

![](https://i.imgur.com/u8scNrU.gif =500x)**使用範本建立筆記**

[fb-template]: https://www.facebook.com/hackmdio/posts/2270037116386818
[tutorial-template]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-use-template-tw


## 內容時光機 - 版本功能再度進化

HackMD 甫一上線就支援版本功能，隨著時間過去，我們也不斷地強化版本功能。在[七月時][fb-revision] 我們推出「[命名版本][tutorial-revision]」功能更新，以往的 HackMD 會每隔十分鐘定時建立版本記錄，如果使用命名版本，你就可以在任何時候建立新的版本，還可以留下版本名稱和敘述，讓這個版本有意義。

除了新增版本，你也可以[比較任意兩個版本的內容差異][tutorial-diff]。用更 geeky 的字來說，就是 `git diff` 啦！

![](https://i.imgur.com/orBlzdj.gif =500x)**新增命名版本**

![](https://i.imgur.com/nP1NscE.gif =500x)**比較版本內容差異**

[tutorial-revision]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-save-tw
[tutorial-diff]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-save-tw#%E6%AF%94%E8%BC%83%E7%89%88%E6%9C%AC
[fb-revision]: https://www.facebook.com/hackmdio/posts/2412143235509538

## Markdown 表格編輯新體驗

對新手來說，Markdown 的表格一直是個難以上手的存在：需要特別記憶的符號、難以輕鬆的排版。筆者在過去也時常運用 [Markdown Tables generator](https://www.tablesgenerator.com/markdown_tables) 這類的網站，來幫忙快速生成 Markdown 表格語法。

![](https://i.imgur.com/795YQ3f.png =300x)**[ネタ](https://zh.moegirl.org/zh-tw/%E6%AC%A7%E5%B0%94%E9%BA%A6%E7%89%B9)**

不過看筆者這樣敘述就應該能猜到，在 HackMD 上建立表格已經不再是個痛了！HackMD 在十一月時推出了 [表格編輯][fb-table] 功能，除了有工具列的按鈕可以輕鬆調整表格欄列，還有給高效使用者專用的[表格快速鍵][tutorial-table]：

![](https://i.imgur.com/4eWcmDr.gif =500x)**利用快速鍵建立表格**

[fb-table]: https://www.facebook.com/hackmdio/posts/2699478126776046
[tutorial-table]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-table-tw

## 全新的首頁，全新的設計

儘管沒有大張旗鼓，你可能悄悄發現 HackMD 的首頁長得和之前不太一樣，這些改變都是為了讓初次遇到 HackMD 的新朋友能更快瞭解我們。

此外我們也大幅更新了 HackMD 網站各個頁面的設計，改善了易用性以及頁面切換速度。

![](https://i.imgur.com/iAxGCoj.png =500x)**HackMD 的新首頁**

![](https://i.imgur.com/8hYGByC.png =500x)**筆記總覽頁的新設計**

## 通知中心，不錯過新訊息

以往只要筆記更新或是有新留言，HackMD 就會寄送通知信到你的電子信箱，但有時信件太多，你可能因此忽略了重要的訊息。HackMD 在[今年初推出了全新的通知中心][fb-notification]，明確劃分了不同通知層級，並設計了簡潔漂亮的通知中心介面來收納通知，從此你不會再錯過重要的新訊息！

![](https://i.imgur.com/A7UHEbE.png =500x)**在通知中心縱覽所有新訊息**

[fb-notification]: https://www.facebook.com/hackmdio/posts/2797404056983452

## 外部服務整合與擴充功能

在 2019 這一年，我們整合了更多的外部服務。在[三月底][fb-account-integration] 上線的多 OAuth 授權整合功能，讓你用多組社群帳號（如 Facebook, Twitter）登入同一個 HackMD 帳號。在[八月初][fb-github]，我們整合了 [HackMD 的版本功能以及 GitHub 版本控制][tutorial-github]，你可以用 HackMD 來編輯、同步、更新 GitHub 上的檔案。

[fb-account-integration]: https://www.facebook.com/hackmdio/photos/a.1004391802951362/2251889861534877
[fb-github]: https://www.facebook.com/hackmdio/posts/2475780629145798
[tutorial-github]: https://hackmd.io/c/tutorials-tw/%2Fs%2Flink-with-github-tw

在 2019，我們也持續更新 HackMD 的瀏覽器擴充功能：[HackMD-it][tutorial-hackmd-it]。在[九月時][fb-hackmd-it]，HackMD-it 支援了釘選筆記以及新的設定介面。

也同樣在九月，我們在 VSCode Marketplace 發佈了 [HackMD VSCode][vscode-hackmd] 擴充功能。即使身處離線環境，我們也能在 VSCode 裡撰寫相容 HackMD 的 Markdown 語法，並即時預覽：

![](https://i.imgur.com/X31HZqm.png =500x)**在 VSCode 裡寫 HackMD Markdown!**

[fb-hackmd-it]: https://www.facebook.com/hackmdio/posts/2525902220800305
[tutorial-hackmd-it]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhackmd-it-tw
[vscode-hackmd]: https://marketplace.visualstudio.com/items?itemName=HackMD.vscode-hackmd

## 協作與社群

在[五月時][fb-invitation]，HackMD 上線了筆記的 [邀請協作][tutorial-invitation] 功能，輸入使用者名稱或 Email，搜尋並邀請你的夥伴一起編輯筆記，並能進一步的調整協作者的權限。

![](https://i.imgur.com/zxUnb1B.png)**邀請介面**

在[九月初][fb-team-private-testing]，藉著與台灣微軟合辦的[一場小聚][hackmd-meetup]，我們偷偷上線了團隊功能並進行了封測。最近我們更加完善了團隊功能，並推出「開放團隊功能」。只要你有協作的需求，你可以新增一個團隊，在把夥伴同學們邀請進來，讓協作更有效率！

![](https://i.imgur.com/ixspMDF.png )**打開首頁左上角的「空間選單」，選擇「建立新團隊」**

![](https://i.imgur.com/XfgbeYq.png )**如果團隊的筆記能讓全世界都受益，可以將「團隊隱私性」設為「開放」哦！**

[tutorial-invitation]: https://hackmd.io/c/tutorials-tw/%2Fs%2Finvite-tw

[fb-team-private-testing]: https://www.facebook.com/hackmdio/photos/a.1004391802951362/2527782943945566
[fb-invitation]: https://www.facebook.com/hackmdio/photos/a.1004391802951362/2325041240886405
[hackmd-meetup]: https://hackmd.kktix.cc/events/markdown-vscode-github-developer-meetup

## 邁向 2020...的 Q2 啦！

你以為我要說的是邁向 2020 嗎？答錯了，因為 2020 年的第一季都快過了 :joy: 

回顧近一年的 HackMD，在[編輯體驗](#利用範本快速建立新筆記)、[介面設計](#全新的首頁，全新的設計)、[外部整合](#外部服務整合與擴充功能)、[團隊協作](#協作與社群)等，各個方面都有巨大的升級。在接下來的一年，開發團隊也會繼續卯足能量，會各位帶來更好的 HackMD！

順便在這裡預告一下，最近團隊正在加緊努力的讓「提及」功能上線，以後在筆記就可以用「**@**」符號來標記協作夥伴，請他們出來乖乖面對囉 :sunglasses: 



HackMD 最近在忙什麼？


# HackMD 新部落格開幕

嗨！歡迎來到 HackMD 的新部落格 🤗

HackMD 的新功能，除了能在站上的公告欄看到外，你也可以在 HackMD 的社群帳號，[Twitter](https://twitter.com/hackmdio) 帳號以及 [Facebook](https://www.facebook.com/hackmdio) 粉絲專頁上看到。

不過社群網站的貼文容易被淹沒，我們需要一個地方能妥善整理所有關於 HackMD 的新資訊，讓所有 HackMD 的新朋友能夠清楚的看到我們的軌跡。這些資訊到底該放在哪裡呢？聽說有個服務名字 Hack 開頭 MD 結尾，拿來寫 Markdown 超方便，又支援多人共同協作，不如就來試試看吧！🤩

![](https://i.imgur.com/zI2vgHp.png =500x)
**▲ HackMD 的臉書粉絲專頁**

![](https://i.imgur.com/1p3zD3w.png =500x)
**▲ HackMD 的官方 Twitter 帳號**

![](https://i.imgur.com/lNwP1ej.png =500x)
**▲ HackMD 的公告欄**


## HackMD 的書本模式

如你所見，我們的部落格就在這裡誕生囉，而且可能會讓你有點驚訝的是，這個部落格是用 HackMD 的「[書本模式][book-mode]」做的！

書本模式是什麼呢？書本模式是在 HackMD 裡**整理多篇筆記**的功能，它可以將多篇 HackMD 「整理成一本書」，透過側邊欄來瀏覽、切換多頁筆記內容。我們該如何使用呢？

1. 開一篇新的筆記，並使用無序清單來整理多篇筆記的連結
    ```md
    - [連結 1](https://hackmd.io/link-to-note-a)
    - [連結 2](https://hackmd.io/link-to-note-b)
    ```
2. 設定筆記共享模式為書本模式，並按下預覽
    ![](https://i.imgur.com/TzU0tA2.png =300x)

一本簡單的小書就完成了！

![](https://i.imgur.com/fKoIb1f.png)
**▲ 書本模式完成圖**


我們把每篇部落格文寫在 HackMD 上，再使用書本模式來整理文章，部落格文章的首頁即是以書本模式發佈的 HackMD 筆記。

不過看到這裡你可能會想：「騙誰啊！書本模式明明跟我現在看到的部落格長得完全不一樣啊！！」

確實，要完成現在你看到的 HackMD 部落格，還需要一點點的 *hack*！

## 在 HackMD 自訂筆記樣式表

這 **一點點的 hack** 指的就是 CSS！CSS (Cascading Style Sheets) 是網頁製作中不可或缺的要素之一，筆記的字體、顏色、粗細、排列方式都交給 CSS 定義，而且有一點很重要：

**HackMD 是可以自訂筆記的 CSS 的！**

只要在 Markdown 的編輯區輸入 `<style>` 標籤，HackMD 會自動把裡面的樣式套用到筆記，你甚至可以像寫網頁一樣自訂自己的元素或各種內容喔！

拿 CSS Tricks 的 [The Shapes of CSS](https://css-tricks.com/the-shapes-of-css/) 當做例子，裡面有一段用 CSS 畫月亮的程式碼如下

```css
#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}
```

讓我們把這段程式碼貼進 HackMD 的筆記裡：

```md
## Title

<div id="moon"></div>

<style>
#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}
</style>
```

就能在 HackMD 筆記中成功畫出月亮了！

![](https://i.imgur.com/JF8lLu0.png)
**▲ 在 HackMD 使用自訂 CSS 畫月亮**

透過 CSS，我們甚至可以大幅度的改造 HackMD 發佈樣式，下面兩個主題分別為直書排版和閱讀器主題。自訂 CSS 有著無限的可能性，歡迎大家來玩玩！

![](https://i.imgur.com/b3ICfHq.png)
**日文直式排版範例 ([連結](https://hackmd.io/@yukai/BJlXYPEcr))**

![](https://i.imgur.com/MbbgzVV.png)
**Reader 主題 ([連結](https://hackmd.io/@yukai/BkQM8MNmS))**

## 使用內嵌筆記功能共用筆記樣式表

當多份筆記中有許多共通內容時，身為一個軟體開發者，根據 **Don't repeat yourself** (DRY，不要重複你自己) 原則，我們應該共通的部分拆分出去。

程式碼可以用模組的方式共用，那筆記內容呢？這種「提出共用內容」的功能，在 HackMD 我們把它稱為「[內嵌筆記][embed-note]」，內嵌筆記的用法分成三個步驟：

1. 建立一篇共同內容的筆記
2. 複製筆記的 ID
3. 使用內嵌筆記的語法，在想要使用共同內容的筆記，內嵌該筆記內容
    :::info
    &#x7B;%hackmd 筆記ID %&#x7D;
    :::

<style>
.alert.alert-info {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    background-color: #f7f7f7;
    border: none;
    color: #333;
    font-size: 85%;
}
</style>

讓我們看個實際例子吧！首先我們先建立一份準備裡面有共用內容的筆記，在網址列後面的部分就是這篇筆記的 ID，我們把它複製起來

![](https://i.imgur.com/LHO51pN.png)

接著到另一篇筆記，輸入內嵌筆記的語法：

:::info
&#x7B;%hackmd IZkuNzoQSjCNfEGOd0bESA %}
:::

![](https://i.imgur.com/OV40hze.png)

可以看到剛剛在另一篇筆記的內容被嵌進來了，只需要一行引用的語法。利用[內嵌筆記][embed-note]功能，我們可以將筆記的共用內容提取出去，提取的內容當然也包含樣式表，以中文直書主題為例，在你的筆記加上以下語法：

:::info
&#x7B;%hackmd @yukai/vertical-writing %}
:::

就可以讓筆記的發表模式以直書排版顯示囉！

![](https://i.imgur.com/b3ICfHq.png)


## 成果

在組合了「書本模式」、「自訂樣式表」、「內嵌筆記」這幾個 HackMD 功能，我們的部落格終於完成了！

![](https://i.imgur.com/FdzHM3p.png)


經過本文的介紹後，各位是否對 HackMD 的這幾個功能有了更深的理解呢？更多關於這幾個功能用法，可以參考 HackMD 的使用教學：

- [書本模式][book-mode]
- [內嵌筆記][embed-note]

**Happy Hacking!**

[book-mode]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-book-tw
[embed-note]: https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-embed-note-tw

---

HackMD 新部落格開幕


# Live Streaming Your Note

Hello markdown hackers,

You can now live stream a collaborative note! :ocean: 
Share your window scrolling with your collaborators, so they don't get lost! :cold_sweat: 

[Learn how now.](https://hackmd.io/c/tutorials/%2Fs%2Flive-hosting)

And don't forget to [let us know how you think and how we could improve!](https://github.com/hackmdio/hackmd-io-issues/issues)


Live Streaming Your Note


# Sync a Note with GitHub

Hello markdown hackers,

:tada: **GitHub Sync is HERE!** :tada:

You can now **link a HackMD note with a Markdown file on GitHub** to keep all your documentation in sync. :arrows_clockwise:

[See how to sync with GitHub!](https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github)

Also, choose your line break rendering rules for :one: note or ALL :100: your notes!!

[Let us know how you think and how we could improve!](https://github.com/hackmdio/hackmd-io-issues/issues)


Sync a Note with GitHub


# Save and Name a Note Version

Hello markdown hackers,

You can now **save your notes manually and name the version**. :open_file_folder:
HackMD has been saving revisions of your work faithfully, now you can save it when you need to.
You can give your version a name and a description. [Learn more](/c/tutorials/%2Fs%2Fhow-to-save).
You can also compare any two versions. [See how](/c/tutorials/%2Fs%2Fhow-to-save#Compare-Versions)
This is our first step toward syncing with GitHub. Stay tuned! 

[Let us know how you think and how we could improve!](https://github.com/hackmdio/hackmd-io-issues/issues)






Save and Name a Note Version


# Publish Notes with Permalinks to Your Profile

Hello markdown hackers,

We're thrilled to announce **THREE** new features! :tada:

You can now Publish notes :one: with Permalinks :two: to your Profile page :three: !

1. You now have a public profile page at https://hackmd.io/@username :rocket: 
    - Set your username and short bio at https://hackmd.io/settings
    - Access your profile page at https://hackmd.io/profile
    - Read more about your profile page [here](https://hackmd.io/c/tutorials/%2Fs%2Fall-about-profile-page).

2. You can now use permalinks for your notes. Non-English characters - even emojis can be used! :accept: [Learn more](https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-publish-note). 

3. Finally, you can publish your notes in the mode (book, slide, static view, or collaborative) you want people to see. :sunglasses: [Learn more](https://hackmd.io/c/tutorials/%2Fs%2Fall-about-profile-page). 

[Let us know how you think and how we could improve!](https://github.com/hackmdio/hackmd-io-issues/issues)



Publish Notes with Permalinks to Your Profile


# Share private notes with specific users

Hello markdown hackers, 

You can now (finally) share a private note with specific people. :two_men_holding_hands: 

Click the <i class="fa fa-unlock-alt fa-18"></i> permission icon on the top right corner and invite your friends to share the secret! :see_no_evil:

Remember to fill your email at: https://hackmd.io/settings before you can be invited to a secret party yourself! :love_letter:

Let us know how to improve [here](https://github.com/hackmdio/hackmd-io-issues/issues).

Share private notes with specific users


# Fill Your Email to Be Invited :email: and Separation of Comment Permissions :lock_with_ink_pen:

## Fill your email address to be invited!

We are one step closer to launching the long-requested feature: sharing with specific users. To invite your collaborators, you need a way to invite them - nothing beats email address in doing that. 

Go to hackmd.io/settings to fill your email, so you can be invited by your collaborators when we launch the specific sharing.

Also, you could now sign-in with email address and password (and reset your password). Yeah, I know this sounds basic, but we want to be least intrusive to your privacy and just didn't need it previously.

## Separation of Comment Permissions

The permission to comment is now separated into its own permission - no longer tied to editing. This should allow more fine-grained permission control for your notes.

Submit an issue to tell us [where to improve](https://github.com/hackmdio/hackmd-io-issues/issues).

Fill Your Email to Be Invited :email: and Separation of Comment Permissions :lock_with_ink_pen:


# Boost Productivity with Templates 

Hello markdown hackers,

Now you could HackMD faster with templates!
1. Save your time copy-pasting from recurring notes, such as your weekly meeting minutes.
2. Keep your contents consistent, use the same styling for all your blog posts and study notes.
3. Let you re-use complex components, such as UML diagrams, so you don't have to build them from scratch every time.

Hover your mouse on the "New note" button :heavy_plus_sign: and click "<i class="fa fa-file-image-o" aria-hidden="true"></i> Create a note from template" in the drop down menu. You will then see the template panel.

![](https://i.imgur.com/LZdj7IT.png)


We also include few default templates that you could use or change to your liking.

See the tutorial [here](https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-use-template) or [中文教學](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-use-template-tw).

Boost Productivity with Templates


# Merging two accounts 

Hello markdown hackers,

Now you can merge two of your accounts into one. Doing this could reduce your confusion of "which account did I use to sign-in to HackMD?" and make it easier for you to manage all your notes.

Go to hackmd.io/settings and choose the sign-in method you want to merge. Your current sign-in method has a check mark behind it. Once you sign-in with other method, you will see how many notes the other account has, then you could choose to merge the two accounts, or not.

![](https://i.imgur.com/Whmbysr.png)


We have been working on letting you share a note with specific users, this is the first step. When the next step is done, you would be able to sign-in using email address. By the end of the last step, you could invite your partners to collaborate on HackMD using emails.

Let us know [how do you think, how can we do better](https://goo.gl/forms/wQdTn6hEN1pIy9qD2).


Merging two accounts


# Batch Download All Your Notes :package:

Hello markdown hackers, 

You can (finally) download all your notes at once! :tada:

Please go to Settings (by clicking your profile picture at the top right corner or go to https://hackmd.io/settings), where you will find a button to "Download all notes" next to "Backup".

One of the reasons we love writing in markdown is its unbeatable portability. Therefore, it is imperative to us that you own your data wherever you want, whenever you want it.

Let us know [how do you think, how can we do better](https://goo.gl/forms/wQdTn6hEN1pIy9qD2).

Please also check out our recent support for [choosing your interface language](/c/tutorials/%2Fs%2Fhow-to-choose-language).

Batch Download All Your Notes :package:


Introducing HackMD Enterprise Edition
===

Dear Markdown hackers,

We are introducing **HackMD Enterprise Edition (EE)**, a new HackMD service with features specifically designed for knowledge sharing and collaboration. We are releasing these features to a new service for try out: Demo.hackmd.io. More importantly, we want to take this chance to thank you.

### Thank You

We've seen significant growth in HackMD.io in the past six months. Our hosted notes increased from 100,000 in March to more than 220,000 today. Our registered users had doubled from 16,000 to more than 33,000. We've been blown away by how quickly our project went viral and humbled by all the support HackMD had received. We want to say thank you and assure you that we are committed to keep making HackMD the best tool for knowledge management and collaboration with Markdown syntax. We've heard all your questions, comments, suggestions, and complaints. We deeply appreciate all of them. 

### HackMD Enterprise Edition (EE)

HackMD(EE) is our response to your requests. We added two long-awaited features so you could have better control over your private information:
* HackMD(EE) comes with **Advanced Permission Controls** for each note. You can now invite registered users to your note and set individually read, write, or admin priviledge for each invitee. 
* With HackMD(EE), you can now keep all your images private with our **Private Images Hosting** service.

To improve your experience organizaing knowledge, HackMD(EE) now comes with a new **Overview Page** to aid notes organization and knowledge discovery. With the **Book Mode** released earlier, your notes could now be viewed and found the way your think of them in your mind.

To free our users from the overhead of managing their own instances, HackMD(EE) would be a hosted **Software-as-a-Service (SaaS)** offering. We now provide service manager a **Dashboard** for notes management and users access monitoring. Customer supports and other customizable options are also available. Leave the maintenance and other hassles to us, so you can focus on making great things and sharing valuable insights. 

### New Playground: Demo.HackMD.io
Features available in HackMD(EE) would be available in demo.hackmd.io, an instance with ephemeral storage. User of this instance would have access to dashboard and advanced permission controls, among other new enterprise features of HackMD(EE). However, notes created on demo.hackmd.io would be deleted weekly. These make demo.hackmd.io a playground great for feature try-outs, disposable notes, or other creative usages.

### HackMD.io Remains Free
For the past two years, we've run HackMD.io as a free service providing real-time collaboration and knowledge management across the globe. HackMD.io hosted shared notes for countless tech conferences, meetups, seminars, and hackathons. We are so grateful to be part of the exchange of so many great ideas. We are therefore committed to **keep HackMD.io free and open to everyone**, as it always was. It is our privilege to have the opportunity to contribute to the greater community. We will keep it that way.

The past two years were quite an adventure. We would like to thank you for all your supports. As always, please don't hesitate to [like us on Facebook](https://www.facebook.com/hackmdio/), join the [chat on twitter](https://twitter.com/hackmdio) or [drop us a mail](mailto:hackmdio@gmail.com) if you have any questions or comments. We'd love to hear. 

Happy hacking,
HackMD Team

最近文章

立刻開始使用 HackMD