@fsegurai/ngx-markdown is an Angular library that combines...

• Marked to parse Markdown to HTML
• Prism.js for language syntax highlight
• Emoji-Toolkit for emoji support
• KaTeX for math expression rendering
• Mermaid for diagrams and charts visualization
• Clipboard.js to copy code blocks to the clipboard

Table of contents

• Installation
• Configuration
• Usage
• Renderer
• Re-renderer Markdown
• Syntax highlight
• Demo application
• License

Installation

@fsegurai/ngx-markdown

To add @fsegurai/ngx-markdown along with the required marked library to your package.json use the following commands.

1npm install @fsegurai/ngx-markdown marked@^15.0.12 --save

Syntax highlighting

:bell: Syntax highlight is optional, skip this step if you are not planning to use it

To add Prism.js library to your package.json use the following command.

1npm install prismjs@^1.30.0 --save

To activate Prism.js syntax highlight, you will need to include...

• prism.js core library - node_modules/prismjs/prism.js file
• a highlight CSS theme - from node_modules/prismjs/themes directory
• desired code language syntax files - from node_modules/prismjs/components directory

Additional themes can be found by browsing the web such as Prism-Themes or Mokokai for example.

If you are using Angular CLI you can follow the angular.json example below...

1"styles": [
2  "styles.css",
3+ "node_modules/prismjs/themes/prism-okaidia.css"
4],
5"scripts": [
6+ "node_modules/prismjs/prism.js",
7+ "node_modules/prismjs/components/prism-csharp.min.js", # c-sharp language syntax
8+ "node_modules/prismjs/components/prism-css.min.js" # css language syntax
9]

Line Numbers plugin

To use the line numbers plugin that shows line numbers in code blocks, in addition to Prism.js configuration files, you will need to include the following files from prismjs/plugins/line-numbers directory to your application:

• CSS styling for line numbers - prism-line-numbers.css
• line numbers plugin script - prism-line-numbers.js

If you are using Angular CLI you can follow the angular.json example below...

1"styles": [
2  "src/styles.css",
3  "node_modules/prismjs/themes/prism-okaidia.css",
4+ "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
5],
6"scripts": [
7  "node_modules/prismjs/prism.js",
8  "node_modules/prismjs/components/prism-csharp.min.js",
9  "node_modules/prismjs/components/prism-css.min.js",
10+ "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"
11]

Using markdown component and/or directive, you will be able to use the lineNumbers property to activate the plugin. The property can be used in combination with either data for variable binding, src for remote content or using transclusion for static Markdown.

Additionally, you can use start input property to specify the offset number for the first display line.

1<markdown
2  [lineNumbers]="true"
3  [start]="5"
4  [src]="path/to/file.js">
5</markdown>

Line Highlight plugin

To use the line highlight plugin that highlights specific lines and/or line ranges in code blocks, in addition to Prism.js configuration files, you will need to include the following files from prismjs/plugins/line-highlight directory to your application:

• CSS styling for line highlight - prism-line-highlight.css
• line highlight plugin script - prism-line-highlight.js

If you are using Angular CLI you can follow the angular.json example below...

1"styles": [
2  "src/styles.css",
3  "node_modules/prismjs/themes/prism-okaidia.css",
4+ "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css"
5],
6"scripts": [
7  "node_modules/prismjs/prism.js",
8  "node_modules/prismjs/components/prism-csharp.min.js",
9  "node_modules/prismjs/components/prism-css.min.js",
10+ "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js"
11]

Using markdown component and/or directive, you will be able to use the lineHighlight property to activate the plugin. The property can be used in combination with either data for variable binding, src for remote content or using transclusion for static Markdown.

Use line input property to specify the line(s) to highlight and optionally there is a lineOffset property to specify the starting line of code your snippet represents.

1<markdown
2  [lineHighlight]="true"
3  [line]="'6, 10-16'"
4  [lineOffset]="5"
5  [src]="path/to/file.js">
6</markdown>

Command Line Plugin

