# Meta: Wiki Capabilities, TeX Math & Typography Reference

## 1. Mathematical Typography: KaTeX TeX Math Engine

The wiki is equipped with a high-performance **KaTeX** client-side rendering engine. Mathematical formulas and scientific equations are written using standard LaTeX math syntax.

### Delimiters

* **Display Equations (Block Math)**: Enclose in double dollar signs `$$ ... $$` on their own lines. Centered and formatted with full display geometry.
* **Inline Equations**: Enclose in single dollar signs `$ ... $` directly within sentences.

### Core TeX Math Examples & Cheat Sheet

#### 1. Fractions, Exponents & Powers
```latex
$$\text{FREQ} = \frac{433,920,000}{24,000,000} \times 2^{16} = 1,184,883 = \mathbf{0x121473}$$
```
$$\text{FREQ} = \frac{433,920,000}{24,000,000} \times 2^{16} = 1,184,883 = \mathbf{0x121473}$$

#### 2. Symbol Timing & Multi-Term Equations
```latex
$$\text{Data Rate} = \frac{(256 + \text{DRATE-M}) \times 2^{\text{DRATE-E}}}{2^{28}} \times f_{\text{XOSC}} = \mathbf{3433.22\text{ baud}}$$
```
$$\text{Data Rate} = \frac{(256 + \text{DRATE-M}) \times 2^{\text{DRATE-E}}}{2^{28}} \times f_{\text{XOSC}} = \mathbf{3433.22\text{ baud}}$$

#### 3. Signal Flow & Daisy-Chains
```latex
$$\text{Red (Source: fc79)} \longrightarrow \text{Blue (1st Sink)} \longrightarrow \text{Green (2nd Sink)} \longrightarrow \text{Yellow (75}\Omega\text{ Terminated)}$$
```
$$\text{Red (Source: fc79)} \longrightarrow \text{Blue (1st Sink)} \longrightarrow \text{Green (2nd Sink)} \longrightarrow \text{Yellow (75}\Omega\text{ Terminated)}$$

#### 4. Radicals, Integrals & Summations
```latex
$$f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} \text{ } d\xi \qquad \sum_{k=0}^{n} \binom{n}{k} x^k y^{n-k} = (x + y)^n$$
```
$$f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2\pi i \xi x} \text{ } d\xi \qquad \sum_{k=0}^{n} \binom{n}{k} x^k y^{n-k} = (x + y)^n$$

#### 5. Matrices & Linear Systems
```latex
$$\begin{pmatrix} y_1 \\ y_2 \end{pmatrix} = \begin{bmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{bmatrix} \begin{pmatrix} x_1 \\ x_2 \end{pmatrix}$$
```
$$\begin{pmatrix} y_1 \\\\ y_2 \end{pmatrix} = \begin{bmatrix} a_{11} & a_{12} \\\\ a_{21} & a_{22} \end{bmatrix} \begin{pmatrix} x_1 \\\\ x_2 \end{pmatrix}$$

#### 6. Piecewise Functions & Cases
```latex
$$f(n) = \begin{cases} \frac{n}{2} & \text{if } n \equiv 0 \pmod{2} \\ 3n + 1 & \text{if } n \equiv 1 \pmod{2} \end{cases}$$
```
$$f(n) = \begin{cases} \frac{n}{2} & \text{if } n \equiv 0 \pmod{2} \\\\ 3n + 1 & \text{if } n \equiv 1 \pmod{2} \end{cases}$$

---

### KaTeX vs. XeLaTeX: What Is and Is Not Supported

| Feature | KaTeX (Browser Math Engine) | Full XeLaTeX / pdfLaTeX |
| :--- | :--- | :--- |
| **Execution Environment** | Client-side JavaScript DOM rendering | Server-side CLI TeX compiler (`xelatex`) |
| **Mathematical Formulas (`\frac`, `\int`, `\sum`)** | **YES** (Full TeX math subset) | **YES** |
| **Inline Math (`$x$`) & Block Math (`$$x$$`)** | **YES** | **YES** |
| **Greek, Hebrew & Math Symbols** | **YES** (`\alpha, \beta, \Omega, \aleph`) | **YES** |
| **Unicode in Math (`\text{日本語}`)** | **YES** (Direct UTF-8 support) | **YES** |
| **Document Preambles (`\documentclass`)** | **NO** (Not a document compiler) | **YES** |
| **Arbitrary LaTeX Packages (`\usepackage`)** | **NO** | **YES** |
| **XeTeX FontSpec & System TTF Embedding** | **NO** | **YES** |

