Skip to content
<ng2-markdown> - Angular2 Markdown Web Component
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Make Angular 6+ compatible Apr 1, 2019
.gitignore Add npm-debug.lot to .gitignore Dec 20, 2017 Add Jan 6, 2016
LICENSE Update Dec 20, 2017
package-lock.json Make Angular 6+ compatible Apr 1, 2019
package.json Make Angular 6+ compatible Apr 1, 2019
webpack.config.js Make Angular 6+ compatible Apr 1, 2019


A Markdown component for Angular2+ with fully themable syntax highlighting.

Markdown parsing is provided by Showdown. Syntax highlighing is provided by PrismJS

To see a working example checkout the ng2-markdown-demo project.

Now compatible with Angular 4+. Bundled to work Typescript, ES5, and ES6+ flavors of Angular.



jspm install ng2-markdown=github:evanplaice/ng2-markdown
jspm install prismjs=npm:prismjs
jspm install showdown=npm:showdown


npm install ng2-markdown


1. Import the component

  import { MarkdownComponent } from 'ng2-markdown';

Note: For a pre-minified bundle use ng2-markdown/dist/ng2-markdown.min.

2. (Optional) load a PrismJs theme if syntax highlighting is enabled

import 'prismjs/themes/[theme].css'

Replace [theme] with one of the following:

  • prism.css (Default)
  • prism-coy.css
  • prism-dark.css
  • prism-funky.css
  • prism-okaidia.css
  • prism-solarizedlight.css
  • prism-tomorrow.css
  • prism-twilight.css

Note: Loading css via ES6 imports requires a style loader and loaders are transpiler/bundler-specific. For webpack use the style!css! prefix. For JSPM/System.js use the !css postfix.

3. (Optional) Load support for additional languages

  import 'prismjs/components/prism-[language].min';

Replace [language] with the language you'd like to include. See Languages List for a full list of supported languages.

Note: HTML, CSS, Javascript, and C-like languages are included by default.


Load Markdown from a file with syntax highlighting

This method fires off an AJAX request to load markdown from a file on the server.

<ng2-markdown [src]='/path/to/file' [highlight]='true'></ng2-markdown>

Load Markdown from a Data variable

Load Markdown data from directly from a template binding

<ng2-markdown [data]='data' [highlight]='true'></ng2-markdown>

That's it... Yes, really.

Load a series of Markdown elements

Syntax highlighting is triggered globally for every ng2-markdown element where [highlight]='true'. If it's desirable to load multiple ng2-markdown elements on a page, it's necessary to minimize the number of times a highlight event is triggered.

A easy workaround is to detect when the last ng2-markdown element is loaded and only set [highlight]='true' on that element.

<div *ngFor="let article of articles; let isLast=last" [last]="isLast">
  <ng2-markdown [src]="article.url" [highlight]="last"></ng2-markdown>



  • Modify [data] and [src] to update when the binding is modified.
You can’t perform that action at this time.