changed 8 years ago
Published Linked with GitHub

HackMD

您使用 Markdown 寫作與分享知識的最佳方式

Max Wu @ SITCON 2017


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Max Wu

北科大 資訊工程所

我喜歡好的產品,也開發好的產品;
我寫的不是程式,是理想。


HackMD

使用 Markdown 的跨平台即時協作筆記


Hack

=

用聰明的方法做事


MD

=

Markdown


HackMD 用途

  • 製作筆記
  • 撰寫文件
  • 快速簡報
  • 還有很多意想不到的用法

功能

  • 自動上傳圖片
  • 支援嵌入影片
  • 支援數學公式
  • 支援各式圖表
  • 自動修訂紀錄
  • 自動作者標記

採用

  • PyCon TW 2016
  • g0v
  • CTF write-ups
  • Debater
  • jserv 系列課程
  • MOPCON 2016
  • Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    SITCON 2017
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

來談談 Markdown

2004/3/19 由 John Gruber 所開發
用以簡化 HTML ,被廣泛地運用在各式系統

  • 一句話說明它
  • 有誰在用?
  • 優點與缺點
  • HackMD 的 Markdown

Markdown

輕量的視覺化標記語言

「蛤?」


文字就可以排版的語法

感謝 @clkao 貢獻此麻瓜咒語


誰在用 Markdown?

  • GitHub
  • Stack Overflow
  • Reddit
  • Bitbucket
  • GitLab
  • etc

Markdown 的優點

  • 輕量:純文字
  • 直覺:標記簡單清楚

Markdown 缺點

  • 需要腦袋:還是要記語法
  • 百家爭鳴:規範與實作雜亂

HackMD 的 Markdown

  • 遵守 CommonMark
  • 參考 Jekyll 語法 (kramdown)
  • 參考 StackEdit 等社群套件
  • 加入許多額外方便的語法

HackMD 的語法簡介

  • 標題
  • 無序清單
  • 有序清單
  • 引用
  • 文字變化
  • 連結
  • 圖片
  • 程式碼
  • 表情符號
  • 外部嵌入
  • 數學公式
  • 警告區塊

標題

在行首輸入 # 加上一個空白
愈多個 # 代表愈低層級的標題

# 標題

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
先輸入 # 就會有提示了

相當於 HTML header tag


無序清單

在行首輸入 - 加上一個空白
縮排後可為子清單

- 清單

相當於 HTML unordered list


有序清單

在行首輸入 1. 加上一個空白
縮排後可為子清單

1. 清單

相當於 HTML ordered list


引用

在行首輸入 > 加上一個空白
縮排後可巢狀使用

> 引用內容

相當於 HTML blockquote


文字變化

  • 粗體:使用兩個星號夾住 **粗體**
  • 斜體:使用一個星號夾住 *斜體*
  • 刪除線:使用兩個波浪符號夾住 ~~刪除~~
  • 底線:使用兩個加號夾住 ++底線++
  • 重點:使用兩個等號夾住 ==重點==

連結

[連結文字](連結網址)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
先輸入 [] 就會有提示了

相當於 HTML a tag


圖片

![圖片提示](圖片網址)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
先輸入 ! 就會有提示了

相當於 HTML img tag


程式碼

  • 行內程式碼:使用一個重音符號夾住 *斜體*
  • 區塊程式碼:使用三個重音符號上下夾住
```javascript
var i = 0;
```

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
先輸入三個重音符會提示支援的程式碼顏色標示


表情符號

使用冒號夾住表情符號名稱

:smile:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
先輸入冒號會提示支援的標情符號


外部嵌入

可以內嵌入影片、Gist 等外部方法

{%youtube youtubeid %}

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
先輸入 {} 會提示支援的嵌入方法


數學公式

可以撰寫 Tex 相容的數學描述式

\(L^aT_eX\)

$L^aT_eX$


警告區塊

可以凸顯某些需要的注意的區塊

記得放一包乖乖到機房

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

:::danger
記得放一包乖乖到機房 :cookie: 
:::

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
先輸入三個冒號會提示支援的警告區塊


HackMD 現況

  • 2015 年 3 月開始上線服務
  • 累計超過 10 萬份筆記
  • 每月超過 6 萬的活躍使用者
  • 會員超過 1.6 萬名
  • 使用者來自 台灣、日本、美國、歐洲、南美洲
  • 支援超過 15 種介面語言

開源

  • 被星星超過 1,750 次
  • 擁有超過 45 名貢獻者
  • 被 Fork 超過 220 次
  • 最近在重構中

桌面版

  • 使用 Electron 包裝
  • hackmdio/hackmd-desktop
  • GitHub 開源開發中,歡迎參與
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

Q&A


特別感謝

OSS Plant 提供社群節點

cdn.js 提供開源套件 CDN


謝謝您的聆聽!

這份簡報使用 HackMD 製作
https://hackmd.io/p/B1BYM89ix

Select a repo