---
title: 客製化自己的 HackMD
tags: HackMD
date: 2021/8/3
---

###### tags: `HackMD`

###### *date: 2021/8/3*

# 🎨 客製化自己的 HackMD

[TOC]

## 想客製化自己的 HackMD 所需要的知識

- [x] 1. HTML 基礎知識
- [x] 2. CSS 基礎知識
- [x] 3. Chrome 開發人員工具
- [x] 4. 稍微有模組化的概念

## 先參考官方提供的**暗主題**

- 官方提供的[暗主題](https://hackmd.io/@spn2twgroup/BJzbukUOS/%2Ftheme-dark%3Fboth)

- 因為程式碼很長，就不貼在這裡了，有興趣可以點進去看

## 接著嘗試自己客製化

1. 建立新的筆記，這份筆記就是之後用來引入樣式用的，名稱可以自己定義

2. 複製後，先觀察程式碼做了甚麼，有學過基礎的應該都看得懂

    <!-- 片段程式碼當範例 -->
    <style>
    /* 修改整個頁面的"背景"與"字體"顏色 */
    html, body, .ui-content {
        background-color: #333;
        color: #ddd;
    }
    </style>

3. 嘗試修改成自己想要的背景

    <style>
    /* 修改整個頁面的"背景"與"字體"顏色 */
    html, body, .ui-content {
        background: #fff6d6;
        color: #611201;
    }
    </style>

4. 此時頁面顯示效果如同你現在逛的這個頁面

## 如何修改其他小東西?

1. 想修改其他小東西，例如`==結構==`，就要先觀察小東西是屬於頁面的哪個==結構==


2. 可以看的出來 HackMD 預設的 mark 是淡黃色背景，嘗試添加樣式

    /* 設定 mark */
    .markdown-body mark {
        color: #fff;
        background: linear-gradient(180deg, #ca2521 0%, #eca442 100%);
        border-radius: 4px;
        margin: 2px;
    }

3. 就完成 ==mark==效果

## 如何將樣式引入?

1. 將你設定好的樣式筆記，更改分享網址 ( 取名 )，例如我是設定成 theme-Wood-Fired

2. 將想引入樣式的筆記添加`{%hackmd @你的帳號/你取的名字 %}`，以下是我的範例：

3. 此外除了引用樣式，連內容都可以一併引入，這就是**組件化**的概念。

### 參考資料

- [在筆記中嵌入另一篇筆記](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-embed-note-tw)
- [Dark theme](https://hackmd.io/@spn2twgroup/BJzbukUOS/%2Ftheme-dark%3Fboth)