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 @ jfcere.github.io/ng2-markdown-to-html

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

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

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';

@NgModule({
  imports: [
    CommonModule,
+    MarkdownToHtmlModule.forRoot(),
  ],
  declarations: [HomeComponent],
})

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.

If you are using Angular CLI you can add the css file by modifying the angular-cli.json file as below ...

"styles": [
  "styles.css",
+  "../node_modules/prismjs/themes/prism-okaidia.css"
],

You can find additional themes by browsing the web such as ...

• Prism-Themes
• Mokokai

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 or load the content from a remote url using src property.

<!-- static markdown -->
<markdown-to-html>
  # Markdown
</markdown-to-html>

<!-- loaded from remote url -->
<markdown-to-html [src]="'path/to/file.md'"></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
</div>

<!-- loaded from remote url -->
<div markdown-to-html [src]="'path/to/file.md'"></div>

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

<markdown-to-html>
+  ```typescript
    const myProp: string = 'value';
+  ```
</markdown-to-html>

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>

You can find the demo source code 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 https://github.com/jfcere/ng2-markdown-to-html.git

npm install

ng serve

You will need to exclude test.ts from your tsconfig.json file as loading TestBed pulls on dependencies that are not needed when serving app.

Warning! You should copy your tsconfig.json file and create a new one for AoT compilation like tsconfig-aot.json as stated on Angular official documentation othwerwise your tests won't run after excluding test.ts.

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "mapRoot": "./",
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "exclude": [
+    "test.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
 }
}

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
• Support Prism.js customizing options (line-numbers, line-height, ...)
• Transpile library to Javascript

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.