To use the command line plugin that displays a command line with a prompt and, optionally, the output/response from the commands, you will need to include the following files from prismjs/plugins/command-line directory to your application:

• CSS styling for command line - prism-command-line.css
• command line plugin script - prism-command-line.js

If you are using Angular CLI you can follow the angular.json example below...

1"styles": [
2  "src/styles.css",
3  "node_modules/prismjs/themes/prism-okaidia.css",
4+ "node_modules/prismjs/plugins/command-line/prism-command-line.css"
5],
6"scripts": [
7  "node_modules/prismjs/prism.js",
8  "node_modules/prismjs/components/prism-csharp.min.js",
9  "node_modules/prismjs/components/prism-css.min.js",
10+ "node_modules/prismjs/plugins/command-line/prism-command-line.js"
11]

Using markdown component and/or directive, you will be able to use the commandLine property to activate the plugin. The property can be used in combination with either data for variable binding, src for remote content or using transclusion for static Markdown.

For a server command line, specify the user and host names using the user and host input properties. The resulting prompt displays a # for the root user and $ for all other users. For any other command line, such as a Windows prompt, you may specify the entire prompt using the prompt input property.

You may also specify the lines to be presented as output (no prompt and no highlighting) through the output property in the following simple format:

• A single number refers to the line with that number
• Ranges are denoted by two numbers, separated with a hyphen (-)
• Commas separate multiple line numbers or ranges
• Whitespace is allowed anywhere and will be stripped off

1<markdown
2  [commandLine]="true"
3  [user]="'chris'"
4  [host]="'remotehost'"
5  [output]="'2, 4-8'"
6  [src]="'path/to/file.bash'">
7</markdown>

Optionally, to automatically present some lines as output without providing the line numbers, you can prefix those lines with any string and specify the prefix using the filterOutput input property. For example, [filterOutput]="'(out)'" will treat lines beginning with (out) as output and remove the prefix.

1<markdown
2  [commandLine]="true"
3  [prompt]="'PS C:\Users\Chris>'"
4  [filterOutput]="'(out)'">
5  ```PowerShell
6  Get-Date
7  (out)
8  (out)Sunday, November 7, 2021 8:19:21 PM
9  (out)
10  `​``
11</markdown>

Emoji support

:bell: Emoji support is optional, skip this step if you are not planning to use it

To add Emoji-Toolkit library to your package.json use the following command.

1npm install emoji-toolkit@^9.0.1 --save

To activate Emoji-Toolkit for emoji support, you will need to include...

• Emoji-Toolkit library - node_modules/emoji-toolkit/lib/js/joypixels.min.js

If you are using Angular CLI you can follow the angular.json example below...

1"scripts": [
2+ "node_modules/emoji-toolkit/lib/js/joypixels.min.js",
3]

Emoji plugin

Using markdown component and/or directive, you will be able to use the emoji property to activate Emoji-Toolkit plugin that converts emoji shortnames such as :heart: to native Unicode emojis.

1<markdown [emoji]="true">
2  I :heart: @fsegurai/ngx-markdown
3</markdown>

:blue_book: You can refer to this Emoji Cheat Sheet for a complete list of shortnames.

Math rendering

:bell: Math rendering is optional, skip this step if you are not planning to use it

To add KaTeX library to your package.json use the following command.

1npm install katex@^0.16.22 --save

To activate KaTeX math rendering, you will need to include...

• KaTex JavaScript library - node_modules/katex/dist/katex.min.js file
• KaTex Auto-Render extension - node_modules/katex/dist/contrib/auto-render.min.js, file
• KaTex CSS customization - node_modules/katex/dist/katex.min.css file

If you are using Angular CLI you can follow the angular.json example below...

1"styles": [
2  "styles.css",
3+ "node_modules/katex/dist/katex.min.css"
4],
5"scripts": [
6+ "node_modules/katex/dist/katex.min.js",
7+ "node_modules/katex/dist/contrib/auto-render.min.js",
8]

KaTeX plugin

