editor/apps/dev/src/pages/math.vue

<script setup lang="ts">
import LiveExample from "~/components/LiveExample.vue"
</script>

<template>
  <UPage>
    <UPageHeader title="Math" description="Inline $...$ and display $$...$$ math with KaTeX rendering." />

    <UPageBody>
      <div class="space-y-8">
        <section>
          <h2 class="text-lg font-semibold text-highlighted mb-3">Inline Math</h2>
          <div class="space-y-6">
            <LiveExample
              title="Basic Inline"
              description="Use single $ delimiters for inline math."
              :content="`The formula $E = mc^2$ is famous.`"
            />

            <LiveExample
              title="Complex Expressions"
              description="Inline math handles complex LaTeX."
              :content="`The sum $\\sum_{i=1}^n i = \\frac{n(n+1)}{2}$ converges nicely.`"
            />

            <LiveExample
              title="Greek Letters"
              description="Standard LaTeX Greek letters work inline."
              :content="`Angles: $\\alpha$, $\\beta$, $\\gamma$ are common variables.`"
            />
          </div>
        </section>

        <USeparator />

        <section>
          <h2 class="text-lg font-semibold text-highlighted mb-3">Block Math</h2>
          <div class="space-y-6">
            <LiveExample
              title="Display Math"
              description="Use $$...$$ for display math blocks. Type $$ at the start of an empty paragraph."
              :content="`Here is a displayed equation:\n\n$$\n\\int_{-\\infty}^{\\infty} e^{-x^2} \\, dx = \\sqrt{\\pi}\n$$`"
            />

            <LiveExample
              title="Matrices"
              description="Block math supports matrices and arrays."
              :content="`A 2x2 matrix:\n\n$$\n\\begin{bmatrix}\na & b \\\\\nc & d\n\\end{bmatrix}\n$$`"
            />

            <LiveExample
              title="Piecewise Functions"
              description="Block math handles cases and piecewise definitions."
              :content="`Piecewise function:\n\n$$\nf(x) = \\begin{cases}\nx^2 & \\text{if } x > 0 \\\\\n0 & \\text{otherwise}\n\\end{cases}\n$$`"
            />
          </div>
        </section>

        <USeparator />

        <section>
          <h2 class="text-lg font-semibold text-highlighted mb-3">Mixed Content</h2>
          <div class="space-y-6">
            <LiveExample
              title="Math with Other Syntax"
              description="Math works alongside formatting, callouts, refs, and tasks."
              :content="`## Math Document\n\nYou can use **bold** and $x$ inline math together.\n\n> [!NOTE] Callouts with math: $E = mc^2$\n\n[[Physics Notes]] with $\\theta$ angle.\n\nTODO Review $\\Delta$ formula`"
            />
          </div>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>