Get unlimited public & private packages + package-based permissions with npm Pro.Get started »


1.3.2 • Public • Published


CircleCI Coverage Status version npm dependencies Status peerDependencies Status

ng2-markdown-to-html is an Angular 2+ library that uses marked to parse markdown to html combined with Prism.js for synthax highlights.

Demo available @


Use the following command to add ng2-markdown-to-html library to your package.json file.

npm install ng2-markdown-to-html --save


To activate Prism.js synthax highlight you will need to choose a css theme file from node_modules/prismjs/themes directory and add it to your application along with @types/prismjs types file.

Note that you can also find additional themes by browsing the web such as Prism-Themes or Mokokai for example.

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


"styles": [
+ "../node_modules/prismjs/themes/prism-okaidia.css"
], (for Angular-CLI >= 1.0.0-rc.0)

"compilerOptions": {
  "types": [
+   "prismjs"


You must import MarkdownToHtmlModule inside your module to be able to use markdown-to-html component and/or directive.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
+ import { MarkdownToHtmlModule } from 'ng2-markdown-to-html';
import { HomeComponent } from './home.component';
  imports: [
+    MarkdownToHtmlModule.forRoot(),
  declarations: [HomeComponent],

ng2-markdown-to-html provides one component and one directive to parse your markdown to your web application.


You can use markdown-to-html 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.

<!-- static markdown -->
  # Markdown
<!-- loaded from remote url -->
<markdown-to-html [src]="'path/to/'"></markdown-to-html>
<!-- variable binding -->
<markdown-to-html [data]="markdown"></markdown-to-html>


The same way the component works, you can use markdown-to-html directive to accomplish the same thing.

<!-- static markdown -->
<div markdown-to-html>
  # Markdown
<!-- loaded from remote url -->
<div markdown-to-html [src]="'path/to/'"></div>
<!-- variable binding -->
<div markdown-to-html [data]="markdown"></div>

Synthax highlight

When using static markdown you are responsible to provide the code block with related language.

+  ```typescript
    const myProp: string = 'value';
+  ```

When using remote url ng2-markdown-to-html will use file extension to automatically resolve the code language.

<!-- will use html highlights -->
<markdown-to-html [src]="'path/to/file.html'"></markdown-to-html>
<!-- will use php highlights -->
<markdown-to-html [src]="'path/to/file.php'"></markdown-to-html>

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).

<markdown-to-html [data]="markdown | language : 'typescript'"></markdown-to-html>

Demo application

A demo is available @ and it source code can be found inside the src/app/markdown-demo directory.

The following commands will clone the repository, install npm dependencies and serve the application @ http://localhost:4200

git clone
npm install
ng serve

AoT compilation

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.

Road map

Here is the list of tasks that will be done on this library in a near future ...

  • Add CircleCI integration
  • Publish demo on github pages
  • Add variable binding feature
  • Transpile library to Javascript
  • Make Prism highlight optional
  • Support Prism.js customizing options (line-numbers, line-height, ...)


Contributions are always welcome, just make sure that ...

  • Your code style matches with the rest of the project
  • Unit tests pass
  • Linter passes


Licensed under MIT.


npm i ng2-markdown-to-html

DownloadsWeekly Downloads






Last publish


  • avatar