Skip to main content

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

$$\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

$$\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

$$\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

$$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

$$\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

$$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}$ ° or ° ° $\theta = 90^\circ$, 72°F Degree Fahrenheit ^\circ\text{F} $77^\circ\text{F}$ °F °F $T = 68^\circ\text{F}$ Ohm (Resistance) \Omega or \text{k}\Omega $\Omega$, $\text{k}\Omega$ Ω Ω $R_1 = 4.7\text{k}\Omega$ Micro (Prefix) \mu or \mu\text{F} $\mu$, $\mu\text{F}$ µ µ $C = 100\mu\text{F}$, µs Delta (Change / Diff) \Delta or \delta $\Delta$, $\delta$ Δ, δ Δ, δ $\Delta V = 1.2\text{ V}$ H-bar (Planck Constant) \hbar $\hbar$ ℏ ℏ $\hbar = \frac{h}{2\pi}$ Angstrom (Wavelength) \text{\AA} or \mathring{\text{A}} $\text{\AA}$ Å Å $\lambda = 5500\text{ \AA}$ Angle \angle, \measuredangle $\angle$, $\measuredangle$ ∠ or ∠ ∠ $\angle ABC = 45^\circ$ Perpendicular / Orthogonal \perp $\perp$ ⊥ ⊥ $\vec{A} \perp \vec{B}$ Parallel \parallel $\parallel$ ∥ ∥ $L_1 \parallel L_2$ Infinity \infty $\infty$ ∞ ∞ $\lim_{x \to \infty} f(x)$ Proportional To \propto $\propto$ ∝ ∝ $F \propto \frac{1}{r^2}$ Approximately Equal \approx, \sim $\approx$, $\sim$ ≈ ≈ $x \approx 3.14$ Plus-Minus / Minus-Plus \pm, \mp $\pm$, $\mp$ ± ± $V_{\text{out}} = 5\text{V} \pm 5\%$ Multiplication / Dot \times, \cdot $\times$, $\cdot$ ×, · ×, · $A \times B$, $A \cdot B$ Division \div $\div$ ÷ ÷ $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$ α (α) / Α (Α) Beta \beta $\beta$ B $B$ β (β) / Β (Β) Gamma \gamma $\gamma$ \Gamma $\Gamma$ γ (γ) / Γ (Γ) Delta \delta $\delta$ \Delta $\Delta$ δ (δ) / Δ (Δ) Epsilon \epsilon, \varepsilon $\epsilon$, $\varepsilon$ E $E$ ε (ε) / Ε (Ε) Zeta \zeta $\zeta$ Z $Z$ ζ (ζ) / Ζ (Ζ) Eta \eta $\eta$ H $H$ η (η) / Η (Η) Theta \theta, \vartheta $\theta$, $\vartheta$ \Theta $\Theta$ θ (θ) / Θ (Θ) Iota \iota $\iota$ I $I$ ι (ι) / Ι (Ι) Kappa \kappa $\kappa$ K $K$ κ (κ) / Κ (Κ) Lambda \lambda $\lambda$ \Lambda $\Lambda$ λ (λ) / Λ (Λ) Mu \mu $\mu$ M $M$ μ (μ) / Μ (Μ) Nu \nu $\nu$ N $N$ ν (ν) / Ν (Ν) Xi \xi $\xi$ \Xi $\Xi$ ξ (ξ) / Ξ (Ξ) Pi \pi, \varpi $\pi$, $\varpi$ \Pi $\Pi$ π (π) / Π (Π) Rho \rho, \varrho $\rho$, $\varrho$ P $P$ ρ (ρ) / Ρ (Ρ) Sigma \sigma, \varsigma $\sigma$, $\varsigma$ \Sigma $\Sigma$ σ (σ) / Σ (Σ) Tau \tau $\tau$ T $T$ τ (τ) / Τ (Τ) Upsilon \upsilon $\upsilon$ \Upsilon $\Upsilon$ υ (υ) / Υ (Υ) Phi \phi, \varphi $\phi$, $\varphi$ \Phi $\Phi$ φ (φ) / Φ (Φ) Chi \chi $\chi$ X $X$ χ (χ) / Χ (Χ) Psi \psi $\psi$ \Psi $\Psi$ ψ (ψ) / Ψ (Ψ) 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$ ∀ (∀), ∃ (∃) Set Membership x \in A, y \notin B, \emptyset $x \in A$, $y \notin B$, $\emptyset$ ∈ (∈), ∉ (∉), ∅ (∅) 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$ ⊂ (⊂), ⊆ (⊆), ∪ (∪), ∩ (∩) Logic Relations P \land Q, P \lor Q, \neg P $P \land Q$, $P \lor Q$, $\neg P$ ∧ (∧), ∨ (∨), ¬ (¬) Implication & Equivalence P \implies Q, P \iff Q, A \equiv B $P \implies Q$, $P \iff Q$, $A \equiv B$ ⇒ (⇒), ⇔ (⇔), ≡ (≡) Conclusions \therefore, \because, \blacksquare, \Box $\therefore$, $\because$, $\blacksquare$, $\Box$ ∴ (∴), ∵ (∵)

