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"}
靠右對齊
:::

圖片

一般圖片

![替代文字](圖片網址或相對路徑)
我的 Arc 身份卡

放在文章資料夾裡的圖片用相對路徑,例如 ![說明](images/xxx.png)。遠端圖片的網域要先加進 astro.config.mjs 的 image.domains,才會被壓縮成 webp

調整圖片大小

在替代文字最後加上 #w=寬度(單位 px),高度會依比例自動計算,也會產生 2 倍解析度的版本

![我的 Arc 身份卡#w=400](圖片網址)
![我的 Arc 身份卡#w=200](圖片網址)
我的 Arc 身份卡 我的 Arc 身份卡

圖片說明文字

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

![我的 Arc 身份卡#w=300](圖片網址 "這是圖片說明")

我的 Arc 身份卡
這是圖片說明

像素風格圖片

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

![像素圖#w=200#pixelated](圖片網址)
像素圖

隱藏文字(Spoiler)

用兩個直線包起來,滑鼠移上去或點擊才會顯示

答案是 ||42||

答案是 42

GitHub 卡片

可以放 repo 或使用者,build 時會去 GitHub API 抓資料

::github{repo="qian403/blog"}
::github{user="qian403"}
My Blog
22Astro
1223Taiwan

Emoji

可以用短代碼,也可以直接貼 emoji

:smile: :rocket: :+1: 🎉

😄 🚀 👍 🎉

數學公式

行內用一個 $,區塊用兩個 $$

行內公式 $E = mc^2$
$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

行內公式 E=mc2E = mc^2

∫01x2 dx=13\int_0^1 x^2 \, dx = \frac{1}{3}

程式碼區塊

標題、行號與標記

```js title="hello.js" showLineNumbers {2}
function hello() {
console.log('這行會被標記')
}
```
hello.js
function hello() {
console.log('這行會被標記')
}

新增與刪除

```js ins={2} del={3}
const a = 1
const b = 2
const c = 3
```
const a = 1
const b = 2
const c = 3

終端機

```bash
pnpm dev
```
Terminal window
pnpm dev

基本語法

文字樣式

**粗體**、*斜體*、~~刪除線~~、`行內程式碼`、[連結](https://chien.dev)

粗體、斜體、刪除線、行內程式碼、連結

引用

> 這是一段引用

這是一段引用

清單

- 項目一
- 子項目
1. 第一步
2. 第二步
- [x] 已完成
- [ ] 未完成
  • 項目一
    • 子項目
  1. 第一步
  2. 第二步
  • 已完成
  • 未完成

表格

| 靠左 | 置中 | 靠右 |
| :--- | :---: | ---: |
| A | B | C |
靠左置中靠右
ABC

註腳

這裡有註腳[^1]
[^1]: 註腳內容

這裡有註腳1

分隔線

---

Footnotes

  1. 註腳內容 ↩

qian avatar

感謝閱讀我的部落格文章!歡迎查看我的其他文章或透過頁尾的社交連結聯繫我。

More Posts

Comments