@comark/angular

@comark/angular

Angular renderer for Comark. Render markdown with custom standalone components, streaming support, and SSR.

Features

• 🧩 <comark> component for one-shot markdown rendering
• 🎯 Map any Comark tag to a custom Angular component
• 🌊 Streaming-friendly with auto-close and caret support
• 🖥️ SSR-safe with Angular 17+ standalone components
• 🔌 Plugin ecosystem (math, mermaid, highlight, binding…)
• 🎯 Full TypeScript support

Installation

npm install @comark/angular
# or
pnpm add @comark/angular

Usage

import { Component } from '@angular/core'
import { ComarkComponent } from '@comark/angular'
import math, { Math } from '@comark/angular/plugins/math'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ComarkComponent],
  template: `<comark [markdown]="content" [components]="{ Math }" [plugins]="[math()]" />`,
})
export class AppComponent {
  content = `# Hello\n\nThis is **Comark** in Angular.`
}

Custom components

import { Component } from '@angular/core'
import { ComarkComponent } from '@comark/angular'
import { AlertComponent } from './alert.component'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ComarkComponent],
  template: `<comark [markdown]="content" [components]="{ alert: AlertComponent }" />`,
})
export class AppComponent {
  content = `
::alert{type="warning"}
Heads up!
::
`
}

Streaming

<comark [markdown]="content" [streaming]="isStreaming" caret />

Documentation

Full guide and API reference at comark.dev/rendering/angular.

License

Made with ❤️

Published under MIT License.