Angular X Showdown Module based on Showdown library.
There is a demo in source code, it is also online and have another demo in Plunker can play it online.
$ npm install --save ngx-showdown
# and install peer dependencies
$ npm install --save @angular/core @angular/common showdown
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{}
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>
<showdown>
# H1
## H2
</showdown>
<showdown [options]="{...} as IConverterOptionsChangeable">
# H1
## H2
</showdown>
Note: there is a problem in content unescaped "{" and "}" (use html char code).
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>
<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>
<showdown src="README.md"></showdown>
<showdown src="README.md" [options]="{...} as IConverterOptionsChangeable"></showdown>
import { IConverterOptionsChangeable } from 'ngx-showdown';
// ...
text: string = `
# h1
## h2
`;
options: IConverterOptionsChangeable = {...}
// ...
{{ text | showdown }}
{{ text | showdown:options }}
import { ShowdownConverter } from 'ngx-showdown';
class Some{
constructor(showdownConverter: ShowdownConverter){
console.log(showdownConverter.makeHtml("..."));
}
}
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{}
This library based on Showdown library
Copyright © 2016 Yisrael Eliav, Licensed under the MIT license.