[![Build Status][cirrus-ci-badge]][cirrus-ci-badge-url] [![npm][circleci-badge-url]][circleci-url] [![version][npm-badge-url]][npm-url] [![npm][license-badge-url]][license-url] [![npm][opencollective]][opencollective] [
Supports Angular2,4,5,6,7,12,18
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 --save
or using yarn:
yarn add ngx-md
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 codestackblitz — sample available hereAoT using ngc and rollup — please refer to How to use ngx-md in Angular 2 with AoT compilation using ngc and rollupMain 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!
This library has dependency on HttpClientModule. It should be always provided in your application.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxMdModule } from 'ngx-md';
import { HttpClientModule } from '@angular/common'
import { AppComponent } from '../src/app.component';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
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'" (error)="errorHandler($event)" (loaded)="loadedHandler($event)" (rendered)="renderedHandler($event)"></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>
<ngx-md [path]="urlVariable" (loaded)="onLoad($event)" (error)="onError($event)"></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 { NgxMdService } from 'ngx-md';
@Component({
selector='my-comp',
template: `
<ngx-md>
> Block
> quote
> here
</ngx-md>
`,
})
export class MyComp {
constructor(private _markdown: NgxMdService) {}
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
FAQs
[![Build Status][cirrus-ci-badge]][cirrus-ci-badge-url] [![npm][circleci-badge-url]][circleci-url] [![version][npm-badge-url]][npm-url] [![npm][license-badge-url]][license-url] [![npm][opencollective]][opencollective] [
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.