@memberjunction/ng-markdown

A feature-rich Angular component for rendering Markdown content with syntax highlighting, Mermaid diagrams, collapsible sections, GitHub-style alerts, and SVG rendering.

Installation

npm install @memberjunction/ng-markdown
Copy

Overview

The Markdown component replaces ngx-markdown with a MemberJunction-native implementation. It uses marked for parsing, Prism.js for syntax highlighting, and Mermaid for diagram rendering. The module does not use forRoot() -- simply import MarkdownModule wherever needed.

flowchart LR
    subgraph Input["Markdown Source"]
        A["Raw Markdown String"]
    end
    subgraph Parser["Parsing Pipeline"]
        B["marked parser"]
        B --> C["marked-highlight (Prism.js)"]
        B --> D["marked-alert (GitHub alerts)"]
        B --> E["marked-smartypants (typography)"]
    end
    subgraph Render["Rendering"]
        C --> F["Syntax-highlighted code blocks"]
        D --> G["Alert blockquotes"]
        B --> H["Mermaid diagrams"]
        B --> I["SVG code blocks"]
    end

    A --> B

    style Input fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Parser fill:#7c5295,stroke:#563a6b,color:#fff
    style Render fill:#2d8659,stroke:#1a5c3a,color:#fff
Copy

Usage

Module Import

import { MarkdownModule } from '@memberjunction/ng-markdown';

@NgModule({
  imports: [MarkdownModule]  // No forRoot() needed
})
export class YourModule {}
Copy

Basic Usage

<mj-markdown [data]="markdownContent"></mj-markdown>
Copy

Full Configuration

<mj-markdown
  [data]="content"
  [enableMermaid]="true"
  [enableCollapsibleHeadings]="true"
  [collapsibleHeadingLevel]="2"
  [autoExpandLevels]="[2]"
  [enableCodeCopy]="true"
  [enableAlerts]="true"
  [enableSmartypants]="true"
  [enableSvgRenderer]="true"
  [enableHtml]="false"
  [mermaidTheme]="'default'"
  (rendered)="onRendered($event)"
  (headingClick)="onHeadingClick($event)"
  (codeCopied)="onCodeCopied($event)">
</mj-markdown>
Copy

Key Features

Configuration Inputs

Outputs

Tall images can be capped by the host with the --mj-markdown-image-max-height CSS custom property (unset: no cap), for example --mj-markdown-image-max-height: 360px on a chat column.

Migration from ngx-markdown

1. Replace imports: 'ngx-markdown' to '@memberjunction/ng-markdown'
2. Remove forRoot() from module imports
3. Update selectors: <markdown> to <mj-markdown>
4. The element property is preserved for backward compatibility

Dependencies

• marked -- Markdown parser
• marked-alert -- GitHub-style alerts
• marked-highlight -- Syntax highlighting integration
• marked-smartypants -- Typography improvements
• prismjs -- Syntax highlighting
• mermaid -- Diagram rendering
• katex -- TeX math typesetting (MathML output, so no KaTeX stylesheet or fonts are needed)

Related Packages