---

---

## 2. Comprehensive Symbol & Character Reference Tables

Below is the complete reference of scientific, mathematical, typographic, and special symbols available in BookStack using **TeX Math (KaTeX)** and **Standard HTML/Unicode**.

### 2.1 Units, Angles, Temperature & Physics Symbols

| Symbol Name | TeX Math Code | TeX Rendered | HTML Entity / Code | HTML Rendered | Example Usage |
| :--- | :--- | :---: | :--- | :---: | :--- |
| **Degree (Angle / Temp)** | `^\circ` or `^\circ\text{C}` | $^\circ$, $25^\circ\text{C}$ | `&deg;` or `&#176;` | &deg; | `$\theta = 90^\circ$`, `72&deg;F` |
| **Degree Fahrenheit** | `^\circ\text{F}` | $77^\circ\text{F}$ | `&deg;F` | &deg;F | `$T = 68^\circ\text{F}$` |
| **Ohm (Resistance)** | `\Omega` or `\text{k}\Omega` | $\Omega$, $\text{k}\Omega$ | `&Omega;` | &Omega; | `$R_1 = 4.7\text{k}\Omega$` |
| **Micro (Prefix)** | `\mu` or `\mu\text{F}` | $\mu$, $\mu\text{F}$ | `&micro;` | &micro; | `$C = 100\mu\text{F}$`, `&micro;s` |
| **Delta (Change / Diff)** | `\Delta` or `\delta` | $\Delta$, $\delta$ | `&Delta;`, `&delta;` | &Delta;, &delta; | `$\Delta V = 1.2\text{ V}$` |
| **H-bar (Planck Constant)** | `\hbar` | $\hbar$ | `&#8463;` | &#8463; | `$\hbar = \frac{h}{2\pi}$` |
| **Angstrom (Wavelength)** | `\text{\AA}` or `\mathring{\text{A}}` | $\text{\AA}$ | `&Aring;` | &Aring; | `$\lambda = 5500\text{ \AA}$` |
| **Angle** | `\angle`, `\measuredangle` | $\angle$, $\measuredangle$ | `&ang;` or `&#8736;` | &ang; | `$\angle ABC = 45^\circ$` |
| **Perpendicular / Orthogonal** | `\perp` | $\perp$ | `&perp;` | &perp; | `$\vec{A} \perp \vec{B}$` |
| **Parallel** | `\parallel` | $\parallel$ | `&#8741;` | &#8741; | `$L_1 \parallel L_2$` |
| **Infinity** | `\infty` | $\infty$ | `&infin;` | &infin; | `$\lim_{x \to \infty} f(x)$` |
| **Proportional To** | `\propto` | $\propto$ | `&prop;` | &prop; | `$F \propto \frac{1}{r^2}$` |
| **Approximately Equal** | `\approx`, `\sim` | $\approx$, $\sim$ | `&asymp;` | &asymp; | `$x \approx 3.14$` |
| **Plus-Minus / Minus-Plus** | `\pm`, `\mp` | $\pm$, $\mp$ | `&plusmn;` | &plusmn; | `$V_{\text{out}} = 5\text{V} \pm 5\%$` |
| **Multiplication / Dot** | `\times`, `\cdot` | $\times$, $\cdot$ | `&times;`, `&middot;` | &times;, &middot; | `$A \times B$, $A \cdot B$` |
| **Division** | `\div` | $\div$ | `&divide;` | &divide; | `$a \div b$` |

---

### 2.2 Complete Greek Alphabet Reference

