@anthropic/wampert

A powerful Angular library for rendering Markdown with syntax highlighting, GFM support, and full customization.

Features

• Syntax Highlighting: Beautiful code highlighting powered by Shiki with support for 100+ languages
• GFM Support: Full GitHub Flavored Markdown including tables, task lists, strikethrough, and autolinks
• Extensible: Add custom remark and rehype plugins
• Configurable: Theme and behavior customization via dependency injection
• SSR Compatible: Works with Angular Server-Side Rendering

Installation

npm install @anthropic/wampert

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @angular/common @angular/core @angular/platform-browser

Setup

Add the provideMarkdown() provider to your application configuration:

import { ApplicationConfig } from '@angular/core';
import { provideMarkdown } from '@anthropic/wampert';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMarkdown({
      prettyCodeTheme: {
        dark: 'github-dark',
        light: 'github-light',
      },
      keepBackground: false,
    }),
  ],
};

Usage

Import the MarkdownComponent and use it in your templates:

import { Component } from '@angular/core';
import { MarkdownComponent } from '@anthropic/wampert';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [MarkdownComponent],
  template: `
    <wampert-markdown [content]="markdownContent"></wampert-markdown>
  `,
})
export class ExampleComponent {
  markdownContent = `
# Hello World

This is **bold** and this is *italic*.

\`\`\`typescript
function greet(name: string): string {
  return \`Hello, \${name}!\`;
}
\`\`\`
  `;
}

Configuration

provideMarkdown()

The main configuration function accepts the following options:

interface MarkdownConfig {
  remarkPlugins?: RemarkPlugin[];
  rehypePlugins?: RehypePlugin[];
  prettyCodeTheme?: {
    dark: string;
    light: string;
  };
  keepBackground?: boolean;
}

Custom Plugins

You can add custom remark and rehype plugins:

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

provideMarkdown({
  remarkPlugins: [
    { plugin: remarkMath }
  ],
  rehypePlugins: [
    { plugin: rehypeKatex, options: { strict: false } }
  ],
})

Multi-Provider Support

For modular configuration, you can use the helper functions:

import {
  provideRemarkPlugins,
  provideRehypePlugins,
  providePrettyCodeTheme
} from '@anthropic/wampert';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRemarkPlugins([{ plugin: remarkMath }]),
    provideRehypePlugins([{ plugin: rehypeKatex }]),
    providePrettyCodeTheme('one-dark-pro', 'github-light'),
  ],
};

Injection Tokens

For advanced use cases, you can inject tokens directly:

• REMARK_PLUGINS - Multi-provider token for remark plugins
• REHYPE_PLUGINS - Multi-provider token for rehype plugins
• PRETTY_CODE_THEME - Theme configuration for rehype-pretty-code
• KEEP_BACKGROUND - Boolean to control background preservation

Pipeline

The library uses the unified ecosystem with the following pipeline:

1. remark-parse - Parse markdown
2. Custom remark plugins (if provided)
3. remark-gfm - GitHub Flavored Markdown
4. remark-rehype - Convert to HTML AST
5. rehype-slug - Add IDs to headings
6. Custom rehype plugins (if provided)
7. rehype-pretty-code - Syntax highlighting with Shiki
8. rehype-stringify - Convert to HTML string

Shiki Themes

The library uses Shiki for syntax highlighting. You can use any built-in Shiki theme:

• github-dark / github-light
• one-dark-pro
• dracula
• nord
• vitesse-dark / vitesse-light
• And many more...

See the Shiki themes documentation for a full list.

Dark Mode Support

The component renders both light and dark themes and uses CSS to show the appropriate one:

/* Default to light mode */
pre[data-theme='dark'],
code[data-theme='dark'] {
  display: none;
}

@media (prefers-color-scheme: dark) {
  pre[data-theme='light'],
  code[data-theme='light'] {
    display: none;
  }

  pre[data-theme='dark'],
  code[data-theme='dark'] {
    display: block;
  }
}

License

MIT