ngx-prompt-kit

Markdown

Renders markdown content using the marked parser. Sanitized via DomSanitizer. Streams gracefully — partial markdown still renders. Optional LaTeX (KaTeX) and Mermaid rendering, both opt-in.

Examples

Rich content

Headings, lists, links, emphasis, and inline code.

Release notes — v21.0.4

This is the latest patch of ngx-prompt-kit.

  • 26 components plus the cn() utility
  • Built on Spartan UI primitives
  • Distributed via Angular schematics

Run ng add ngx-prompt-kit to get started.

Streaming snapshot

A mid-stream chunk where the assistant hasn't finished writing the bullet list yet.

Steps so far

  1. Read the file
  2. Parsed the AST
  3. Looking up the symbol now

Math and diagram rendering are opt-in via [enableMath] and [enableDiagrams]. KaTeX (~280 KB) and Mermaid (~600 KB) lazy-load only when these flags are true — the default markdown bundle stays light. KaTeX additionally requires its stylesheet (node_modules/katex/dist/katex.min.css) in your angular.json styles array.

Math (LaTeX via KaTeX)

Set [enableMath]='true' to render inline ($…$) and block ($$…$$) math. Bad LaTeX renders as source text rather than throwing — safe for streamed model output.

The quadratic formula solves any second-degree polynomial:

$$x = \frac{-b \pm \sqrt{b^{2} - 4ac}}{2a}$$

Inline expressions work too — Euler's identity, $e^{i\pi} + 1 = 0$, sits naturally in a sentence.

Maxwell's first equation in differential form:

$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_{0}}$$

Mermaid diagram

Set [enableDiagrams]='true' to render Mermaid blocks. Theme detection is automatic against the .dark class on documentElement; pass [mermaidTheme] explicitly to override. Failed diagrams fall back to the source as a code block.

A typical streaming-response cycle in a chat app:

sequenceDiagram participant User participant App participant LLM User->>App: Send prompt App->>LLM: Forward request LLM-->>App: Stream tokens App-->>User: Render incrementally

The diagram above re-renders only when its source changes — identical sources share a stable id.

Math + diagrams together

Both flags can be enabled on the same component. They run in independent post-render passes (~300ms debounce) so they coexist without interference.

Pricing rationale

For a single round-trip with $T_{in}$ input tokens and $T_{out}$ output tokens at rates $p_{in}$ and $p_{out}$ (USD per million):

$$\text{cost} = \frac{T_{in} \cdot p_{in} + T_{out} \cdot p_{out}}{10^{6}}$$

Cost flows through a typical session like this:

flowchart LR A[User prompt] --> B[Tokenize] B --> C[Model call] C --> D[Streamed response] D --> E[Settle cost]

The two passes (math + diagram) run independently after marked emits HTML.

Installation

Add the markdown component (and the cn() utility) to your project. 

ng generate ngx-prompt-kit:markdown

Component API

PkMarkdown

PropTypeDefaultDescription
contentstring '' The markdown source to render.
classstring — Extra classes for the rendered container.
enableMathboolean false Lazy-load KaTeX and render LaTeX math. Requires katex.min.css in your global styles.
enableDiagramsboolean false Lazy-load Mermaid and render ```mermaid blocks. Mermaid initializes with securityLevel:strict.
mathInlineDelimiter"$" | "\(" | "both" "$" Inline math delimiter style. "both" accepts either dollar or LaTeX-style.
mathBlockDelimiter"$$" | "\[" | "both" "$$" Block math delimiter style. "both" accepts either dollar or LaTeX-style.
mermaidTheme"auto" | "default" | "dark" "auto" Mermaid theme. "auto" detects via the .dark class on documentElement; pass explicitly for bespoke theme management.