Using markdown component and/or directive, you will be able to use the katex property to activate KaTeX plugin that renders mathematical expression to HTML.

1<markdown
2  [katex]="true"
3  [src]="path/to/file.md">
4</markdown>

Optionally, you can use katexOptions property to specify both the KaTeX options and the KaTeX Auto-Render options.

1import {KatexOptions} from '@fsegurai/ngx-markdown';
2
3public options: KatexOptions = {
4  displayMode: true,
5  throwOnError: false,
6  errorColor: '#cc0000',
7  delimiters: [...],
8  ...
9};

1<markdown
2  [katex]="true"
3  [katexOptions]="options"
4  [src]="path/to/file.md">
5</markdown>

:blue_book: Follow official KaTeX options and KaTeX Auto-Render options documentation for more details on the available options.

Diagrams tool

:bell: Diagram support is optional, skip this step if you are not planning to use it

To add Mermaid library to your package.json use the following command.

1npm install mermaid@^11.6.0 --save

To activate Mermaid diagramming and charting tool, you will need to include...

• Mermaid JavaScript library - node_modules/mermaid/dist/mermaid.min.js file

If you are using Angular CLI you can follow the angular.json example below...

1"scripts": [
2+ "node_modules/mermaid/dist/mermaid.min.js",
3]

Mermaid plugin

Using markdown component and/or directive, you will be able to use the mermaid property to activate Mermaid plugin that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

1<markdown
2  [mermaid]="true"
3  [src]="path/to/file.md">
4</markdown>

Global configuration

You can provide a global configuration for mermaid configuration options to use across your application with the mermaidOptions in the MarkdownModuleConfig either with provideMarkdown provide-function for standalone components or MarkdownModule.forRoot() for module configuration.

Using the provideMarkdown function

1provideMarkdown({
2  mermaidOptions: {
3    provide: MERMAID_OPTIONS,
4    useValue: {
5      darkMode: true,
6      look: 'handDrawn',
7      ...
8    },
9  },
10}),

Using the MarkdownModule import

1MarkdownModule.forRoot({
2  mermaidOptions: {
3    provide: MERMAID_OPTIONS,
4    useValue: {
5      darkMode: true,
6      look: 'handDrawn',
7      ...
8    },
9  },
10}),

Component configuration

Additionally, you can specify mermaid configuration options on a component directly using mermaidOptions property.

1import {MermaidAPI} from '@fsegurai/ngx-markdown';
2
3public options: MermaidAPI.MermaidConfig = {
4  darkMode: true,
5  look: 'handDrawn',
6  ...
7};

1<markdown
2  [mermaid]="true"
3  [mermaidOptions]="options"
4  [src]="'path/to/file.md'">
5</markdown>

:blue_book: Follow official Mermaid documentation for more details on diagrams and charts syntax.

Copy-to-clipboard

:bell: Copy-to-clipboard support is optional, skip this step if you are not planning to use it

To add Clipboard library to your package.json use the following command.

1npm install clipboard@^2.0.11 --save

To activate Clipboard allowing copy-to-clipboard, you will need to include...

• Clipboard JavaScript library - node_modules/clipboard/dist/clipboard.min.js file

If you are using Angular CLI you can follow the angular.json example below...

1"scripts": [
2+ "node_modules/clipboard/dist/clipboard.min.js",
3]

Clipboard plugin

Using markdown component and/or directive, you will be able to use the clipboard property to activate Clipboard plugin that enable copy-to-clipboard for code block from a single click.

1<markdown
2  [clipboard]="true"
3  [src]="path/to/file.md">
4</markdown>

Default button

The clipboard plugin provide an unstyled default button with a default behavior out of the box if no alternative is used.

Customize the button toolbar

The clipboard button is placed inside a wrapper element that can be customized using the .markdown-clipboard-toolbar CSS selector in your global styles.css/scss file.

This allows overriding the default positioning of the clipboard button and play with the visibility of the button using the .hover CSS selector that is applied on the toolbar when the mouse cursor enters and leaves the code block element.

