logo

Marked Extensions

Examples / Marked Extensions
Source

Marked Extensions

Live KaTeX math rendering powered by the extensions prop. Edit the markdown to try your own math expressions.

Component Renderers

A reusable KatexRenderer.svelte component handles both inline and block math via the renderers prop. Best for reusable, testable rendering logic.

Editor

635 characters

Preview

Euler's Identity

The equation eiπ+1=0e^{i\pi} + 1 = 0 unites five fundamental constants.

Quadratic Formula

Every quadratic ax2+bx+c=0ax^2 + bx + c = 0 has solutions:

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

Mixed Content

Markdown works alongside math: bold, italic, and inline ∑i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}.

Gaussian Integral

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Tip: Use $...$ for inline math and $$...$$ for block math.

Matrix Example

(abcd)(xy)=(ax+bycx+dy)\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

Component Renderer Code

Usage

<script lang="ts">
  import SvelteMarkdown from '@humanspeak/svelte-markdown'
  import markedKatex from 'marked-katex-extension'
  import KatexRenderer from './KatexRenderer.svelte'

  const source = 'Euler: $e^{i\\pi} + 1 = 0$'
  const renderers = {
    inlineKatex: KatexRenderer,
    blockKatex: KatexRenderer
  }
</script>

<svelte:head>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
    crossorigin="anonymous" />
</svelte:head>

<SvelteMarkdown
  {source}
  extensions={[markedKatex({ throwOnError: false })]}
  {renderers}
/>

KatexRenderer.svelte

<!-- KatexRenderer.svelte -->
<script lang="ts">
  import katex from 'katex'

  interface Props {
    text: string
    displayMode?: boolean
  }

  const { text, displayMode = false }: Props = $props()

  const html = $derived(
    katex.renderToString(text, { throwOnError: false, displayMode })
  )
</script>

{@html html}