![\"Ngx-Markdown](\"https://github.com/jfcere/ngx-markdown/raw/master/demo/src/assets/ngx-markdown.png\")
\n\n \n
\n \n ![\"CircleCI](\"https://circleci.com/gh/jfcere/ngx-markdown/tree/master.svg?style=shield\")
\n \n \n ![\"Coverage](\"https://coveralls.io/repos/github/jfcere/ngx-markdown/badge.svg?branch=master\"){kind=icon}
\n \n \n ![\"NPM](\"https://img.shields.io/npm/v/ngx-markdown.svg?style=flat\")
\n \n \n ![\"License\"](\"https://img.shields.io/npm/l/ngx-markdown.svg\")
\n \n \n ![\"Monthly](\"https://img.shields.io/npm/dm/ngx-markdown.svg\")
\n \n
\n \n ![\"Dependencies](\"https://david-dm.org/jfcere/ngx-markdown/status.svg?path=lib\")
\n \n \n ![\"PeerDependencies](\"https://david-dm.org/jfcere/ngx-markdown/peer-status.svg?path=lib\")
\n \n
';\n };\n\n return {\n renderer: renderer,\n gfm: true,\n breaks: false,\n pedantic: false,\n smartLists: true,\n smartypants: false,\n };\n}\n\n// using specific option with FactoryProvider\nMarkdownModule.forRoot({\n loader: HttpClient,\n markedOptions: {\n provide: MarkedOptions,\n useFactory: markedOptionsFactory,\n },\n}),\n```\n\n### Other application modules\n\nUse `forChild` when importing `MarkdownModule` into other application modules to allow you to use the same parser configuration across your application.\n\n```diff\nimport { NgModule } from '@angular/core';\n+ import { MarkdownModule } from 'ngx-markdown';\n\nimport { HomeComponent } from './home.component';\n\n@NgModule({\n imports: [\n+ MarkdownModule.forChild(),\n ],\n declarations: [HomeComponent],\n})\nexport class HomeModule { }\n```\n\n## Usage\n\n`ngx-markdown` provides different approaches to help you parse markdown to your application depending on your needs.\n\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. \nhttps://angular.io/api/core/Component#preserveWhitespaces\n\n### Component\n\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.\n\n```html\n\n' + text + '
I am using markdown.
\n console.log(this.markdownService.compile('I am using __markdown__.'));\n }\n}\n```\n\n## Renderer\n\nTokens can be rendered in a custom manner by either...\n- providing the `renderer` property with the `MarkedOptions` when importing `MarkdownModule.forRoot()` into your main application module (see [Configuration](#markedoptionsrenderer) section)\n- using `MarkdownService` exposed `renderer`\n\nHere is an example of overriding the default heading token rendering through `MarkdownService` by adding an embedded anchor tag like on GitHub:\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { MarkdownService } from 'ngx-markdown';\n\n@Component({\n selector: 'app-example',\n template: '