<ng2-markdown>
A Markdown component for Angular2+ with fully themable syntax highlighting.
Markdown parsing is provided by Showdown. Syntax highlighing is provided by PrismJS
To see a working example checkout the ng2-markdown-demo project.
Now compatible with Angular 4+. Bundled to work Typescript, ES5, and ES6+ flavors of Angular.
Installation
Via JSPM
jspm install ng2-markdown=github:evanplaice/ng2-markdown
jspm install prismjs=npm:prismjs
jspm install showdown=npm:showdown
Via NPM
npm install ng2-markdown
Loading
1. Import the component
import { MarkdownComponent } from 'ng2-markdown';
Note: For a pre-minified bundle use ng2-markdown/dist/ng2-markdown.min
.
2. (Optional) load a PrismJs theme if syntax highlighting is enabled
import 'prismjs/themes/[theme].css'
Replace [theme]
with one of the following:
- prism.css (Default)
- prism-coy.css
- prism-dark.css
- prism-funky.css
- prism-okaidia.css
- prism-solarizedlight.css
- prism-tomorrow.css
- prism-twilight.css
Note: Loading css via ES6 imports requires a style loader and loaders are transpiler/bundler-specific. For webpack use the style!css!
prefix. For JSPM/System.js use the !css
postfix.
3. (Optional) Load support for additional languages
import 'prismjs/components/prism-[language].min';
Replace [language]
with the language you'd like to include. See Languages List for a full list of supported languages.
Note: HTML, CSS, Javascript, and C-like languages are included by default.
Usage
Load Markdown from a file with syntax highlighting
This method fires off an AJAX request to load markdown from a file on the server.
<ng2-markdown [src]='/path/to/file' [highlight]='true'></ng2-markdown>
Load Markdown from a Data variable
Load Markdown data from directly from a template binding
<ng2-markdown [data]='data' [highlight]='true'></ng2-markdown>
That's it... Yes, really.
Load a series of Markdown elements
Syntax highlighting is triggered globally for every ng2-markdown element where [highlight]='true'
. If it's desirable to load multiple ng2-markdown elements on a page, it's necessary to minimize the number of times a highlight event is triggered.
A easy workaround is to detect when the last ng2-markdown element is loaded and only set [highlight]='true'
on that element.
<div *ngFor="let article of articles; let isLast=last" [last]="isLast">
<ng2-markdown [src]="article.url" [highlight]="last"></ng2-markdown>
</div>
Dependencies
Roadmap
- Modify
[data]
and[src]
to update when the binding is modified.