elbe/ui

Markdown

Open in

Markdown renderer built with TanStack Markdown. Render content passed inline, through an input, or loaded from a source file.

Inline content

Hello World

Content input

Hello World

Source file

Hello World

This content was loaded from assets/markdown/example.md.

About

This component uses TanStack Markdown to render markdown to HTML. Install npm install @tanstack/markdown.

Examples

Syntax Highlighting

Open in

Highlighting is opt-in: pass a highlighter to elb-markdown with [highlighter], or set a default once via provideElbMarkdownConfig({ highlighter }). Since the component only depends on @tanstack/markdown, the highlighter is a markdown-flavored one — wrap a TanStack highlighter with createTanStackMarkdownHighlighter(). The token colors come from a theme stylesheet — here highlight.css, generated from the GitHub themes with createThemeCss().

Angular

Fenced code blocks are highlighted with @tanstack/highlight:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Count: {{ count() }}</button>`,
})
export class Counter {
  protected readonly count = signal(0);

  protected increment(): void {
    this.count.update((value) => value + 1);
  }
}

Table of Contents

Open in

elb-markdown exposes its parsed headings via headings(). Pass them to elb-markdown-toc, which filters them to a level range with [minLevel]/[maxLevel] and highlights the heading currently in view as you scroll.

Getting started

A short guide whose table of contents is generated from the parsed headings.

Installation

Install the package and import the component.

Usage

Inline content

Pass markdown as projected content.

Projected content

This level four heading is hidden from the table of contents by maxLevel.

Source file

Load markdown from a file with src.

API

Reference for the component inputs.