Nonlinear Programming Methods

    TypeScript icon, indicating that this package has built-in type declarations

    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


    • j3ff