Customize default button

To customize the default button styling, use the .markdown-clipboard-button CSS selector in your global styles.css/scss file. You can also customize the "copied" state happening after the button is clicked using the .copied CSS selector.

Using global configuration

You can provide a custom component to use globally across your application with the clipboardOptions in the MarkdownModuleConfig either with provideMarkdown provide-function for standalone components or MarkdownModule.forRoot() for module configuration.

Using the provideMarkdown function

1provideMarkdown({
2  clipboardOptions: {
3    provide: CLIPBOARD_OPTIONS,
4    useValue: {
5      buttonComponent: ClipboardButtonComponent,
6    },
7  },
8})

Using the MarkdownModule import

1MarkdownModule.forRoot({
2  clipboardOptions: {
3    provide: CLIPBOARD_OPTIONS,
4    useValue: {
5      buttonComponent: ClipboardButtonComponent,
6    },
7  },
8}),

Using a component

You can also provide your custom component using the clipboardButtonComponent input property when using the clipboard directive.

1import {Component} from '@angular/core';
2
3@Component({
4  selector: 'app-clipboard-button',
5  template: `<button (click)="onClick()">Copy</button>`,
6})
7export class ClipboardButtonComponent {
8  onClick() {
9    alert('Copied to clipboard!');
10  }
11}

1import {ClipboardButtonComponent} from './clipboard-button-component';
2
3@Component({...})
4export class ExampleComponent {
5  readonly clipboardButton = ClipboardButtonComponent;
6}

1<markdown
2  [clipboard]="true"
3  [clipboardButtonComponent]="clipboardButton">
4</markdown>

Using ng-template

Alternatively, the clipboard directive can be used in conjunction with ng-template to provide a custom button implementation via the clipboardButtonTemplate input property on the markdown component.

1<ng-template #buttonTemplate>
2  <button (click)="onCopyToClipboard()">...</button>
3</ng-template>
4
5<markdown
6  [clipboard]="true"
7  [clipboardButtonTemplate]="buttonTemplate">
8</markdown>

:blue_book: Refer to the @fsegurai/ngx-markdown clipboard plugin demo for live examples.

Configuration

The @fsegurai/ngx-markdown library can be used either with the standalone components or with modules configuration. Please follow the configuration section that matches your application.

Standalone components

Use the provideMarkdown provide-function in your application configuration ApplicationConfig to be able to provide the MarkdownComponent and MarkdownPipe to your standalone components and/or inject the MarkdownService.

1import { NgModule } from '@angular/core';
2+ import { provideMarkdown } from '@fsegurai/ngx-markdown';
3
4export const appConfig: ApplicationConfig = {
5  providers: [
6+   provideMarkdown(),
7  ],
8};

Modules configuration

You must import MarkdownModule inside your main application module (usually named AppModule) with forRoot to be able to use the markdown component, directive, pipe and/or MarkdownService.

1import { NgModule } from '@angular/core';
2+ import { MarkdownModule } from '@fsegurai/ngx-markdown';
3import { AppComponent } from './app.component';
4
5@NgModule({
6  imports: [
7+   MarkdownModule.forRoot(),
8  ],
9  declarations: [AppComponent],
10  bootstrap: [AppComponent],
11})
12export class AppModule { }

Use forChild when importing MarkdownModule into other application modules to allow you to use the same parser configuration across your application.

1import { NgModule } from '@angular/core';
2+ import { MarkdownModule } from '@fsegurai/ngx-markdown';
3import { HomeComponent } from './home.component';
4
5@NgModule({
6  imports: [
7+   MarkdownModule.forChild(),
8  ],
9  declarations: [HomeComponent],
10})
11export class HomeModule { }

Remote file configuration

If you want to use the [src] attribute to directly load a remote file, to keep only one instance of HttpClient and avoid issues with interceptors, you also have to provide HttpClient:

Using the provideMarkdown function

1providers: [
2+  provideHttpClient(),
3+  provideMarkdown({ loader: HttpClient }),
4],