| Letter Name | Lowercase TeX | Rendered | Uppercase TeX | Rendered | HTML Lower / Upper |
| :--- | :--- | :---: | :--- | :---: | :--- |
| **Alpha** | `\alpha` | $\alpha$ | `A` | $A$ | `&alpha;` (&alpha;) / `&Alpha;` (&Alpha;) |
| **Beta** | `\beta` | $\beta$ | `B` | $B$ | `&beta;` (&beta;) / `&Beta;` (&Beta;) |
| **Gamma** | `\gamma` | $\gamma$ | `\Gamma` | $\Gamma$ | `&gamma;` (&gamma;) / `&Gamma;` (&Gamma;) |
| **Delta** | `\delta` | $\delta$ | `\Delta` | $\Delta$ | `&delta;` (&delta;) / `&Delta;` (&Delta;) |
| **Epsilon** | `\epsilon`, `\varepsilon` | $\epsilon$, $\varepsilon$ | `E` | $E$ | `&epsilon;` (&epsilon;) / `&Epsilon;` (&Epsilon;) |
| **Zeta** | `\zeta` | $\zeta$ | `Z` | $Z$ | `&zeta;` (&zeta;) / `&Zeta;` (&Zeta;) |
| **Eta** | `\eta` | $\eta$ | `H` | $H$ | `&eta;` (&eta;) / `&Eta;` (&Eta;) |
| **Theta** | `\theta`, `\vartheta` | $\theta$, $\vartheta$ | `\Theta` | $\Theta$ | `&theta;` (&theta;) / `&Theta;` (&Theta;) |
| **Iota** | `\iota` | $\iota$ | `I` | $I$ | `&iota;` (&iota;) / `&Iota;` (&Iota;) |
| **Kappa** | `\kappa` | $\kappa$ | `K` | $K$ | `&kappa;` (&kappa;) / `&Kappa;` (&Kappa;) |
| **Lambda** | `\lambda` | $\lambda$ | `\Lambda` | $\Lambda$ | `&lambda;` (&lambda;) / `&Lambda;` (&Lambda;) |
| **Mu** | `\mu` | $\mu$ | `M` | $M$ | `&mu;` (&mu;) / `&Mu;` (&Mu;) |
| **Nu** | `\nu` | $\nu$ | `N` | $N$ | `&nu;` (&nu;) / `&Nu;` (&Nu;) |
| **Xi** | `\xi` | $\xi$ | `\Xi` | $\Xi$ | `&xi;` (&xi;) / `&Xi;` (&Xi;) |
| **Pi** | `\pi`, `\varpi` | $\pi$, $\varpi$ | `\Pi` | $\Pi$ | `&pi;` (&pi;) / `&Pi;` (&Pi;) |
| **Rho** | `\rho`, `\varrho` | $\rho$, $\varrho$ | `P` | $P$ | `&rho;` (&rho;) / `&Rho;` (&Rho;) |
| **Sigma** | `\sigma`, `\varsigma` | $\sigma$, $\varsigma$ | `\Sigma` | $\Sigma$ | `&sigma;` (&sigma;) / `&Sigma;` (&Sigma;) |
| **Tau** | `\tau` | $\tau$ | `T` | $T$ | `&tau;` (&tau;) / `&Tau;` (&Tau;) |
| **Upsilon** | `\upsilon` | $\upsilon$ | `\Upsilon` | $\Upsilon$ | `&upsilon;` (&upsilon;) / `&Upsilon;` (&Upsilon;) |
| **Phi** | `\phi`, `\varphi` | $\phi$, $\varphi$ | `\Phi` | $\Phi$ | `&phi;` (&phi;) / `&Phi;` (&Phi;) |
| **Chi** | `\chi` | $\chi$ | `X` | $X$ | `&chi;` (&chi;) / `&Chi;` (&Chi;) |
| **Psi** | `\psi` | $\psi$ | `\Psi` | $\Psi$ | `&psi;` (&psi;) / `&Psi;` (&Psi;) |
| **Omega** | `\omega` | $\omega$ | `\Omega` | $\Omega$ | `&omega;` (&omega;) / `&Omega;` (&Omega;) |

---

### 2.3 Calculus, Operators & Matrix Formats

