Photo on HackMD - Posts | Facebook

前言

前几个礼拜小弟分享了一个跟自动化没有关係的团队看板工具 Trello
而这礼拜小弟想要再次题外话分享一个共享笔记的工具 HackMD

HackMD 基本上是使用 Markdown 的语法进行编辑
会这样说是因为 HackMD 也可以偷偷的使用 HTML 的语法
使用文字与符号快速排版的写作方式
在视觉上也能约略看出文章脉络

而且 HackMD 除了提供文字编辑之外
也提供浏览的模式，能够即时浏览
包含了预览模式、书本模式与简报模式
小弟自己本身三种都有使用过
真的非常好用非常便利 (用言语无法形容它的好 ...会不会太夸张 XD)

这篇主要记录一些较为基本的操作方式
希望让没用过的大哥大姐能够较快的上手

分享重点

使用 HackMD文字编辑方式程式编辑方式留言编辑方式清单编辑方式浏览模式建立团队扩充套件同步 GitHub

使用 HackMD

HackMD 使用方式非常简单
开启浏览器并搜寻 HackMD
搜寻结果的第一笔资料就是了 >>> hackmd.io

到 HackMD 的网站后进行注册登入后就可以使用了
觉得觉得注册流程太过麻烦也可以透过下方的其他应用程式登入

免费使用的情况下功能就已经非常的足够了
小弟今天介绍的内容也都是免费使用的功能介绍

单然如果想要使用更多的功能也可以参考 HackMD 的收费方案

文字编辑方式

因为编辑的内容在 HackMD 上使用效果较为显着
所以小弟除了说明之外会在附上 HackMD 使用的结果图片

标题：在文字前面使用 # ~ ###### 分别是 h1~h6斜体：在文字前后使用 * 或是使用快捷键 command+i粗体：在文字前后使用 ** 或是使用快捷键 command+b粗斜体：在文字前后使用 *** 或是使用粗体与斜体的快捷键底线：在文字前后使用 ++删除线：在文字前后使用 ~~标记：在文字前后使用 ==上标：在文字前后使用 ^下标：在文字前后使用 ~

程式编辑方式

单行代码：在代码前后使用 `多行代码：在代码前后使用 ```多行代码语言：在代码前后使用 ``` 的第一个 ``` 后面加上程式语言名称列出多行代码语言：在代码前后使用 ``` 的第一个 ``` 最后面加上 =

外部引入：使用 gist 撰写

留言编辑方式

