@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

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

Usage

Module Import

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

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

Basic Usage

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

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>

Key Features

| Feature | Default | Description | |---------|---------|-------------| | Syntax highlighting | Enabled | Prism.js with Okaidia theme | | Mermaid diagrams | Enabled | Render mermaid code blocks as diagrams | | Code copy button | Enabled | Copy-to-clipboard on hover | | GitHub-style alerts | Enabled | [!NOTE], [!TIP], [!WARNING] blockquotes | | Smartypants typography | Enabled | Curly quotes, em/en dashes, ellipsis | | SVG rendering | Enabled | Render SVG code blocks as images | | Collapsible headings | Disabled | Expand/collapse heading sections | | HTML passthrough | Disabled | Raw HTML rendering (security-sensitive) | | JavaScript | Disabled | Allow JS in HTML (use only for trusted content) |

Configuration Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | data | string | '' | Markdown content to render | | enableHighlight | boolean | true | Prism.js syntax highlighting | | enableMermaid | boolean | true | Mermaid diagram rendering | | enableCodeCopy | boolean | true | Copy button on code blocks | | enableCollapsibleHeadings | boolean | false | Collapsible heading sections | | collapsibleHeadingLevel | 1-6 | 2 | Heading level to start collapsing | | collapsibleDefaultExpanded | boolean | true | Default expansion state | | autoExpandLevels | number[] | undefined | Specific levels to auto-expand | | enableAlerts | boolean | true | GitHub-style alerts | | enableSmartypants | boolean | true | Typography improvements | | enableSvgRenderer | boolean | true | SVG code block rendering | | enableHtml | boolean | false | Raw HTML passthrough | | enableJavaScript | boolean | false | Allow JS in HTML | | enableHeadingIds | boolean | true | Generate heading IDs for anchors | | headingIdPrefix | string | '' | Prefix for heading IDs | | enableLineNumbers | boolean | false | Show line numbers in code blocks | | containerClass | string | '' | Custom CSS class for container | | mermaidTheme | string | 'default' | Mermaid theme (default/dark/forest/neutral/base) | | sanitize | boolean | true | Sanitize HTML output |

Outputs

| Event | Type | Description | |-------|------|-------------| | rendered | MarkdownRenderEvent | Emitted when rendering completes | | headingClick | HeadingInfo | Emitted when a heading is clicked | | codeCopied | string | Emitted when code is copied to clipboard |

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

Related Packages

• @memberjunction/ng-skip-chat -- Uses markdown for chat message rendering