| Operation / Concept | TeX Math Code | Rendered Output |
| :--- | :--- | :---: |
| **Definite / Indefinite Integral** | `\int_{a}^{b} f(x) \text{ } dx` | $\int_{a}^{b} f(x) \text{ } dx$ |
| **Contour / Surface Integral** | `\oint_C \vec{B} \cdot d\vec{\ell}`, `\iint_S \vec{E} \cdot d\vec{A}` | $\oint_C \vec{B} \cdot d\vec{\ell}$, $\iint_S \vec{E} \cdot d\vec{A}$ |
| **Summation & Product** | `\sum_{k=1}^{n} k^2`, `\prod_{i=1}^{n} x_i` | $\sum_{k=1}^{n} k^2$, $\prod_{i=1}^{n} x_i$ |
| **Partial Derivatives & Nabla** | `\frac{\partial^2 \psi}{\partial x^2}`, `\nabla \times \vec{B}` | $\frac{\partial^2 \psi}{\partial x^2}$, $\nabla \times \vec{B}$ |
| **Limits** | `\lim_{x \to 0} \frac{\sin x}{x} = 1` | $\lim_{x \to 0} \frac{\sin x}{x} = 1$ |
| **Square & Nth Roots** | `\sqrt{x^2 + y^2}`, `\sqrt[3]{V}` | $\sqrt{x^2 + y^2}$, $\sqrt[3]{V}$ |
| **Vectors & Hats** | `\vec{v}`, `\mathbf{E}`, `\hat{n}`, `\dot{x}`, `\ddot{\theta}` | $\vec{v}$, $\mathbf{E}$, $\hat{n}$, $\dot{x}$, $\ddot{\theta}$ |
| **Matrix (Parentheses)** | `\begin{pmatrix} a & b \\ c & d \end{pmatrix}` | $\begin{pmatrix} a & b \\\\ c & d \end{pmatrix}$ |
| **Matrix (Brackets)** | `\begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix}` | $\begin{bmatrix} 1 & 0 \\\\ 0 & 1 \end{bmatrix}$ |
| **Determinant / Magnitude** | `\begin{vmatrix} x & y \\ z & w \end{vmatrix}` | $\begin{vmatrix} x & y \\\\ z & w \end{vmatrix}$ |

---

### 2.4 Logic, Set Theory & Relational Symbols