单一留言：在留言前使用 >巢状留言：在留言前多次使用 > 使用一次就往下一层标记使用者：在留言里输入 [name=<user_name>]标记时间：在留言里输入 [time=<date>]标记留言颜色：在留言里输入 [color=<#color_code>]自订文字颜色：使用 html 方式编辑 <font color="#f00">Red</font>
自订文字颜色也可以运用在留言以外的地方

清单编辑方式

基本清单：在字段前加上 * 和一格空格即可 (键入 Tab 可以自动到下一阶)数字清单：在字段前加上 <1.> 和一格空格即可 (键入 Tab 可以自动到下一阶)代办清单：在字段前加上 - [ ] 和一格空格即可
标记 - [x] 和一格空格为已完成事项

浏览模式

HackMD 提供的浏览模式总共有四种
分别是编辑模式、预览模式、书本模式和简报模式
而每一种的模式所编辑的方式有些许不同
但是大致上都离不开上面所介绍过的编辑方式

如果想要选择预览模式
可以透过右上角的 share icon
选择 Preview 并点击 Preview

编辑模式 (Edit mode)

编辑模式也就是新增一份新笔记预设的模式
该模式写分成了三种小模式分别是
编辑 (Edit)：control+option+e
编辑与查看 (Both)：control+option+b
查看 (View)：control+option+v
或是透过上方的按钮来进行切换

另外编辑窗上方有一排工具列包含了上面说过的编辑方式
可以透过上方的功能进行点击来快速使用
基本上在上面都有介绍过只剩下后面五个中的四个功能还没介绍
从前面到后面分别是
编辑超连结、上传图片、新增表格、分隔线、留言的功能(这个上面有介绍过了)

预览模式 (View mode)

预览模式的编辑方式最单纯
也就是在编辑模式下 View 所看到的内容即是预览模式会看到的内容
预览模式 - Demo

书本模式 (Book mode)

书本模式主要是将许多的笔记统整在一起
所以使用的方式都是超连结的方式
例如：- [笔记名称](笔记连结)
将多个笔记整理在同一份笔记中
结果会像下面这个样子

书本模式 - Demo

简报模式 (Slide mode)

简报模式的编辑方式较为特别
HackMD 提供章节方式的分页方式
以 --- 三个减号的分隔线区分章节
以 ---- 四个减号的分隔线区分页面
遍及起来会像这个样子

虽然看起来很丑但是使用简报模式就会好很多了
而透过左右可以切章节
上下则可以切该章节的页面
总览会长得像这个样子

简报模式 - Demo

建立团队

除了自己建立笔记所使用的 My WorkSpace 之外
还可以与团队共同协作一起使用同一个 WorkSpace
新增的方式非常的方便
到导向到 HackMD 笔记总览的页面
点击 Workspace 的下拉式选单
最后点击 "+ Create new team" 就可以建立属于自己团队的 workspace 了

Team Name：也就是 workspace 的显示的名称Team Description：可以稍微描述一下，虽然之后好像不会特别显示出来Team URL Path：自行指定 team workspace 的 url
例如：输入 demo 则网址就为 https://hackmd.io/team/demoPrivacy：该 teamworkspace 的观看与使用权限

扩充套件 - VSCode

如果平时就有在用 VSCode 编辑器的大哥大姐们
想必这个扩充套件在使用起来应该会更加便利～

这个扩充套件是使用 VSCode 来浏览或写作所有 HackMD
透过 VSCode 中的 Extension 搜寻 HackMD 进行安装

安装完成后就可以使用 HackMD 的编辑模式在 VSCode 上进行编辑
副档名存成 <file_name>.md 即可同时编辑与预览

扩充套件 - HackMD-it

HackMD-it 是一个可以不用开启 HackMD
也可以快速搜寻钉选或开启 HackMD 的笔记
目前支援 Chrome、Firefox 和 Opera
这是 HackMD-it 的 GitHub 连结 GitHub : hackmd-it-issue

chrome web storefirefox browser add-onesopera add-ones

同步 GitHub

在 GitHub 中基本上都会有一份 README 的文件档案
主要是被用来记录一些关于该 repo 的一些资讯
而 README 的文件也可以使用 markdown 的方式撰写
因此 HackMD 也有相对应的功能可以使用
透过新增一份新笔记来 pull GitHub 的 README
编辑完后在 sync 到 GitHub 上操作上非常的好懂不会太过複杂

Step1：点击 Pull from GitHub 来编辑现有的 README
或是点击 Push to GitHub 来新增一份 markdown 档案
(小弟这边使用 Pull from GitHub 来进行分享)

第一次使用会需要登入 GitHub 才有办法取得资料

Step2：选择想要更改的档案位置

Step3：编辑完成后透过 menu 中的 GitHub Sync

Step4：点击上方工具列的 Push 将更改的内容更新上去

Step5：设置更改内容的相关资讯包含 branch, name 和 description

Push 成功后 HackMD 也会有 alert 通知
GitHub 也会多一条 Commit 为刚刚使用 HackMD push 的内容

结尾

以上是这週小弟分享 HackMD 的内容
当然 HackMD 的功能不只如此还有很多好用的功能
只是碍于篇幅过长且有些功能较不常使用
小弟只能忍痛割捨挑选一些常用实用的来做分享

如果有大哥大姐使用过更方便更好用的功能也欢迎再一起分享
或是有些功能使用上不明白也可以再一起讨论~

有疑问或是有错误，还请各位大哥大姐提点。
小弟将继续往下週迈进。 ─=≡Σ((( つ•̀ω•́)つ

参考文件

官方网站 (载点)

HackMD - Collaborative Markdown Knowledge BaseHackMD - Visual Studio MarketplaceGitHub : hackmd-it-issueHackMD-it: chrome web storeHackMD-it: firefox browser add-onesHackMD-it: opera add-ones

HackMD 使用教学HackMD - 文字编辑方式预览模式 - Demo书本模式 - Demo简报模式 - Demo