{%hackmd j1-jtNWMSlW8Hpfz6P2p4g %}
# HackMD 共用自定義 style

官方預設的style, 在我的環境中有些地方差異太小不容易區分(eg. ``` `` ``` 區塊)令我困擾已久
~~今天再次搜尋關鍵字爬到「[套用自訂 HackMD 暗主題](https://titangene.github.io/article/hackmd-dark-theme.html)」~~
~~裡面提到可以嵌入 `<style>` 語法來客製化 HackMD 的方法!!~~

沒多久就在範本中看到「[HackMD Dark Theme](https://hackmd.io/theme-dark?both)」這個真正的官方範例

## 用法
在筆記的任何地方加入 `<style>` 區塊修改 css 設定即可.

#### eg.

<style>
    .markdown-body b {
        font-weight: 700;
    }
    .markdown-body code,
    code {
        color: #99999 !important;
        background-color: #ffe9e5;
    }
</style>

### 可修改的範圍
理論上應該在頁面中的 class 都能修改.
可參考[HackMD Dark Theme](https://hackmd.io/theme-dark?both)
或是直接用瀏覽器的除錯功能直接查看目標物件的 style 組成也可以~

### 共用 style
這也是在上面那篇提及的隱藏方法(?)
利用 `{%hackmd xxxxxx %}` 的語法將 `xxxxxx` 筆記中的內容 import 進來, 藉此達成共用.
#### eg.

{%hackmd j1-jtNWMSlW8Hpfz6P2p4g %}

### 特性
此修改是採用後蓋前結果論, 也就是中途可以不斷地修改 stlye, 但每種class只取最後一個的設定.

---

## 參考
- [套用自訂 HackMD 暗主題](https://titangene.github.io/article/hackmd-dark-theme.html)
- [IanChen83/hackmd_style.html](https://gist.github.com/IanChen83/00222a2eb4c277b390b450b51b80d2c3)
- [color-picker](https://htmlcolorcodes.com/color-picker/)