[![Build Status][travis-badge]][travis-badge-url] [![npm][circleci-badge-url]][circleci-url] [![version][npm-badge-url]][npm-url] [![npm][license-badge-url]][license-url] [![npm][dep-badge-url]][dep-url]
npm install angular2-markdown[![Build Status][travis-badge]][travis-badge-url]
[![npm][circleci-badge-url]][circleci-url]
[![version][npm-badge-url]][npm-url]
[![npm][license-badge-url]][license-url]
[![npm][dep-badge-url]][dep-url]
Notice: This package is depricated use https://www.npmjs.com/package/ngx-md instead.
Supports Angular2,4,5
Source @ https://github.com/dimpu/angular2-markdown
angular2-markdown contains MarkdownModule for Angular.
Additionally we use marked.js and prismjs for this component.
Install angular2-markdown from npm:
``bash`
npm install angular2-markdown --saveyarn
or using :
`bash`
yarn add angular2-markdown
- angular-cli — please refer to Getting started with angular-cliangular-seed
- — please refer to Getting started with angular-seedsystem.js
- (and Angular 2 QuickStart) — please checkout sample repositorywebpack
- — you can view our demo page source codeplnkr
- — sample available hereAoT
- using ngc and rollup — please refer to How to use angular2-markdown in Angular 2 with AoT compilation using ngc and rollup
Main source of API documentation and usage scenarios is available at https://dimpu.github.io/angular2-markdown/.
Is 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!
`typescript
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],
})
`
Alternative 1: Import from cdn
`html
`
Alternative 2: Download the css file (or copy it from node_modules/prismjs/themes/, place it somewhere in your src folder and import`html`
Alternative 3: Include the prism css file in your sass style file
`css`
@import 'prismjs/themes/prism.css';
`html
### your markdown code
### your markdown code
`
Now, with >1.4.x you can bind a variable to the markdown component. To do so:
`typescript
@Component({
selector: 'markdown,[Markdown]',
template:
,## Markdown content data
})
export class MyComp {
public textData = ;`
}
Marked can be customized/extended by accessing the renderer from the MarkdownService:
`typescript
import { MarkdownService } from 'angular2-markdown';
@Component({
selector='my-comp',
template:
> Block
> quote
> here
,
})
export class MyComp {
constructor(private _markdown: MarkdownService) {}
ngOnInit() {
this._markdown.renderer.blockquote = (quote: string) => {
return
${quote}
;
}
}
`See marked documentation for all renderer extension points.
Example
You can find a working example inside the
demo directory.To serve it locally, run:
`bash
git clone https://github.com/dimpu/angular2-markdown.gitnpm i
npm run demo.serve
``- [x] Variable binding
- [x] Code refactor
- [x] Write more unit tests
- [x] Angular 5 support
- [ ] Module configuration for markdown settings
- [ ] Module configuration for prismjs settings
The following is a list of all the people that have helped build this project. Thanks for your contributions!
[travis-badge]: https://travis-ci.org/dimpu/angular2-markdown.svg?branch=master
[travis-badge-url]: https://travis-ci.org/dimpu/angular2-markdown
[license-url]: https://opensource.org/licenses/MIT
[license-badge-url]: https://img.shields.io/npm/l/angular2-markdown.svg
[npm-url]: https://www.npmjs.com/package/angular2-markdown
[npm-badge-url]: https://img.shields.io/npm/v/angular2-markdown.svg?style=flat
[circleci-url]: https://circleci.com/gh/dimpu/angular2-markdown/master
[circleci-badge-url]: https://circleci.com/gh/dimpu/angular2-markdown/tree/master.svg?style=shield&
[demo-url]: https://github.com/dimpu/angular2-markdown
[dep-url]: https://david-dm.org/dimpu/angular2-markdown
[dep-badge-url]: https://david-dm.org/dimpu/angular2-markdown/status.svg