Ng2-md NPM | npm.io

Angular 2 Markdown Module based on Showdown library.

WARNING: This module has been renamed to ngx-showdown. Please install it instead.

Demo

There is a demo in source code, it is also online and have another demo in Plunker can play it online.

Install

$ npm install --save ng2-md
# and install peer dependencies
$ npm install --save @angular/core @angular/http showdown

Use

Setup

import { NgModule } from '@angular/core';
import { MdModule } from 'ng2-md';

@NgModule({
    imports: [ MdModule ]
})
export class AppModule{}

Or with config

import { NgModule } from '@angular/core';
import { MdModule, ConverterOptions, IConverterOptions } from 'ng2-md';

@NgModule({
    imports: [ MdModule.forRoot({...} as ConverterOptions | IConverterOptions) ]
})
export class AppModule{}

MdDirective

Binding

import { IConverterOptionsChangeable } from 'ng2-md';
// ...
    text: string = `
        # h1
        ## h2
    `;
    options: IConverterOptionsChangeable = {...}
// ...

<md [value]="text"><md>

<md [value]="text" [options]="options"><md>

<div [md]="text" [options]="options"><div>

Content

<md>
    # H1
    ## H2
<md>

<md [options]="{...} as IConverterOptionsChangeable">
    # H1
    ## H2
<md>

Note: there is a problem in content unescaped "{" and "}" (use html char code).

Options

import { IConverterOptionsChangeable } from 'ng2-md';
// ...
    options: IConverterOptionsChangeable = {...};
//...

<md [options]="options"># abc</md>

<md [disableForced4SpacesIndentedSublists]="options.disableForced4SpacesIndentedSublists" [encodeEmails]="options.encodeEmails" [excludeTrailingPunctuationFromURLs]="options.excludeTrailingPunctuationFromURLs" [ghCodeBlocks]="options.ghCodeBlocks" [ghCompatibleHeaderId]="options.ghCompatibleHeaderId" [ghMentions]="options.ghMentions" [ghMentionsLink]="options.ghMentionsLink" [headerLevelStart]="options.headerLevelStart" [literalMidWordUnderscores]="options.literalMidWordUnderscores" [noHeaderId]="options.noHeaderId" [omitExtraWLInCodeBlocks]="options.omitExtraWLInCodeBlocks" [parseImgDimensions]="options.parseImgDimensions" [prefixHeaderId]="options.prefixHeaderId" [requireSpaceBeforeHeadingText]="options.requireSpaceBeforeHeadingText" [simpleLineBreaks]="options.simpleLineBreaks" [simplifiedAutoLink]="options.simplifiedAutoLink" [smartIndentationFix]="options.smartIndentationFix" [smoothLivePreview]="options.smoothLivePreview" [strikethrough]="options.strikethrough" [tables]="options.tables" [tablesHeaderId]="options.tablesHeaderId" [tasklists]="options.tasklists" [trimEachLine]="options.trimEachLine"># abc</md>

Trim each line

<md trimEachLine="space"> # abc </md> // <md><h1>abc</h1></md>

<md trimEachLine="tab">\t# abc\t</md> // <md><h1>abc</h1></md>

both tab and space

<md trimEachLine>\t # abc\t </md> // <md><h1>abc</h1></md>

Load .md file (SrcDirective)

<md src="README.md"></md>

<md src="README.md" [options]="{...} as IConverterOptionsChangeable"></md>

Pipe

import { IConverterOptionsChangeable } from 'ng2-md';
// ...
    text: string = `
        # h1
        ## h2
    `;
    options: IConverterOptionsChangeable = {...}
// ...

{{ text | md }}

{{ text | md:options }}

Provider

import { MdConverter } from 'ng2-md';

class Some{
        constructor(mdConverter: MdConverter){
            console.log(mdConverter.makeHtml("..."));
        }
}

Default converter options

the default options is the showdown default options

import { NgModel } from '@angular/core';
import { ConverterOptions, BaseConverterOptions } from 'ng2-md';
export class MyConverterOptions extends ConverterOptions{
    constructor(){
        super({...});
    }
}
@NgModel({
    providers:[
        {provide: ConverterOptions, useClass: MyConverterOptions},
    ]
})
export class AppModule{}

import { NgModel } from '@angular/core';
import { ConverterOptions, IConverterOptions } from 'ng2-md';

@NgModel({
    providers:[
        {provide: ConverterOptions, useValue: {...} as IConverterOptions | ConverterOptions},
    ]
})
export class AppModule{}