ng2-markdown-to-html

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

Installation

Use the following command to add ng2-markdown-to-html library to your package.json file. ```bash npm install ng2-markdown-to-html --save ```

Configuration

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

.angular-cli.json

```diff "styles": "styles.css",

• "../nodemodules/prismjs/themes/prism-okaidia.css"

, ```

tsconfig.app.json (for Angular-CLI >= 1.0.0-rc.0)

```diff "compilerOptions": { "types":

• "prismjs"

}, ```

Usage

You must import MarkdownToHtmlModule inside your module to be able to use markdown-to-html component and/or directive. ```diff 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, }) ``` ng2-markdown-to-html provides one component and one directive to parse your markdown to your web application.

Component

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. ```html # Markdown src="'path/to/file.md'"> data="markdown"> ```

Directive

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

Synthax highlight

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

• ```typescript

const myProp: string = 'value';

• ```

``` When using remote url ng2-markdown-to-html will use file extension to automatically resolve the code language. ```html src="'path/to/file.html'"> src="'path/to/file.php'"> ``` 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). ```html data="markdown | language : 'typescript'"> ```

Demo application

A demo is available @ https://jfcere.github.io/ng2-markdown-to-html 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 ```bash git clone https://github.com/jfcere/ng2-markdown-to-html.git 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, ...)

Contribution

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

• Your code style matches with the rest of the project

• Unit tests pass

• Linter passes

License

Licensed under MIT.