Try   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 →
深入淺出網頁課表
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
      • 以此為例
    • Google doc
    • Notion
    • 或其他筆記軟體都很適合
  • 看完加練習大概半個小時
    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 →
  • 有什麼問題可聯絡小弟予以協助
    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 →
    • email: jimmatw@gmail.com

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 →
網頁課表解決的問題

  • 方便宣傳
    • 不侷限於Line上群組的分享
    • 只要有網址就可以分享
    • 可客製化網址
      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 →
    • 不再需要紙本
  • 檔案分享永續
    • line上會過期
      • 無法讀取過期檔案，僅可瀏覽縮圖
    • 洗板消失
      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 →
    • 換手機或登入新裝置，舊資料會消失
  • 課表動態更新
    • 不會有過期資料
    • 臨時換課即時更新
  • 資料集中
    • 契員不疲於尋找群組的資訊
      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 →
  • 縮減發文資訊量
    • 避免洗版，提升團契的專注力
    • 相關檔案連結可放在課表網站
    • line訊息太多不利閱讀

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的範例

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是什麼？

  • 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 →
    • 用筆記生成課表網頁，即時分享給契員
    • 友善的編輯頁面
  • 使用markdown語法標籤做快速排版
    • markdown會再介紹
    • 學習容易
      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 →
      ，幾分鐘可快速上手
  • 免費使用，只有增加筆記團隊成員人數上限要收費

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 使用教學

  1. 進入hackmd網站註冊帳號
  2. 點選Create new note建立第一筆筆記做練習

  • 編輯器左上方有三個圖示

    • 為編輯模式
    • 為預覽模式
    • 會顯示一半編輯一半預覽
      • 可方便即時看到編輯結果
        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 →

  • 右上角 圖示可分享連結

    • COPY後得網頁的真正連結
    • 可自訂連結，還有更想系的客製方式
      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 使用教學

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 教學

  • 一種用! [] () # : | -組成的標籤排版語法

    • 可以快速把文字轉成網頁排版

  • 以下會有原始碼與顯示結果作範例對照

    • 建議開一個新的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 →

  • 更多markdown文檔

標題

  • 語法為# 標題名稱，很簡單吧
    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 →
    • 越多#表示越小的標題
    • 如兩個#: ## 標題名稱 為小一點的標題
    • 越多#越小以此類推
  • 以下為範例對照:
# 一個#的標題名稱
## 兩個#的標題名稱
### 三個#標題名稱
#### 四個#標題名稱
##### 五個#標題名稱

一個#的標題名稱

兩個#的標題名稱

三個#標題名稱

四個#標題名稱

五個#標題名稱

清單

  • 語法為* 內容
  • 功能是把資訊明確分行分段
    • 如果*前面多一段空格會變內縮的清單
    • <- 像我這樣就是就是
      • <- 還有這樣
    • 越多空格會內縮越多
  • 以下為範例對照:

* 每周三晚上
    * 線上直播8:30開始
    * 實體聚會於台北教會19:30~20:30
        * 可以提早來喔
            * 大概6:30
        * 報名聯絡契長
* 加入Youtube頻道
* 加入Facebook粉絲專頁
  • 每周三晚上
    • 線上直播8:30開始
    • 實體聚會於台北教會19:30~20:30
      • 可以提早來喔
        • 大概6:30
      • 報名聯絡契長
  • 加入Youtube頻道
  • 加入Facebook粉絲專頁

表格

  • 表格語法為|和-----|
    • |用來區別表格的行內容
    • -----|用來分隔標題和內容
    • 表格有幾行，每一列的資料就有幾個|和-----|
    • -----|中的-可以是任意數量，如---|
  • 以下為範例對照
日期|崇拜主題|講員
-----|-----|-----|
11/28 |歌林多前書1 | 萌澤
11/30 |歌林多前書2 | 萌澤


