@ngx-markdown/core

Angular 2+ markdown to html using marked a markdown parser and compiler.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@ngx-markdown/core
400.2.26 years ago7 years agoMinified + gzip package size for @ngx-markdown/core in KB

Readme

@ngx-markdown/core
Angular 2+ markdown to html module using marked a markdown parser and compiler.
Commit Versioning

Demonstration

Get simple example demonstration usage from github repository by opening your command line and do the following:
git clone https://github.com/ngx-markdown/demo.git
cd demo
npm install && npm start

Open http://localhost:4200/ in your browser.

Installation

To install, run:
npm install --save @ngx-markdown/core

Usage

  1. In file ./example.module.ts
// external
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// @ngx
import { MarkdownModule } from '@ngx-markdown/core';

// internal 
import { ExampleComponent } from './example.component';

@NgModule({
  imports: [
    // external
    CommonModule,

    // internal
    MarkdownModule.forRoot({
      // this options are defaults when use forChild().
      options: {
        gfm: true,
        tables: true,
        breaks: true,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false
      },
      // template while loading
      loadingTemplate: `<div> Loading ... </div>`
    })    
  ],
  declarations: [ ]
})
export class ExampleModule { }

  1. In file ./example.component.ts

// external
import { Component, OnInit } from '@angular/core';

// internal

@Component({
  selector: 'example-component',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  stringToTransform = `**my bold**
  [link](http://example.com)
  {{language}}
  `;
  options = {
    gfm: true,
    tables: false, // changed
    breaks: true,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
  };
  interpolate = {
    language: 'I speak english'
  };
  callback = (error: any, result: string) => {
    console.log(`callback`, error, result);
  };
  getResult(event) {
    console.log(`result,`, event);
  }
  constructor() { }

  ngOnInit() { }
}

  1. In file ./example.component.html
<!-- Directive: ng-content -->
<div ngx-markdown [interpolation]="interpolate" [options]="options" [callback]="callback">
  **my bold** {{language}}
</div>

<!-- Component: ng-content -->
<ngx-markdown [interpolation]="interpolate" [options]="options" [callback]="callback">
  **my bold**
  [link](http://example.com)
  {{language}}
</ngx-markdown>

<!-- Component: dynamic with property `string` -->
<ngx-markdown
  [interpolation]="interpolate"
  [options]="options"
  [callback]="callback"
  [string]="stringToTransform"
  (result)="getResult($event)"></ngx-markdown>

<!-- Directive: dynamic with property `ngxmarkdown` -->
<div
  [ngxmarkdown]="stringToTransform"
  [callback]="callback"
  [interpolation]="interpolate"
  [options]="options"
></div>

Attributes

| Name | Type | Description | |----------|----------------|---------------------------| | callback | ((error: any, parseResult: string) => void) \| undefined | Function called when the string or ngxmarkdown has been fully parsed. | | interpolation | Object \| undefined | Data property values to inject. | | ngxmarkdown (directive) | string | "String of markdown source to be compiled." | | options | marked.MarkedOptions \| undefined | Marked options how to compile markdown string. | | string (component) | string | "String of markdown source to be compiled." |

Events

| Name | Type | Description | |----------|----------------|---------------------------| | result | string | It returns fully parsed markdown string. |

Lifecycle Hooks

Angular Lifecycle Hooks
When property change is set, its setter calls markdownToHtml() method to compile markdown string.
ngAfterViewInit(): When input property string is undefined, store ng-content and set property change to true.
ngDoCheck(): Detect input property options changes with KeyValueDiffers, and set property change to true if detected.
ngOnChanges(): Detect input property callback and string changes, and set property change to true if detected.

Style guide

Angular style guide

GIT

Commit

Versioning

Semantic Versioning 2.0.0 http://semver.org/
Given a version number MAJOR.MINOR.PATCH, increment the:
MAJOR version when you make incompatible API changes,
MINOR version when you add functionality in a backwards-compatible manner, and
PATCH version when you make backwards-compatible bug fixes.
Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.
FAQ
How should I deal with revisions in the 0.y.z initial development phase?
>The simplest thing to do is start your initial development release at 0.1.0 and then increment the minor version for each subsequent release.
How do I know when to release 1.0.0?
>If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.

License

MIT © ngx-markdown

Donate

Click to donate