| Category | TeX Math Code | Rendered | HTML Entity / Code |
| :--- | :--- | :---: | :--- |
| **Quantifiers** | `\forall x`, `\exists y`, `\nexists z` | $\forall x$, $\exists y$, $\nexists z$ | `&forall;` (&forall;), `&exist;` (&exist;) |
| **Set Membership** | `x \in A`, `y \notin B`, `\emptyset` | $x \in A$, $y \notin B$, $\emptyset$ | `&isin;` (&isin;), `&notin;` (&notin;), `&empty;` (&empty;) |
| **Subsets & Supersets** | `A \subset B`, `A \subseteq B`, `A \cup B`, `A \cap B` | $A \subset B$, $A \subseteq B$, $A \cup B$, $A \cap B$ | `&sub;` (&sub;), `&sube;` (&sube;), `&cup;` (&cup;), `&cap;` (&cap;) |
| **Logic Relations** | `P \land Q`, `P \lor Q`, `\neg P` | $P \land Q$, $P \lor Q$, $\neg P$ | `&and;` (&and;), `&or;` (&or;), `&not;` (&not;) |
| **Implication & Equivalence** | `P \implies Q`, `P \iff Q`, `A \equiv B` | $P \implies Q$, $P \iff Q$, $A \equiv B$ | `&rArr;` (&rArr;), `&hArr;` (&hArr;), `&equiv;` (&equiv;) |
| **Conclusions** | `\therefore`, `\because`, `\blacksquare`, `\Box` | $\therefore$, $\because$, $\blacksquare$, $\Box$ | `&there4;` (&there4;), `&#8757;` (&#8757;) |

---

### 2.5 Arrows & Signal Flow Symbols

| Arrow Direction / Type | TeX Math Code | Rendered | HTML Entity |
| :--- | :--- | :---: | :--- |
| **Right / Left Arrow** | `\rightarrow`, `\leftarrow`, `\leftrightarrow` | $\rightarrow$, $\leftarrow$, $\leftrightarrow$ | `&rarr;` (&rarr;), `&larr;` (&larr;), `&harr;` (&harr;) |
| **Long Right / Left** | `\longrightarrow`, `\longleftarrow`, `\longleftrightarrow` | $\longrightarrow$, $\longleftarrow$, $\longleftrightarrow$ | `&#10230;` (&#10230;), `&#10229;` (&#10229;) |
| **Up / Down Arrow** | `\uparrow`, `\downarrow`, `\updownarrow` | $\uparrow$, $\downarrow$, $\updownarrow$ | `&uarr;` (&uarr;), `&darr;` (&darr;) |
| **Double Implies Arrows** | `\Rightarrow`, `\Leftarrow`, `\Leftrightarrow` | $\Rightarrow$, $\Leftarrow$, $\Leftrightarrow$ | `&rArr;` (&rArr;), `&lArr;` (&lArr;), `&hArr;` (&hArr;) |
| **Mapping / Yields** | `\mapsto`, `\longmapsto`, `\rightharpoonup` | $\mapsto$, $\longmapsto$, $\rightharpoonup$ | `&#8614;` (&#8614;) |

---

### 2.6 Typographic & Standard Wiki HTML Entities

| Character / Symbol | HTML Entity | Decimal Code | Rendered | Common Use Case |
| :--- | :--- | :--- | :---: | :--- |
| **Degree Symbol** | `&deg;` | `&#176;` | **&deg;** | Angles (`45&deg;`), Temperatures (`72&deg;F`, `22&deg;C`) |
| **Em Dash** | `&mdash;` | `&#8212;` | **&mdash;** | Long punctuation breaks &mdash; like this |
| **En Dash** | `&ndash;` | `&#8211;` | **&ndash;** | Number ranges (e.g. pp. 10&ndash;15, 2020&ndash;2026) |
| **Non-Breaking Space** | `&nbsp;` | `&#160;` | ` ` | Prevents unwanted line-breaks between values and units |
| **Left / Right Smart Double Quotes** | `&ldquo;`, `&rdquo;` | `&#8220;`, `&#8221;` | **&ldquo; &rdquo;** | Publication-quality quotation marks |
| **Left / Right Smart Single Quotes** | `&lsquo;`, `&rsquo;` | `&#8216;`, `&#8217;` | **&lsquo; &rsquo;** | Apostrophes and single quotations |
| **Fractions (Vulgar)** | `&frac12;`, `&frac14;`, `&frac34;` | `&#189;`, `&#188;`, `&#190;` | **&frac12;, &frac14;, &frac34;** | Inline fractions without invoking full TeX |
| **Copyright / Registered / Trademark** | `&copy;`, `&reg;`, `&trade;` | `&#169;`, `&#174;`, `&#8482;` | **&copy;, &reg;, &trade;** | Legal and branding designations |
| **Checkmark / Crossmark** | `&#10003;`, `&#10007;` | `&#10003;`, `&#10007;` | **&#10003;, &#10007;** | Verification and status indicators |
| **Bullet / Middle Dot** | `&bull;`, `&middot;` | `&#8226;`, `&#183;` | **&bull;, &middot;** | Lists and inline separators |

---

## 3. Japanese Typography & Furigana (Ruby Text)

BookStack fully supports **HTML5 Ruby Annotations** (`<ruby>` and `<rt>`) for rendering Japanese Furigana (reading glosses placed above Kanji characters).

### Furigana Syntax & Examples

#### Whole-Word Furigana
```html
<ruby>漢字<rt>かんじ</rt></ruby>
<ruby>東京<rt>とうきょう</rt></ruby>
```
* **Rendered Output:** <ruby>漢字<rt>かんじ</rt></ruby>, <ruby>東京<rt>とうきょう</rt></ruby>

#### Per-Character Furigana (Fine-Grained Alignment)
```html
<ruby>振<rt>ふ</rt>り<rt></rt>仮<rt>が</rt>名<rt>な</rt></ruby>
<ruby>電<rt>でん</rt>波<rt>ぱ</rt></ruby>
```
* **Rendered Output:** <ruby>振<rt>ふ</rt>り<rt></rt>仮<rt>が</rt>名<rt>な</rt></ruby>, <ruby>電<rt>でん</rt>波<rt>ぱ</rt></ruby>

#### Japanese Text Inside TeX Math Blocks
Japanese characters can be rendered directly inside math equations using `\text{...}`:
```latex
$$\text{周波数 } f = 433.92\text{ MHz} \qquad \text{周期 } T_e = 291.27\text{ }\mu\text{s}$$
```
$$\text{周波数 } f = 433.92\text{ MHz} \qquad \text{周期 } T_e = 291.27\text{ }\mu\text{s}$$

---

## 4. General Markdown & HTML Features Supported

### 3.1 Native BookStack Callout Alert Boxes
BookStack provides colored callout boxes for contextual notes:

```html
<p class="callout info"><strong>Info Note:</strong> Background context and informational details.</p>
<p class="callout success"><strong>Success:</strong> Empirical zero-drift test passed with 0 samples drift.</p>
<p class="callout warning"><strong>Warning:</strong> Ensure Word Clock is 75Ω terminated on the final device.</p>
<p class="callout danger"><strong>Danger / Critical:</strong> Never run recursive find commands on host ul.</p>
```

**Rendered Output:**
<p class="callout info"><strong>Info Note:</strong> Background context and informational details.</p>
<p class="callout success"><strong>Success:</strong> Empirical zero-drift test passed with 0 samples drift.</p>
<p class="callout warning"><strong>Warning:</strong> Ensure Word Clock is 75Ω terminated on the final device.</p>
<p class="callout danger"><strong>Danger / Critical:</strong> Never run recursive find commands on host ul.</p>

---

### 3.2 Collapsible Details & Accordions
```html
<details>
  <summary><strong>Click to expand technical registers</strong></summary>
  <p>Detailed hardware memory offsets and bitfields go here.</p>
</details>
```

**Rendered Output:**
<details>
  <summary><strong>Click to expand technical registers</strong></summary>
  <p>Detailed hardware memory offsets and bitfields go here.</p>
</details>

---

### 3.3 Scaled Lightbox Images with Captions
```html
<p align="center">
  <a href="https://wiki.drheck.dev/uploads/images/gallery/2026-08/20260808-19h19m36s-grim.png" target="_blank">
    <img src="https://wiki.drheck.dev/uploads/images/gallery/2026-08/20260808-19h19m36s-grim.png" alt="BookStack Interface" width="55%" style="border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: block; margin: 0 auto;">
  </a>
  <em style="display: block; text-align: center; margin-top: 6px; font-size: 0.9em; color: #666;">Figure 1: Example styled gallery image with lightbox link</em>
</p>
```

**Rendered Output:**
<p align="center">
  <a href="https://wiki.drheck.dev/uploads/images/gallery/2026-08/20260808-19h19m36s-grim.png" target="_blank">
    <img src="https://wiki.drheck.dev/uploads/images/gallery/2026-08/20260808-19h19m36s-grim.png" alt="BookStack Interface" width="55%" style="border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: block; margin: 0 auto;">
  </a>
  <em style="display: block; text-align: center; margin-top: 6px; font-size: 0.9em; color: #666;">Figure 1: Example styled gallery image with lightbox link</em>
</p>

---

### 3.4 YouTube Video Embedding

BookStack supports direct HTML5 `<iframe>` embedding from YouTube. For optimal viewing across mobile phones, tablets, and desktop displays, responsive aspect-ratio wrappers, standard fixed dimensions, or thumbnail fallbacks can be used.

<p class="callout info"><strong>Note on Ad-Blockers:</strong> Standard <code>youtube.com/embed/VIDEO_ID</code> URLs are recommended. If using browser privacy extensions or adblockers (e.g. uBlock Origin), ensure third-party iframe embeds are permitted.</p>

#### Method A: Styled & Mobile-Responsive Embed (Recommended)
Embed the player using explicit 16:9 pixel dimensions (`640` × `360` or `560` × `315`) combined with `max-width: 100%`, rounded borders, and drop shadows. The `max-width: 100%` inline rule ensures the player automatically scales down on smaller screens (such as mobile phones) without overflowing the page boundary horizontally:

```html
<iframe width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="border: 0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); max-width: 100%;"></iframe>
```

**Rendered Output:**

<iframe width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="border: 0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); max-width: 100%;"></iframe>

---

#### Method B: Raw YouTube Share Embed Snippet (Default Copy-Paste)
This is the default, unstyled iframe code copied directly from YouTube's **Share $\rightarrow$ Embed** modal (`560` × `315`). It uses fixed pixel dimensions without `max-width: 100%`, which maintains a strict fixed size on desktop, but may require horizontal scrolling on narrow mobile viewports:

```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/ApO4demUaLs?si=FTOsjdM6_M5ybmZp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
```

**Rendered Output:**

<iframe width="560" height="315" src="https://www.youtube.com/embed/ApO4demUaLs?si=FTOsjdM6_M5ybmZp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

---

#### Method C: Lightweight Thumbnail Link (Markdown Fallback)
When an active video iframe is not required or when optimizing for strict privacy environments, use a high-resolution YouTube video thumbnail with an external link:

```markdown
[![Watch Video](https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
```

**Rendered Output:**

[![Watch Video](https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

---

## 5. Summary Guide for Authors & AI Agents

1. **Math Formulas**: Use standard `$$ ... $$` for display equations and `$ ... $` for inline math.
2. **Avoiding Underscore Collisions**: Multiple unescaped underscores in a formula (e.g. `VAR_1 ... VAR_2`) can trigger Markdown italics (`<em>`). Use hyphens (e.g. `\text{DRATE-M}`) or single subscripts (`x_1`) to prevent Markdown parser mangling.
3. **Japanese / Furigana**: Use `<ruby>漢字<rt>かんじ</rt></ruby>` in Markdown, or `\text{...}` in KaTeX equations.
4. **Callout Boxes**: Use `<p class="callout info|success|warning|danger">` for styled alert banners.
5. **Code Safety**: Shell commands (`$ sudo ...`) inside `<pre>` or `<code>` code blocks are automatically preserved and never evaluated as math.
6. **YouTube Embeds**: Use `<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" ...>` inside a responsive 16:9 `<div style="position: relative; padding-bottom: 56.25%;">` wrapper.

---

## 6. Addendum: System Configuration Changes Made to BookStack

To enable native, global TeX mathematical rendering across the wiki, the following configuration changes were applied to the BookStack service running on host `ul`:

### 1. Global KaTeX Injection (`app-custom-head`)
BookStack's global HTML head template was updated via the `app-custom-head` setting in the `settings` database table to inject KaTeX `0.16.11`:

* **Stylesheet**: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">`
* **Content Security Policy (`'strict-dynamic'`) Loader**:
  Because BookStack enforces a strict Content Security Policy (`script-src http: https: 'nonce-...' 'strict-dynamic'`), standard static `<script>` tags with `onload` attributes are blocked by the browser. A nonced inline JavaScript loader was installed to dynamically append the external scripts sequentially:
  ```javascript
  (function() {
      function loadScript(url, callback) {
          var el = document.createElement('script');
          el.src = url;
          el.async = false;
          el.onload = callback;
          document.head.appendChild(el);
      }
      function init() {
          loadScript('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js', function() {
              loadScript('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js', function() {
                  var doRender = function() {
                      if (window.renderMathInElement) {
                          window.renderMathInElement(document.body, {
                              delimiters: [
                                  {left: '$$', right: '$$', display: true},
                                  {left: '$', right: '$', display: false}
                              ],
                              ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'option'],
                              throwOnError: false
                          });
                      }
                  };
                  if (document.readyState === 'loading') {
                      document.addEventListener('DOMContentLoaded', doRender);
                  } else {
                      doRender();
                  }
              });
          });
      }
      init();
  })();
  ```

### 2. Cache Invalidation
Whenever `app-custom-head` is modified in the database, BookStack's application view cache and compiled templates must be cleared inside the container:
```bash
sudo docker exec -w /app/www bookstack php artisan cache:clear
sudo docker exec -w /app/www bookstack php artisan view:clear
```
