{%hackmd @YuRen-tw/article-theme %}

# article theme 說明文件

在 HackMD 筆記加入下列，即可套用 article theme。

{%hackmd @YuRen-tw/article-theme %}

以下說明文件中標有「:gear:」的部分代表對應的 CSS 設定，使用者可以自己利用 `<style>` 做進一步的修改。

:::spoiler 大綱
[TOC]
:::

## 更改 HackMD 預設樣式
### 標題
- 去除 HackMD 預設 `<h1>` 與 `<h2>` 的底線
- 大標題 `<h1>` 置中
- 基本上一篇筆記只能有 1 個 `<h1>`
- 增加標題編號
- `<h2>` 標題前方有編號 `X`
- 每當有新的 `<h2>`，`X` 都會增加
- `<h3>` 標題前方有編號 `X-Y`
- 每當有新的 `<h3>`，`Y` 都會增加
- 每當有新的 `<h2>`，`Y` 都會重設
- :gear: 編號由 CSS 計數器控制
- `X` 為 `section`
- `Y` 為 `subsection`
- 增加色塊與文字顏色
- `<h2>`、`<h3>`、`<h4>` 標題前方有色塊
- :gear: 顏色為 `--color-main`
- :gear: `<h2>` 與 `<h3>` 文字顏色為 `--color-grey`

### 段落內文
- 內文行高設定為 1.8 倍
- 以縮排區別段落，而不是空行
- 段落首行縮排 2 個字身寬（`2em`）
- 去除段落之間的間距
- :warning: 瀏覽器需要支援 CSS 虛擬類別 `:has()`
- 只有段落或區塊間會斷行
- :warning: 這項功能可能會造成某些非預期的排版問題
- 雖然 HackMD 有提供相關設定，但似乎沒有實現好

### 表格
- 表格整體相對頁面為水平置中
- 更改框線
- 去除預設的框線
- 直行之間有分隔線
- :gear: 顏色為 `--color-dark`
- `<thead>` 的橫列下方有分隔線
- :gear: 顏色為 `--color-main`
- 更改 `<tbody>` 的偶數列顏色
- :gear: 顏色為 `--color-alpha`

| th | th | th | th | th |
|:--:|:--:|:--:|:--:|:--:|
| td | td | td | td | td |
| td | td | td | td | td |
| td | td | td | td | td |
| td | td | td | td | td |
| td | td | td | td | td |

### 其他文字區塊
- 區塊引言（`<blockquote>`）
- 文字顏色調整回瀏覽器預設，而非 HackMD 的灰色
- 引言內只有一個段落時，段落首行不縮排
- 更改左邊框顏色
- 引言內加上 `[color= ... ]` 也不會改變顏色
- :gear: 顏色為 `--color-dark`
- 程式碼區塊
- 更改行號與程式碼之間的分隔線
- :gear: 顏色為 `--color-main`

## 隱形區塊
在 `.invisible-box` 元素中輸入的東西不會顯示出來。
可以在裡面放入 LaTeX 的 `\newcommand` 巨集，而不製造空行。

<div class="invisible-box">
  ...
</div>

## 數學定理區塊

提供了可用於代表數學定理、定義、證明的類別。
可以用以下的 HTML 產出對應的區塊：

<div class="theorem">

  Prime numbers are more than any assigned multitude of prime numbers.
</div>
<div class="proof">

  See Euclid's Elements, Book IX, Proposition 20 for the details.
</div>

<div class="theorem">

Prime numbers are more than any assigned multitude of prime numbers.
</div>
<div class="proof">

See Euclid's Elements, Book IX, Proposition 20 for the details.
</div>

用法詳情請見 [theorem theme 說明文件](https://hackmd.io/@YuRen-tw/theorem-theme-doc)。
其中顏色套用如下：
- :gear: 底色顏色為 `--color-alpha`
- :gear: 外框顏色為 `--color-main`

## :gear: CSS 設定
### 客製化顏色
利用 CSS 自訂屬性來設定顏色，這個主題的預設顏色如下：

- `--color-main`： `#fdc565`
- `--color-light`： `#f6b763`
- `--color-dark`： `#917254`
- `--color-grey`： `#61574c`
- `--color-alpha`： `rgb(253 197 101 / .2)`
- 是 20% 透明度的 `--color-main`

### 計數器
這個主題使用了 `section`、`subsection`、`theorem` 三個 CSS 計數器。
相關設定如下，做為與其他主題衝突時的修改參考。

body {
  counter-reset: section;
}
h2 {
  counter-increment: section;
  counter-reset: theorem;
}
:is(.theorem, .definition, .remark, .example):not(.unnumbered) {
  counter-increment: theorem;
}