{%hackmd @YuRen-tw/theorem-theme %}
# theorem theme 說明文件

## 功能

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

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

套用後，就可以用以下的 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` | `.definition` |`.example` | `.remark` | `.proof` |
|:---:|:---:|:---:|:---:|:---:|:---:|
| 標題 | **bold** | **bold** | **bold** | *italic* | *italic* |
| 內文 | *italic* | normal | normal | normal | normal |
| 底色 | :o: | :o: | | :o: | |
| 外框 | | | :o: | | :o: |

> 在 LaTeX 的 amsthm 中，`.theorem` 的樣式稱為 `plain` 樣式，並且沒有 `example` 樣式（通常都用 `definition` 樣式，然而在 beamer 中有套用特別設定）。

### 標題名稱
- 按照不同的類別有對應的名稱
- 可以使用 `data-name` 屬性自訂名稱
- 為了方便使用，`.theorem` 又預設有幾個子類別
- `.proposition`、`.lemma`、`.corollary`
- `<div class="theorem lemma">` 就是 `<div class="theorem" data-name="lemma">`
- 不同語言模式會顯示不同的名稱，參考下方的[語言模式](#語言模式)

### 標題編號
- 除了 `.proof`，區塊都有編號顯示在名稱之後
- 可以加上 `.unnumbered` 類別取消編號
- 編號格式為 `X.Y`
- `X` 與 `<h2>` 編號一致
- 每當有新的編號區塊，`Y` 都會增加
- 每當有新的 `<h2>`，`Y` 都會重設

### 標題額外資訊
- 除了 `.proof`，區塊都可以用 `data-info` 設定額外資訊顯示在編號之後
- 不同語言模式會有不同的標註方式，參考下方的[語言模式](#語言模式)

## 語言模式

在不同內文語言模式下，預設的文字與格式也會有所不同。

內文語言參照 HackMD 的內容設定：
- 英語文模式：English（`en-` 開頭）
- 華語文模式：其他設定

### 不同語言的標題名稱

| | 華語文模式 | 英語文模式 |
|:---:|:---:|:---:|
| `.theorem` | 定理 | Theorem |
| `.lemma` | 引理 | Lemma |
| `.corollary` | 系理 | Corollary |
| `.proposition` | 命題 | Proposition |
| `.definition` | 定義 | Definition |
| `.remark` | 說明 | Remark |
| `.example` | 範例 | Example |
| `.proof` | 證明 | Proof |

下面列出我們沒有預設但在數學文獻上可能會用到的區塊提供給使用者參考。
| 常用區塊樣式 | 華語文 | 英語文 |
|:---:|:---:|:---:|
| `.theorem` | 猜想 | Conjecture |
| `.theorem` | 準則 | Criterion |
| `.theorem` | 斷言 | Assertion |
| `.definition` | 條件 | Condition |
| `.definition` | 公理 | Axiom |
| `.definition` | 性質 | Property |
| `.definition` | 假設 | Assumption |
| `.definition` | 演算法 | Algorithm |
| `.example` | 問題 | Problem |
| `.example` | 練習 | Exercise |
| `.remark` | 註 | Note |
| `.remark` | 主張 | Claim |
| `.remark` | 總結 | Summary |
| `.remark` | 情況 | Case |

### 不同語言的額外資訊標註方式

| 華語文模式 | 英語文模式 |
|:---:|:---:|
| 名稱 X.Y | Name X.Y. |
| 名稱 X.Y：資訊 | Name X.Y (info). |
| 名稱：資訊 | Name (info). |

## :gear: CSS 設定
### 一般樣式
- 底色：`--thm-background-color`
- 外框：`--thm-outline-color`
- 證明結束方塊：`--qed-symbol`
- 區塊下邊界：`--thm-margin`
- 區塊上下留白：`--thm-padding-box`
- 區塊左右留白：`--thm-padding-inline`
- 標題下留白：`--thm-padding-head`

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

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

## 範例
-

  <div class="theorem">

    Text text.
  </div>

<div class="theorem">

Text text.
</div>
-

  <div class="theorem lemma unnumbered">

    Text text.
  </div>

<div class="theorem lemma unnumbered">

Text text.
</div>
-

  <div class="theorem" data-name="Conjecture">

    Text text.
  </div>

<div class="theorem" data-name="Conjecture">

Text text.
</div>
-

  <div class="definition" data-info="info">

    Text text.
  </div>

<div class="definition" data-info="info">

Text text.
</div>
-

  <div class="remark">

    Text text.
  </div>

<div class="remark">

Text text.
</div>
-

  <div class="example" data-name="Exercise">

    Text text.
  </div>

<div class="example" data-name="Exercise">

Text text.
</div>
-

  <div class="proof" data-name="Proof of the Main Theorem">

    Text text.
  </div>

<div class="proof" data-name="Proof of the Main Theorem">

Text text.
</div>