ngx-showdown

Angular X Showdown Module based on Showdown library.

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 ngx-showdown
# and install peer dependencies
$ npm install --save @angular/core @angular/http showdown

Use

Setup

import { NgModule } from '@angular/core';
import { ShowdownModule } from 'ngx-showdown';

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

Or with config

import { NgModule } from '@angular/core';
import { ShowdownModule, ConverterOptions, IConverterOptions } from 'ngx-showdown';

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

ShowdownDirective

Binding

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

<showdown [value]="text"></showdown>

<showdown [value]="text" [options]="options"></showdown>

<div [showdown]="text" [options]="options"></div>

Content

<showdown>
    # H1
    ## H2
</showdown>

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

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

Options

import { IConverterOptionsChangeable } from 'ngx-showdown';
// ...
    options: IConverterOptionsChangeable = {...};
//...

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

<showdown [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</showdown>

Trim each line

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

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

both tab and space

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

Load .md file (SrcDirective)

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

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

Pipe

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

{{ text | showdown }}

{{ text | showdown:options }}

Provider

import { ShowdownConverter } from 'ngx-showdown';

class Some{
        constructor(showdownConverter: ShowdownConverter){
            console.log(showdownConverter.makeHtml("..."));
        }
}

Default converter options

the default options is the showdown default options

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

Or

import { NgModel } from '@angular/core';
import { ConverterOptions, IConverterOptions } from 'ngx-showdown';

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

Credits

This library based on Showdown library

License

Copyright © 2016 Yisrael Eliav, Licensed under the MIT license.