跳到主要內容
Cypher's Practical Coding
Markdown 寫作
3 / 4
正在準備工作環境...

連結、圖片、程式碼區塊

活動頁常需要跳轉、放素材示意,甚至貼出簡單設定。Markdown 都能搞定。

連結(Links)

語法:[顯示文字](網址)。網址可放 http(s) 或公司短網址。

提示

  • 如果是內部文件,可用 Notion、Google Drive 連結。
  • 可在文字旁加括號補充說明,避免點錯。

圖片(Images)

語法:![替代文字](圖片網址)。替代文字會在圖片掛掉時顯示,也有助於無障礙。

同一段落可先寫說明,再放圖片:

程式碼區塊(Code Block)

在 Markdown 文件中保存設定或訊息模板,方便工程/客服複製。用三個反引號(`)包住。

curl -X POST https://api.example.com/ping
-H "Authorization: Bearer <token>"

如果只是一句短字,可以用單反引號:/promo start 618

練習題

包住程式碼", "expected_code": "npm install" }


## AI 協作:學了這個,跟 AI 怎麼配合?

連結和圖片語法雖然簡單,但在技術文件和 README 裡用得非常頻繁。

**你的人類優勢:**
- 你知道要連到哪個 URL、放哪張圖片
- 你能判斷圖片的替代文字(alt text)是否有意義

**可以這樣跟 AI 說:**

> 幫我寫一個 GitHub README,包含:專案描述、安裝步驟、一張截圖(圖片路徑我提供),然後附上 API 文件的連結。

互動示範

DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩
DEMO 4可以修改程式碼試玩

挑戰任務

Task 1

建立一個連結,顯示文字為「查看活動頁」,網址為 https://example.com/event

Task 2

插入一張圖片,替代文字為「商品主圖」,圖片網址為 https://example.com/product.jpg

BackNext Lesson →