Build Status npm version npm npm
Source @ https://github.com/dimpu/angular2-markdown
angular2-markdown contains MarkdownModule for Angular 2.
Additionally we use marked.js and prismjs for this component.
Install angular2-markdown from npm:
npm install angular2-markdown --save
or using yarn:
yarn add angular2-markdown
angular-cli— please refer to Getting started withangular-cliangular-seed— please refer to Getting started withangular-seedsystem.js(and Angular 2 QuickStart) — please checkout sample repositorywebpack— you can view our demo page source codeplnkr— sample available hereAoTusingngcandrollup— please refer to How to useangular2-markdownin Angular 2 withAoTcompilation usingngcandrollup
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!
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], })
If you want syntax highlighting you need to import the prism css file.
Alternative 1: Import from cdn
<head> <meta charset="utf-8"> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" rel="stylesheet" /> </head>
Alternative 2: Download the css file (or copy it from node_modules/prismjs/themes/, place it somewhere in your src folder and import
<link href="/css/prism.min.css" rel="stylesheet" />
Alternative 3: Include the prism css file in your sass style file
@import 'prismjs/themes/prism.css';
<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 syntax highlighting --> <markdown path="/path/to/code.cpp"></markdown> <markdown path="/path/to/code.java"></markdown> <!-- load remote source code from url stored in variable (see additional details about variable binding in the next section) --> <markdown [path]="urlVariable"></markdown>
Now, with >1.4.x you can bind a variable to the 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`; }
Marked can be customized/extended by accessing the renderer from the MarkdownService:
import { MarkdownService } from 'angular2-markdown'; @Component({ selector='my-comp', template: ` <markdown> > Block > quote > here </markdown> `, }) export class MyComp { constructor(private _markdown: MarkdownService) {} ngOnInit() { this._markdown.renderer.blockquote = (quote: string) => { return `<blockquote class="king-quote">${quote}</blockquote>`; } }
See marked documentation for all renderer extension points.
You can find a working example inside the demo directory.
To serve it locally, run:
git clone https://github.com/dimpu/angular2-markdown.git npm i npm run demo.serve
- Variable binding
- Code refactor
- Write more unit tests
- 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!