Using the MarkdownModule import

1imports: [
2+  HttpClientModule,
3+  MarkdownModule.forRoot({ loader: HttpClient }),
4],

Sanitization

As of @fsegurai/ngx-markdown@v19.0.0 sanitization is enabled by default and uses Angular DomSanitizer with SecurityContext.HTML to avoid XSS vulnerabilities. The SecurityContext level can be changed using the sanitize property when configuring MarkdownModule.

Using the provideMarkdown function

1import {SecurityContext} from '@angular/core';
2
3// enable default sanitization
4provideMarkdown()
5
6// turn off sanitization
7provideMarkdown({
8  sanitize: SecurityContext.NONE
9})

Using the MarkdownModule import

1import {SecurityContext} from '@angular/core';
2
3// enable default sanitization
4MarkdownModule.forRoot()
5
6// turn off sanitization
7MarkdownModule.forRoot({
8  sanitize: SecurityContext.NONE
9})

:blue_book: Follow Angular DomSanitizer documentation for more information on sanitization and security contexts.

You can bypass sanitization using the Markdown component, directive or pipe using the disableSanitizer option as follows:

1<!-- disable sanitizer using a Markdown component -->
2<markdown
3  [data]="markdown"
4  [disableSanitizer]="true">
5</markdown>
6
7<!-- disable sanitizer using a Markdown directive -->
8<div markdown
9     [data]="markdown"
10     [disableSanitizer]="true">
11</div>
12
13<!-- disable sanitizer using markdown pipe -->
14<div [innerHTML]="markdown | markdown : { disableSanitizer: true } | async"></div>

MarkedOptions

Optionally, markdown parsing can be configured using MarkedOptions that can be provided with the MARKED_OPTIONS injection token via the markedOptions property of the forRoot method of MarkdownModule.

Using the provideMarkdown function

1// imports
2import {MARKED_OPTIONS, provideMarkdown} from '@fsegurai/ngx-markdown';
3
4// using default options
5provideMarkdown(),
6
7// using specific options with ValueProvider and passing HttpClient
8  provideMarkdown({
9    markedOptions: {
10      provide: MARKED_OPTIONS,
11      useValue: {
12        gfm: true,
13        breaks: false,
14        pedantic: false,
15      },
16    },
17  }),

Using the MarkdownModule import

1// imports
2import {MarkdownModule, MARKED_OPTIONS} from '@fsegurai/ngx-markdown';
3
4// using default options
5MarkdownModule.forRoot(),
6
7// using specific options with ValueProvider and passing HttpClient
8  MarkdownModule.forRoot({
9    loader: HttpClient, // optional, only if you use [src] attribute
10    markedOptions: {
11      provide: MARKED_OPTIONS,
12      useValue: {
13        gfm: true,
14        breaks: false,
15        pedantic: false,
16      },
17    },
18  }),

MarkedOptions.renderer

MarkedOptions also exposes the renderer property which allows you to override token rendering for your whole application.

The example uses a factory function and overrides the default blockquote token rendering by adding a CSS class for custom styling when using Bootstrap CSS:

1import {MARKED_OPTIONS, MarkedOptions, MarkedRenderer, MarkedToken} from '@fsegurai/ngx-markdown';
2
3// function that returns `MarkedOptions` with renderer override
4export function markedOptionsFactory(): MarkedOptions {
5  const renderer = new MarkedRenderer();
6
7  renderer.blockquote = ({ text }: MarkedToken.Blockquote) => {
8    return '<blockquote class="blockquote"><p>' + text + '</p></blockquote>';
9  };
10
11  return {
12    renderer: renderer,
13    gfm: true,
14    breaks: false,
15    pedantic: false,
16  };
17}

Using the provideMarkdown function

1// using specific option with FactoryProvider
2provideMarkdown({
3  markedOptions: {
4    provide: MARKED_OPTIONS,
5    useFactory: markedOptionsFactory,
6  },
7}),

Using the MarkdownModule import

