ngx-markdown-pages

An Angular library for rendering markdown files as routable pages. Built on top of ngx-markdown.

Install

npm install ngx-markdown-pages ngx-markdown marked

Setup

Call provideMarkdownPages() in your application providers:

import { provideMarkdownPages } from 'ngx-markdown-pages';

bootstrapApplication(AppComponent, {
  providers: [
    provideMarkdownPages(),
  ],
});

Options

provideMarkdownPages() accepts a MarkdownPagesOptions object:

| Option | Type | Description | |---|---|---| | clipboard | boolean | Enable the clipboard copy button on code blocks | | headerComponent | Type<unknown> | A standalone component rendered above the markdown content on every page | | footerComponent | Type<unknown> | A standalone component rendered below the markdown content on every page |

import { provideMarkdownPages } from 'ngx-markdown-pages';
import { SiteHeaderComponent } from './site-header.component';
import { SiteFooterComponent } from './site-footer.component';

provideMarkdownPages({
  clipboard: true,
  headerComponent: SiteHeaderComponent,
  footerComponent: SiteFooterComponent,
})

Routing

Define your markdown pages with markdownPageRoutes():

import { markdownPageRoutes } from 'ngx-markdown-pages';

const routes: Routes = [
  ...markdownPageRoutes([
    { path: 'getting-started', markdownFile: 'assets/docs/getting-started.md' },
    { path: 'api-reference', markdownFile: 'assets/docs/api-reference.md' },
  ]),
];

Each route renders a MarkdownPageComponent that loads and displays the specified markdown file. Heading anchor links with smooth scrolling are handled automatically.