test
這篇是這個 blog 支援的 Markdown 語法範例,每個語法先列出寫法,下面接著是實際顯示的效果
創建時間
閱讀時間 4 min read
這篇是這個 blog 支援的 Markdown 語法範例,每個語法先列出寫法,下面接著是實際顯示的效果
提示框(Admonitions)
支援 note、tip、important、warning、caution 五種,冒號至少三個
:::note這是資訊:::自訂標題
:::tip[自訂標題]標題寫在中括號裡:::巢狀提示框
外層的冒號要比內層多
::::note外層:::warning內層:::::::角色對話
角色定義在 src/site.config.ts 的 characters,目前只有 rabbit 有圖片。align 可以設 left 或 right
:::rabbit預設對齊:::
:::rabbit{align="right"}靠右對齊:::
預設對齊

靠右對齊
圖片
一般圖片

放在文章資料夾裡的圖片用相對路徑,例如 。遠端圖片的網域要先加進 astro.config.mjs 的 image.domains,才會被壓縮成 webp
調整圖片大小
在替代文字最後加上 #w=寬度(單位 px),高度會依比例自動計算,也會產生 2 倍解析度的版本

圖片說明文字
網址後面加上引號包起來的標題,會變成圖片下方的說明文字

像素風格圖片
替代文字最後加上 #pixelated,放大時不會模糊,適合像素圖。可以跟 #w= 一起用,#pixelated 要放最後面

隱藏文字(Spoiler)
用兩個直線包起來,滑鼠移上去或點擊才會顯示
答案是 ||42||答案是 42
GitHub 卡片
可以放 repo 或使用者,build 時會去 GitHub API 抓資料
::github{repo="qian403/blog"}::github{user="qian403"}1223Taiwan
Emoji
可以用短代碼,也可以直接貼 emoji
:smile: :rocket: :+1: 🎉😄 🚀 👍 🎉
數學公式
行內用一個 $,區塊用兩個 $$
行內公式 $E = mc^2$
$$\int_0^1 x^2 \, dx = \frac{1}{3}$$行內公式
程式碼區塊
標題、行號與標記
```js title="hello.js" showLineNumbers {2}function hello() { console.log('這行會被標記')}```function hello() { console.log('這行會被標記')}新增與刪除
```js ins={2} del={3}const a = 1const b = 2const c = 3```const a = 1const b = 2const c = 3終端機
```bashpnpm dev```pnpm dev基本語法
文字樣式
**粗體**、*斜體*、~~刪除線~~、`行內程式碼`、[連結](https://chien.dev)粗體、斜體、刪除線、行內程式碼、連結
引用
> 這是一段引用這是一段引用
清單
- 項目一 - 子項目1. 第一步2. 第二步- [x] 已完成- [ ] 未完成- 項目一
- 子項目
- 第一步
- 第二步
- 已完成
- 未完成
表格
| 靠左 | 置中 | 靠右 || :--- | :---: | ---: || A | B | C || 靠左 | 置中 | 靠右 |
|---|---|---|
| A | B | C |
註腳
這裡有註腳[^1]
[^1]: 註腳內容這裡有註腳1
分隔線
---Footnotes
-
註腳內容 ↩