1// using specific option with FactoryProvider
2MarkdownModule.forRoot({
3  markedOptions: {
4    provide: MARKED_OPTIONS,
5    useFactory: markedOptionsFactory,
6  },
7}),

Marked extensions

When configuring the MarkdownModule, you can provide marked extensions using the MARKED_EXTENSION injection token via the markedExtensions property, which accepts an array of providers and supports Angular dependency injection.

Using the provideMarkdown function

1import {gfmHeadingId} from 'marked-gfm-heading-id';
2
3providemarkdown({
4    markedExtensions: [
5        {
6            provide: MARKED_EXTENSIONS,
7            useFactory: gfmHeadingId,
8            multi: true,
9        },
10        {
11            provide: MARKED_EXTENSIONS,
12            useFactory: myExtensionFactory,
13            deps: [SomeService],
14            multi: true,
15        },
16    ],
17}),

Using the MarkdownModule import

1import {gfmHeadingId} from 'marked-gfm-heading-id';
2
3MarkdownModule.forRoot({
4    markedExtensions: [
5        {
6            provide: MARKED_EXTENSIONS,
7            useFactory: gfmHeadingId,
8            multi: true,
9        },
10        {
11            provide: MARKED_EXTENSIONS,
12            useFactory: myExtensionFactory,
13            deps: [SomeService],
14            multi: true,
15        },
16    ],
17}),

Usage

@fsegurai/ngx-markdown provides different approaches to help you parse Markdown to your application depending on your needs.

:bulb: As of Angular 6, the template compiler strips whitespace by default. Use ngPreserveWhitespaces directive to preserve whitespaces such as newlines in order for the markdown-formatted content to render as intended.
https://angular.io/api/core/Component#preserveWhitespaces

Component

You can use markdown component to either parse static Markdown directly from your HTML markup, load the content from a remote URL using src property or bind a variable to your component using data property. You can get a hook on a load complete using load output event property, on loading error using error output event property or when parsing is completed using ready output event property.

1<!-- static markdown -->
2<markdown ngPreserveWhitespaces>
3  # Markdown
4</markdown>
5
6<!-- loaded from remote url -->
7<markdown
8  [src]="'path/to/file.md'"
9  (load)="onLoad($event)"
10  (error)="onError($event)">
11</markdown>
12
13<!-- variable binding -->
14<markdown
15  [data]="markdown"
16  (ready)="onReady()">
17</markdown>
18
19<!-- inline parser, omitting rendering top-level paragraph -->
20<markdown
21  [data]="markdown"
22  [inline]="true">
23</markdown>

Directive

The same way the component works, you can use markdown directive to achieve the same thing.

1<!-- static markdown -->
2<div markdown ngPreserveWhitespaces>
3  # Markdown
4</div>
5
6<!-- loaded from remote url -->
7<div markdown
8     [src]="'path/to/file.md'"
9     (load)="onLoad($event)"
10     (error)="onError($event)">
11</div>
12
13<!-- variable binding -->
14<div markdown
15     [data]="markdown"
16     (ready)="onReady()">
17</div>
18
19<!-- inline parser, omitting rendering top-level paragraph -->
20<div markdown
21     [data]="markdown"
22     [inline]="true">
23</div>

Pipe

Using markdown pipe to transform Markdown to HTML allow you to chain pipe transformations and will update the DOM when value changes. It is important to note that, because the marked parsing method returns a Promise, it requires the use of the async pipe.

1<!-- chain `language` pipe with `markdown` pipe to convert typescriptMarkdown variable content -->
2<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown | async"></div>

The markdown pipe allow you to use all the same plugins as the component by providing the option parameters.

1<!-- provide options parameters to activate plugins or for configuration -->
2<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown : { emoji: true, inline: true } | async"></div>

This is the MarkdownPipeOptions parameters interface, those options are the same as the ones available for the markdown component:

