Source @ https://github.com/dimpu/ngx-md
ngx-md contains MarkdownModule for Angular.
Additionally we use marked.js and prismjs for this component.
Install ngx-md from npm:
npm install ngx-md --saveor using yarn:
yarn add ngx-mdangular-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 usengx-mdin Angular 2 withAoTcompilation usingngcandrollup
Main source of API documentation and usage scenarios is available at https://dimpu.github.io/ngx-md/.
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 'ngx-md';
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 'ngx-md';
@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/ngx-md.git
npm i
npm run demo.serve- Variable binding
- Code refactor
- Write more unit tests
- 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!
