![\"Ngx-Markdown](\"https://github.com/jfcere/ngx-markdown/raw/master/demo/public/ngx-markdown.png\")
\r\n\r\n \r\n
\r\n \r\n ![\"CircleCI](\"https://circleci.com/gh/jfcere/ngx-markdown/tree/master.svg?style=shield\")
\r\n \r\n \r\n ![\"Coverage](\"https://coveralls.io/repos/github/jfcere/ngx-markdown/badge.svg?branch=master\"){kind=icon}
\r\n \r\n \r\n ![\"NPM](\"https://img.shields.io/npm/v/ngx-markdown.svg?style=flat\")
\r\n \r\n \r\n ![\"License\"](\"https://img.shields.io/npm/l/ngx-markdown.svg\")
\r\n \r\n
\r\n ![\"Dependency](\"https://img.shields.io/librariesio/release/npm/ngx-markdown/22.0.2\")
![\"Monthly](\"https://img.shields.io/npm/dm/ngx-markdown.svg\")
\r\n \r\n
';\r\n };\r\n\r\n return {\r\n renderer: renderer,\r\n gfm: true,\r\n breaks: false,\r\n pedantic: false,\r\n };\r\n}\r\n```\r\n\r\n```typescript\r\n// using specific option with FactoryProvider\r\nprovideMarkdown({\r\n markedOptions: {\r\n provide: MARKED_OPTIONS,\r\n useFactory: markedOptionsFactory,\r\n },\r\n}),\r\n```\r\n\r\n### Marked extensions\r\n\r\nWhen configuring `provideMarkdown`, you can provide [marked extensions](https://marked.js.org/using_advanced#extensions) using the `MARKED_EXTENSION` injection token via the `markedExtensions` property, which accepts an array of providers and supports Angular dependency injection.\r\n\r\n```typescript\r\nimport { gfmHeadingId } from 'marked-gfm-heading-id';\r\n\r\nprovidemarkdown({\r\n markedExtensions: [\r\n {\r\n provide: MARKED_EXTENSIONS,\r\n useFactory: gfmHeadingId,\r\n multi: true,\r\n },\r\n {\r\n provide: MARKED_EXTENSIONS,\r\n useFactory: myExtensionFactory,\r\n deps: [SomeService],\r\n multi: true,\r\n },\r\n ],\r\n}),\r\n```\r\n\r\n## Usage\r\n\r\n`ngx-markdown` provides different approaches to help you parse markdown to your application depending on your needs.\r\n\r\n> :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. \r\nhttps://angular.io/api/core/Component#preserveWhitespaces\r\n\r\n### Component\r\n\r\nYou 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.\r\n\r\n```html\r\n\r\n' + Parser.parse(tokens) + '
I am using markdown.
\r\n console.log(this.markdownService.parse('I am using __markdown__.'));\r\n }\r\n}\r\n```\r\n\r\n## Renderer\r\n\r\nTokens can be rendered in a custom manner by either...\r\n- providing the `renderer` property with the `MarkedOptions` when configuring `provideMarkdown()` (see [Configuration](#markedoptionsrenderer) section)\r\n- using `MarkdownService` exposed `renderer`\r\n\r\nHere is an example of overriding the default heading token rendering through `MarkdownService` by adding an embedded anchor tag like on GitHub:\r\n\r\n```typescript\r\nimport { Component, OnInit } from '@angular/core';\r\nimport { Parser } from 'marked';\r\nimport { MarkdownService } from 'ngx-markdown';\r\n\r\n@Component({\r\n selector: 'app-example',\r\n template: '