2.5 Arrows & Signal Flow Symbols

Arrow Direction / Type TeX Math Code Rendered HTML Entity Right / Left Arrow \rightarrow, \leftarrow, \leftrightarrow $\rightarrow$, $\leftarrow$, $\leftrightarrow$ → (→), ← (←), ↔ (↔) Long Right / Left \longrightarrow, \longleftarrow, \longleftrightarrow $\longrightarrow$, $\longleftarrow$, $\longleftrightarrow$ ⟶ (⟶), ⟵ (⟵) Up / Down Arrow \uparrow, \downarrow, \updownarrow $\uparrow$, $\downarrow$, $\updownarrow$ ↑ (↑), ↓ (↓) Double Implies Arrows \Rightarrow, \Leftarrow, \Leftrightarrow $\Rightarrow$, $\Leftarrow$, $\Leftrightarrow$ ⇒ (⇒), ⇐ (⇐), ⇔ (⇔) Mapping / Yields \mapsto, \longmapsto, \rightharpoonup $\mapsto$, $\longmapsto$, $\rightharpoonup$ ↦ (↦)

2.6 Typographic & Standard Wiki HTML Entities

Character / Symbol HTML Entity Decimal Code Rendered Common Use Case Degree Symbol ° ° ° Angles (45°), Temperatures (72°F, 22°C) Em Dash — — — Long punctuation breaks — like this En Dash – – – Number ranges (e.g. pp. 10–15, 2020–2026) Non-Breaking Space       Prevents unwanted line-breaks between values and units Left / Right Smart Double Quotes “, ” “, ” “ ” Publication-quality quotation marks Left / Right Smart Single Quotes ‘, ’ ‘, ’ ‘ ’ Apostrophes and single quotations Fractions (Vulgar) ½, ¼, ¾ ½, ¼, ¾ ½, ¼, ¾ Inline fractions without invoking full TeX Copyright / Registered / Trademark ©, ®, ™ ©, ®, ™ ©, ®, ™ Legal and branding designations Checkmark / Crossmark ✓, ✗ ✓, ✗ ✓, ✗ Verification and status indicators Bullet / Middle Dot •, · •, · •, · 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

<ruby>漢字<rt>かんじ</rt></ruby>
<ruby>東京<rt>とうきょう</rt></ruby>
  • Rendered Output: 漢字かんじ, 東京とうきょう

Per-Character Furigana (Fine-Grained Alignment)

<ruby>振<rt>ふ</rt>り<rt></rt>仮<rt>が</rt>名<rt>な</rt></ruby>
<ruby>電<rt>でん</rt>波<rt>ぱ</rt></ruby>
  • Rendered Output: 振ふり仮が名な, 電でん波ぱ

Japanese Text Inside TeX Math Blocks

Japanese characters can be rendered directly inside math equations using \text{...}:

$$\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}$$


3.4. General Markdown & HTML Features Supported

3.1 Native BookStack Callout Alert Boxes

BookStack provides colored callout boxes for contextual notes:

<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:

Info Note: Background context and informational details.

Success: Empirical zero-drift test passed with 0 samples drift.

Warning: Ensure Word Clock is 75Ω terminated on the final device.

Danger / Critical: Never run recursive find commands on host ul.


3.2 Collapsible Details & Accordions

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

Rendered Output:

Click to expand technical registers

Detailed hardware memory offsets and bitfields go here.


3.3 Scaled Lightbox Images with Captions

<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:

BookStack Interface Figure 1: Example styled gallery image with lightbox link


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.

Note on Ad-Blockers: Standard youtube.com/embed/VIDEO_ID URLs are recommended. If using browser privacy extensions or adblockers (e.g. uBlock Origin), ensure third-party iframe embeds are permitted.

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:

<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:


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:

<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:


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:

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

Rendered Output:

Watch Video


4.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.

5.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:

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:

sudo docker exec -w /app/www bookstack php artisan cache:clear
sudo docker exec -w /app/www bookstack php artisan view:clear