Gathering detailed insights and metrics for ngx-markdown
Gathering detailed insights and metrics for ngx-markdown
Gathering detailed insights and metrics for ngx-markdown
Gathering detailed insights and metrics for ngx-markdown
ngx-markdown-editor
Angular markdown editor based on ace editor
ngx-stackedit
FOSS WYSIWYG Markdown editor.
@fsegurai/ngx-markdown
Angular library that uses marked to parse markdown to html combined with Prism.js for syntax highlights
ngx-d-markdown
ngx-d-markdown is an Angular (8+) component for formatting markdown.
Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to HTML with syntax highlight and more...
npm install ngx-markdown
Typescript
Module System
Node Version
NPM Version
TypeScript (95.58%)
JavaScript (4.42%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
1,137 Stars
340 Commits
182 Forks
15 Watchers
8 Branches
22 Contributors
Updated on Jul 08, 2025
Latest Version
20.0.0
Package Id
ngx-markdown@20.0.0
Unpacked Size
244.61 kB
Size
48.50 kB
File Count
6
NPM Version
10.8.2
Node Version
20.19.2
Published on
May 31, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
6
5
ngx-markdown is an Angular library that combines...
Demo available @ https://jfcere.github.io/ngx-markdown
StackBlitz available @ https://stackblitz.com/edit/ngx-markdown
To add ngx-markdown along with the required marked library to your package.json
use the following commands.
1npm install ngx-markdown marked@^15.0.0 --save
: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...
node_modules/prismjs/prism.js
filenode_modules/prismjs/themes
directorynode_modules/prismjs/components
directoryAdditional 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]
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:
prism-line-numbers.css
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 3 [start]="5" 4 [src]="path/to/file.js"> 5</markdown>
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:
prism-line-highlight.css
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 3 [line]="'6, 10-16'" 4 [lineOffset]="5" 5 [src]="path/to/file.js"> 6</markdown>
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:
prism-command-line.css
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:
1<markdown 2 commandLine 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 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>
: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.0 --save
To activate Emoji-Toolkit for emoji suppport you will need to include...
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]
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> 2 I :heart: ngx-markdown 3</markdown>
:blue_book: You can refer to this Emoji Cheat Sheet for a complete list of shortnames.
: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.0 --save
To activate KaTeX math rendering you will need to include...
node_modules/katex/dist/katex.min.js
filenode_modules/katex/dist/contrib/auto-render.min.js,
filenode_modules/katex/dist/katex.min.css
fileIf 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]
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 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 'ngx-markdown'; 2 3public options: KatexOptions = { 4 displayMode: true, 5 throwOnError: false, 6 errorColor: '#cc0000', 7 delimiters: [...], 8 ... 9};
1<markdown 2 katex 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.
: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.0.0 --save
To activate Mermaid diagramming and charting tool you will need to include...
node_modules/mermaid/dist/mermaid.min.js
fileIf you are using Angular CLI you can follow the angular.json
example below...
1"scripts": [ 2+ "node_modules/mermaid/dist/mermaid.min.js", 3]
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 3 [src]="path/to/file.md"> 4</markdown>
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.
provideMarkdown
function1provideMarkdown({ 2 mermaidOptions: { 3 provide: MERMAID_OPTIONS, 4 useValue: { 5 darkMode: true, 6 look: 'handDrawn', 7 ... 8 }, 9 }, 10}),
MarkdownModule
import1MarkdownModule.forRoot({ 2 mermaidOptions: { 3 provide: MERMAID_OPTIONS, 4 useValue: { 5 darkMode: true, 6 look: 'handDrawn', 7 ... 8 }, 9 }, 10}),
Additionally, you can specify mermaid configuration options on component directly using mermaidOptions
property.
1import { MermaidAPI } from 'ngx-markdown'; 2 3public options: MermaidAPI.MermaidConfig = { 4 darkMode: true, 5 look: 'handDrawn', 6 ... 7};
1<markdown 2 mermaid 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.
: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...
node_modules/clipboard/dist/clipboard.min.js
fileIf you are using Angular CLI you can follow the angular.json
example below...
1"scripts": [ 2+ "node_modules/clipboard/dist/clipboard.min.js", 3]
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 3 [src]="path/to/file.md"> 4</markdown>
The clipboard
plugin provide an unstyled default button with a default behavior out of the box if no alternative is used.
The clipboard button is placed inside a wrapper element that can be customize using the .markdown-clipboard-toolbar
CSS selector in your global styles.css/scss
file.
This allows to override the default positionning 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.
To customize the default button styling, use the .markdown-clipboard-button
CSS selector in your global styles.css/scss
file. You can also customized the "copied" state happening after the button is clicked using the .copied
CSS selector.
You can provide a custom component to use globaly across your application with the clipboardOptions
in the MarkdownModuleConfig
either with provideMarkdown
provide-function for standalone components or MarkdownModule.forRoot()
for module configuration.
provideMarkdown
function1provideMarkdown({ 2 clipboardOptions: { 3 provide: CLIPBOARD_OPTIONS, 4 useValue: { 5 buttonComponent: ClipboardButtonComponent, 6 }, 7 }, 8})
MarkdownModule
import1MarkdownModule.forRoot({ 2 clipboardOptions: { 3 provide: CLIPBOARD_OPTIONS, 4 useValue: { 5 buttonComponent: ClipboardButtonComponent, 6 }, 7 }, 8}),
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 3 [clipboardButtonComponent]="clipboardButton"> 4</markdown>
Alternatively, the clipboard
directive can be used in conjonction 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 7 [clipboardButtonTemplate]="buttonTemplate"> 8</markdown>
:blue_book: Refer to the ngx-markdown clipboard plugin demo for live examples.
The ngx-markdown library can be used either with the standalone components or with modules configuration. Please follow the configuration section that matches your application.
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 'ngx-markdown'; 3 4export const appConfig: ApplicationConfig = { 5 providers: [ 6+ provideMarkdown(), 7 ], 8};
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 '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 'ngx-markdown'; 3import { HomeComponent } from './home.component'; 4 5@NgModule({ 6 imports: [ 7+ MarkdownModule.forChild(), 8 ], 9 declarations: [HomeComponent], 10}) 11export class HomeModule { }
If you want to use the [src]
attribute to directly load a remote file, in order to keep only one instance of HttpClient
and avoid issues with interceptors, you also have to provide HttpClient
:
provideMarkdown
function1providers: [ 2+ provideHttpClient(), 3+ provideMarkdown({ loader: HttpClient }), 4],
MarkdownModule
import1imports: [ 2+ HttpClientModule, 3+ MarkdownModule.forRoot({ loader: HttpClient }), 4],
As of ngx-markdown v9.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
.
provideMarkdown
function1import { SecurityContext } from '@angular/core'; 2 3// enable default sanitization 4provideMarkdown() 5 6// turn off sanitization 7provideMarkdown({ 8 sanitize: SecurityContext.NONE 9})
MarkdownModule
import1import { 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 follow:
1<!-- disable sanitizer using markdown component --> 2<markdown 3 [data]="markdown" 4 [disableSanitizer]="true"> 5</markdown> 6 7<!-- disable sanitizer using 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>
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
.
provideMarkdown
function1// imports 2import { MARKED_OPTIONS, provideMarkdown } from 'ngx-markdown'; 3 4// using default options 5provideMarkdown(), 6 7// using specific options with ValueProvider and passing HttpClient 8provideMarkdown({ 9 markedOptions: { 10 provide: MARKED_OPTIONS, 11 useValue: { 12 gfm: true, 13 breaks: false, 14 pedantic: false, 15 }, 16 }, 17}),
MarkdownModule
import1// imports 2import { MarkdownModule, MARKED_OPTIONS } from 'ngx-markdown'; 3 4// using default options 5MarkdownModule.forRoot(), 6 7// using specific options with ValueProvider and passing HttpClient 8MarkdownModule.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
also exposes the renderer
property which allows you to override token rendering for your whole application.
The example uses a factory function and override the default blockquote token rendering by adding a CSS class for custom styling when using Bootstrap CSS:
1import { Parser } from 'marked'; 2import { MARKED_OPTIONS, MarkedOptions, MarkedRenderer } from 'ngx-markdown'; 3 4// function that returns `MarkedOptions` with renderer override 5export function markedOptionsFactory(): MarkedOptions { 6 const renderer = new MarkedRenderer(); 7 8 renderer.blockquote = ({ tokens }) => { 9 return '<blockquote class="blockquote"><p>' + Parser.parse(tokens) + '</p></blockquote>'; 10 }; 11 12 return { 13 renderer: renderer, 14 gfm: true, 15 breaks: false, 16 pedantic: false, 17 }; 18}
provideMarkdown
function1// using specific option with FactoryProvider 2provideMarkdown({ 3 markedOptions: { 4 provide: MARKED_OPTIONS, 5 useFactory: markedOptionsFactory, 6 }, 7}),
MarkdownModule
import1// using specific option with FactoryProvider 2MarkdownModule.forRoot({ 3 markedOptions: { 4 provide: MARKED_OPTIONS, 5 useFactory: markedOptionsFactory, 6 }, 7}),
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.
provideMarkdown
function1import { 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}),
MarkdownModule
import1import { 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}),
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
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 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>
The same way the component works, you can use markdown
directive to accomplish 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>
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 options 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}
You can use MarkdownService
to have access to markdown parsing, rendering and syntax highlight methods.
1import { Component, OnInit } from '@angular/core'; 2import { MarkdownService } from 'ngx-markdown'; 3 4@Component({ ... }) 5export class ExampleComponent implements OnInit { 6 constructor(private markdownService: MarkdownService) { } 7 8 ngOnInit() { 9 // outputs: <p>I am using <strong>markdown</strong>.</p> 10 console.log(this.markdownService.parse('I am using __markdown__.')); 11 } 12}
Tokens can be rendered in a custom manner by either...
renderer
property with the MarkedOptions
when importing MarkdownModule.forRoot()
into your main application module (see Configuration section)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 { Parser } from 'marked'; 3import { MarkdownService } from 'ngx-markdown'; 4 5@Component({ 6 selector: 'app-example', 7 template: '<markdown># Heading</markdown>', 8}) 9export class ExampleComponent implements OnInit { 10 constructor(private markdownService: MarkdownService) { } 11 12 ngOnInit() { 13 this.markdownService.renderer.heading = ({ tokens, depth }) => { 14 const text = Parser.parseInline(tokens); 15 const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-'); 16 return '<h' + depth + '>' + 17 '<a name="' + escapedText + '" class="anchor" href="#' + escapedText + '">' + 18 '<span class="header-link"></span>' + 19 '</a>' + text + 20 '</h' + depth + '>'; 21 }; 22 } 23}
This code will output the following HTML:
1<h1> 2 <a name="heading" 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 overriden.
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 'ngx-markdown'; 2 3constructor( 4 private markdownService: MarkdownService, 5) { } 6 7update() { 8 this.markdownService.reload(); 9}
:blue_book: Refer to the ngx-markdown re-render demo for a live example.
When using static markdown you are responsible to provide the code block with related language.
1<markdown ngPreserveWhitespaces> 2+ ```typescript 3 const myProp: string = 'value'; 4+ ``` 5</markdown>
When using remote URL ngx-markdown will use the file extension to automatically resolve the code language.
1<!-- will use html highlights --> 2<markdown [src]="'path/to/file.html'"></markdown> 3 4<!-- will use php highlights --> 5<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>
A demo is available @ https://jfcere.github.io/ngx-markdown and its source code can be found inside the demo
directory.
The following commands will clone the repository, install npm dependencies and serve the application @ http://localhost:4200
1git clone https://github.com/jfcere/ngx-markdown.git 2npm install 3npm start
Building with AoT is part of the CI and is tested every time a commit occurs so you don't have to worry at all.
Here is the list of tasks that will be done on this library in the near future ...
Contributions are always welcome, just make sure that ...
The use of this library is totally free and no donation is required.
As the owner and primary maintainer of this project, I am putting a lot of time and effort beside my job, my family and my private time to bring the best support I can by answering questions, addressing issues and improving the library to provide more and more features over time.
If this project has been useful, that it helped you or your business to save precious time, don't hesitate to give it a star and to consider a donation to support its maintenance and future development.
Licensed under MIT.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
5 commit(s) and 6 issue activity found in the last 90 days -- score normalized to 9
Reason
4 existing vulnerabilities detected
Details
Reason
Found 1/21 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More