---
# System prepended metadata

title: 嵌入筆記，自訂筆記主題
tags: [tutorials, zh]

---

# 嵌入筆記，自訂筆記主題

HackMD 可以自訂筆記的樣式，改變筆記呈現的樣貌。寫好的樣式可以利用「嵌入筆記」使用。（如果你還不知道嵌入筆記是什麼，請參考[教學](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-embed-note-tw)。）

## 進階運用：嵌入筆記主題

知道如何嵌入筆記之後，我們可以更靈活地運用這個功能：

### 運用 HTML 的 `<style>...</style>` 元素，來設定頁面元素的樣式。

HackMD 的筆記支援部分的 HTML 和 CSS，可用來自訂筆記的樣式。寫在 `<style>` 標籤裡是最直接的方法。

可以參考：
[中文直書的主題範例](/hackmd-vertical-writing-theme?both)
[黑色背景的主題範例](/hackmd-dark-theme?both)

![](https://i.imgur.com/wad0QWR.gif)


2. 嵌入主題。

我們可以把常套用的主題存在一篇筆記裡，再用嵌入筆記功能引用到另一篇筆記裡，這樣就可以套用主題了。

![](https://i.imgur.com/ZkjzICj.gif)

請試試看，把底下這段文字複製到你的筆記裡：

```
{%hackmd @themes/dracula %}
```

這段文字的意思是告訴 HackMD：「請到 `@themes`
 這個空間，找到永久連結（permalink）網址最末段為 `dracula` 的筆記，將其內容引用到目前的筆記。


## HackMD 主題庫

請複製引用碼，貼在自己的筆記裡即可。

|名稱|示範|引用
|-|-|-|
|Dracula|[Demo](https://hackmd.io/@themes/demo-dracula) |`{%hackmd @themes/dracula %}`
Notion|[Demo](https://hackmd.io/@themes/demo-notion) |`{%hackmd @themes/notion %}`
OrangeHeart|[Demo](https://hackmd.io/@themes/demo-orangeheart)|`{%hackmd @themes/orangeheart %}` 

&nbsp;

---
### 相關功能
- [在筆記中貼入程式碼](/s/Hk8sclbq7) 

### 常見功能
- [如何刪除筆記](/s/rJrvQDm97) 
- [儲存我的筆記](/s/HkDYdjLcX) 
- [幫筆記加上標籤](/s/S1wjouv5X) 
