Supports Angular2,4,5,6
Source @ https://github.com/dimpu/ngx-md
ngx-md contains NgxMdModule 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 codestackblitz— 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 { NgxMdModule } from 'ngx-md';
import { AppComponent } from '../src/app.component';
@NgModule({
imports: [
BrowserModule,
NgxMdModule.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';To support sytnax helight for other langugage you need to include
// import 'prismjs/prism';
import 'prismjs/components/prism-c';
import 'prismjs/components/prism-cpp';
import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-perl';
...
...
...<div Markdown>
### your markdown code
</div>
<!-- or use angular component -->
<ngx-md>
### your markdown code
</ngx-md>
<!-- to load from remote URL -->
<div NgxMd [path]="'/path/to/readme.md'"></div>
<!-- load remote source code with auto syntax highlighting -->
<ngx-md [path]="'/path/to/code.cpp'"></ngx-md>
<ngx-md [path]="'/path/to/code.java'"></ngx-md>
<!-- load remote source code from url stored in variable
(see additional details about variable binding in the next section) -->
<ngx-md [path]="urlVariable"></ngx-md>Now, with >1.4.x you can bind a variable to the markdown component. To do so:
@Component({
selector: 'app-root',
template: `
<textarea [(ngModel)]="textData"></textarea>
<ngx-md [data]="textData"></ngx-md>
`,
})
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: `
<ngx-md>
> Block
> quote
> here
</ngx-md>
`,
})
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!