日期|崇拜主題|講員|詩誦
-----|-----|-----|-----|
12/26 |歌林多前書3 | 萌澤 | OO
12/28 |歌林多前書4 | 萌澤 | XX
12/30 |歌林多前書5 | 萌澤 | @@
日期 崇拜主題 講員
11/28 歌林多前書1 萌澤
11/30 歌林多前書2 萌澤
日期 崇拜主題 講員 詩誦
12/26 歌林多前書3 萌澤 OO
12/28 歌林多前書4 萌澤 XX
12/30 歌林多前書5 萌澤 @@

圖片

  • 語法為![](圖片網址)
    • []裡面不用打字
  • 圖片可用編輯器上方的 (Isert image)的功能上傳，自動產生imgur圖片網址
  • 以下為範例
![](https://i.imgur.com/iGHnj1x.jpg)

超連結

  • 語法為[名稱](網址)
  • 使用可把PDF或word檔案放到雲端硬碟，再用連結分享
  • 以下為範例分享
[報名表單連結](https://forms.gle/QUy5GmoUfkAgDrrr6)
[PDF公文](https://drive.google.com/file/d/1yPcgsJEZRr-blLmHcmhB5KWHbEEmwF9b/view?usp=sharing)

報名表單連結
PDF公文

不同顏色的區塊通知

  • 語法為
:::顏色型態
內容
:::
  • 顏色型態有四種
    • info 藍色
    • danger 紅色
    • success 綠色
    • warning 黃色
  • 還有一種型態spoiler為隱藏，點擊才能看到
  • 範例如下
:::info
:bulb:此網頁會即時更新<i class="fa fa-repeat fa-spin"></i>
:::


:::danger
手機右滑看表格完整內容 :point_right:
:::

:::success
我們禱告神，願神讓大家`Spare One Night For Jesus`
:::


:::warning
溫馨提醒:rose:
:::

:::spoiler 點我看安排表! 
以下為安排表
![](https://i.imgur.com/iGHnj1x.jpg)
:::

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 →
此網頁會即時更新

手機右滑看表格完整內容

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 →

我們禱告神，願神讓大家Spare One Night For Jesus

溫馨提醒

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 →

點我看安排表!

以下為安排表

文字顯示

  • 語法為以下
一般字體
**粗體**
*斜體*
~~被刪除了~~
`高亮`

3個`
一堆區塊文字，放在這裡面排版會比較好看
3個`

一般字體
粗體
斜體
被刪除了
高亮

一堆區塊文字，放在這裡面排版會比較好看

emoji

  • 語法為:emoji:
  • 參考emoji範例找可用語法
    • 裡面看到的emoji可能跟hackmd顯示的不一樣
  • 以下為範例:
:smiley: 
:grin:
:heart: 
大家很:+1:
:raised_hands:	:clap:
:raising_hand: 我願意
:eyes:
:sheep: 
:rose:
:alarm_clock:
:house_with_garden:

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 →

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 →

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 →

大家很
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 →

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 →
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 →

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 →
我願意
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 →

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 →

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 →

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 →

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 →

文字圖片icon

  • 語法為 <i class="fa icon名稱"></i>
    • 把icon名稱替換成連結中的
    • 這裡語法是網頁語法，不是markdown
    • 如果用網頁語法可做出更多效果
  • 所有樣式參考連結
  • 以下為範例
你的信仰需要充電了嗎 <i class="fa fa-battery-quarter"></i>

<i class="fa fa-calendar-check-o"></i> 109/10/11

<i class="fa fa-facebook-official text-info"></i> 搜尋社青團契

<i class="fa fa-refresh fa-spin"></i> 持續下載

<i class="fa fa-spinner fa-pulse"></i> 更新中...

你的信仰需要充電了嗎

109/10/11

搜尋社青團契

持續下載

更新中…

Last changed by 
 
松山社青團契
松山社青團契
0
445
Published on HackMD