跳至主要内容

善用 MarkDown / HTML+CSS

· 閱讀時間約 3 分鐘

為什麼？​

很多人現在都會發社群媒體，像是 IG 、FB ，創建這個網站的目的就是盡可能地別被演算法綁架！撰寫屬於自己的文章！

H 標題​

我很喜歡使用 H 標題請看下面

H1 標題

H2 標題​

H3 標題​

H4 標題​

H5 標題​
H6 標題​

語法：

# H1 標題
## H2 標題
### H3 標題
#### H4 標題
##### H5 標題
###### H6 標題

斜體 / 粗體 / 斜粗體 / 刪除線​

使用 斜體 / 粗體 / 斜粗體 可讓文字變得好辨識

舉例來說：
今天我去看了一部電影 名偵探柯南 X 墜落的高速公路天使 超級好看，故事主角的口頭禪超帥！ 然後因為我不會日文，所以跟你們說他的狗口頭禪是：新機子哇咿兜子什麼東西的

語法：

今天我去看了一部電影 *名偵探柯南 X 墜落的高速公路天使* 超級好看，故事主角的**口頭禪超帥**！
然後因為我不會日文，所以跟你們說他的~~狗~~口頭禪是：***新機子哇咿兜子***什麼東西的

筆記 / 條列式 / 數字條列​

接著是 筆記 / 條列式 / 數字條列 他們能讓讀者看得比較輕鬆（？

舉例來說：

你們知道狗的英文是什麼嗎？

DOG ！

其實狗有很多種狗：

  • 比特犬
  • 貴冰狗
    • 娃娃狗？
  • 獵犬

好啦我不熟！
但我知道 ：

  1. OAOA
  2. 孫悟空

這兩首必唱曲，在 5525 沒有一場不唱的！

語法：

你們知道狗的英文是什麼嗎？
> DOG ！

其實狗有很多種狗：   
- 比特犬
- 貴冰狗
    - 娃娃狗？
- 獵犬

好啦我不熟！   
但我知道 ：
1. OAOA
2. 孫悟空

這兩首必唱曲，在 5525 沒有一場不唱的！

這邊要注意要空行，不然不會縮排

HTML / CSS​

這是本文最難的部分了，我也不會，介紹幾個好了

語法：

- <p>顯示文字</p>
- <a href="https://kaiblog.is-a.dev">顯示連結</a>
- <a href="https://www.youtube.com/embed/Ih9FuiLO71Y?si=vO3AcsppPhShcfY0" target="_blank">顯示外部連結</a>
- <h2>顯示H2 標題</h2>

之類的

再配一個 CSS 組合技：​

▶ 立即觀看

語法：

<a 
  href="https://www.youtube.com/embed/Ih9FuiLO71Y?si=vO3AcsppPhShcfY0" 
  target="_blank" 
  rel="noopener noreferrer"
  style={{
    display: 'inline-block',
    padding: '8px 16px',
    backgroundColor: '#ff0000',
    color: '#ffffff',
    fontWeight: 'bold',
    borderRadius: '6px',
    textDecoration: 'none'
  }}
>▶ 立即觀看</a>

以上是簡單的語法教學，接下來我打算推出：Docsaurus 架設網站教學，讓大家都可以建立自己的部落格，先說完全免費！