1export interface MarkdownPipeOptions {
2  decodeHtml?: boolean;
3  inline?: boolean;
4  emoji?: boolean;
5  katex?: boolean;
6  katexOptions?: KatexOptions;
7  mermaid?: boolean;
8  mermaidOptions?: MermaidAPI.MermaidConfig;
9  markedOptions?: MarkedOptions;
10  disableSanitizer?: boolean;
11}

Service

You can use MarkdownService to have access to Markdown parsing, rendering and syntax highlight methods.

1import {Component, OnInit} from '@angular/core';
2import {MarkdownService} from '@fsegurai/ngx-markdown';
3
4@Component({...})
5export class ExampleComponent implements OnInit {
6  constructor(private markdownService: MarkdownService) {
7  }
8
9  ngOnInit() {
10    // outputs: <p>I am using <strong>markdown</strong>.</p>
11    console.log(this.markdownService.parse('I am using __markdown__.'));
12  }
13}

Renderer

Tokens can be rendered in a custom manner by either...

• providing the renderer property with the MarkedOptions when importing MarkdownModule.forRoot() into your main application module (see Configuration section)
• using MarkdownService exposed renderer

Here is an example of overriding the default heading token rendering through MarkdownService by adding an embedded anchor tag like on GitHub:

1import {Component, OnInit} from '@angular/core';
2import {MarkdownService, MarkedToken} from '@fsegurai/ngx-markdown';
3
4@Component({
5  selector: 'app-example',
6  template: '<markdown># Heading</markdown>',
7})
8export class ExampleComponent implements OnInit {
9  constructor(private markdownService: MarkdownService) {
10  }
11
12  ngOnInit() {
13      this.markdownService.renderer.heading = ({text, depth}: MarkedToken.Heading): string => {
14      const parsedText = this.markdownService.parseInline(text); // Parse inline Markdown text to HTML
15      const escapedText = text
16              .toLowerCase()
17              .split(/\W+/)
18              .filter(Boolean)
19              .join('-'); // Remove special characters and join words with hyphens. E.g. "Hello, World!" -> "hello-world"
20      return '<h' + depth + '>' +
21        '<a name="' + escapedText + '" class="anchor" href="#' + escapedText + '">' +
22        '<span class="header-link"></span>' +
23        '</a>' + parsedText +
24        '</h' + depth + '>';
25    };
26  }
27}

This code will output the following HTML:

1<h1>
2  <a class="anchor" href="#heading">
3    <span class="header-link"></span>
4  </a>
5  Heading
6</h1>

:blue_book: Follow official marked.renderer documentation for the list of tokens that can be overridden.

Re-render Markdown

In some situations, you might need to re-render Markdown after making changes. If you've updated the text, this would be done automatically, however, if the changes are internal to the library such as rendering options, you will need to inform the MarkdownService that it needs to update.

To do so, inject the MarkdownService and call the reload() function as shown below.

1import {MarkdownService} from '@fsegurai/ngx-markdown';
2
3constructor(private markdownService: MarkdownService){
4}
5
6update(){
7  this.markdownService.reload();
8}

:blue_book: Refer to the @fsegurai/ngx-markdown re-render demo for a live example.

Syntax highlight

When using static Markdown, you are responsible to provide the code block with a related language.

1<markdown ngPreserveWhitespaces>
2+  ```typescript
3    const myProp: string = 'value';
4+  ```
5
6When using remote URL `@fsegurai/ngx-markdown` will use the file extension to automatically resolve the code language.
7
8```html
9<!-- will use HTML highlights -->
10<markdown [src]="'path/to/file.html'"></markdown>
11
12<!-- will use php highlights -->
13<markdown [src]="'path/to/file.php'"></markdown>

When using variable binding you can optionally use language pipe to specify the language of the variable content (default value is Markdown when pipe is not used).

1<markdown [data]="markdown | language : 'typescript'"></markdown>

Demo application

To see the components in action, check out the [DEMO].

To set up the demo locally, follow the next steps:

1git clone https://github.com/fsegurai/ngx-markdown.git
2bun install
3bun start

This will serve the application locally at http://localhost:4200.

License

Licensed under MIT.