angular2-markdown

Angular 2 Markdown

Source @ https://github.com/dimpu/angular2-markdown

Table of contents

• Getting Started
• Installation instructions
• Usage & Demo
• Contributing
• License

Getting Started

angular2-markdown contains MarkdownModule by Angular 2.

Additionally we are using marked.js and prismjs for this component.

Installation instructions

Install angular2-markdown from npm

npm install angular2-markdown --save

or

yarn add  angular2-markdown

How to use it with:

• angular-cli please refer to getting-started-with-ng-cli
• angular-seed please refer to getting-started-with-angular-seed
• system.js (and angular2 quickstart) please checkout sample repository
• webpack you can view our demo page source code
• plnkr sample available here
• AoT using ngc and rollup please refer to angular2-markdown-with-aot

Usage & Demo

Main source of API documentation and usage scenarious available here: https://dimpu.github.io/angular2-markdown/

Contribution

Are very welcome! And remember, contribution is not only PRs and code, but any help with docs or helping other developers to solve issues are very appreciated! Thanks in advance!

Quick Guide

app.module.js

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MarkdownModule } from 'angular2-markdown';
import { AppComponent } from '../src/app.component';

@NgModule({
  imports: [
    BrowserModule,
    MarkdownModule.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})

app.component.html

 <div Markdown>
    ### your markdown code
 </div>

or use angular component

<markdown>
    ### your markdown code
</markdown>

// to load from remote url

<div Markdown path="/path/to/readme.md"></div>

// load remote source code with auto syantax helight.

<markdown path="/path/to/code.cpp"></markdown>

<markdown path="/path/to/code.java"></markdown>

Variable binding

Now, with >1.4.x you can bind Variable to markdown component. To do so.

@Component({
    selector: 'markdown,[Markdown]',
    template: `
    <textarea [(ngModel)]="textData"></textarea>
    <markdown [data]="textData"></markdown>
    `,
})
export class MyComp {
  public textData = `## Markdown content data`;
}

Example

You can found the working example inside the /demo directory.

git clone https://github.com/dimpu/angular2-markdown.git

npm i

npm run demo.serve

now you should see working example at http://localhost:4200

Todo

• Variable binding
• Code refactor
• Write more unit testings
• Module configuration for markdown settings
• Module configuration for prismjs settings.