Gathering detailed insights and metrics for @dsoko2/angular2-markdown
Gathering detailed insights and metrics for @dsoko2/angular2-markdown
Gathering detailed insights and metrics for @dsoko2/angular2-markdown
Gathering detailed insights and metrics for @dsoko2/angular2-markdown
Angular 2 directive for parsing markdown content in your web application.
npm install @dsoko2/angular2-markdown
Typescript
Module System
Node Version
NPM Version
TypeScript (84.57%)
JavaScript (13.43%)
HTML (1.61%)
CSS (0.4%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
38 Commits
1 Watchers
3 Branches
1 Contributors
Updated on Aug 08, 2017
Latest Version
1.6.0
Package Id
@dsoko2/angular2-markdown@1.6.0
Size
74.66 kB
NPM Version
4.0.1
Node Version
6.9.1
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
3
This is only a fork of the angular2-markdown project, which solves a breaking issue regarding the usage with ES modules. Since this fix breaks at least the module system used by the test suite, this fix might not be a general solution for everyone. If you should not face the issue, it is highly recommended to use the original angular2-markdown in your project. However, as long as the problem is not fixed, I am going to keep this fork close to the main project and deprecate it after the issue was solved in angular2-markdown itself.
Cheers, Daniel
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
:
1npm install angular2-markdown --save
or using yarn
:
1yarn add angular2-markdown
angular-cli
— please refer to Getting started with angular-cli
angular-seed
— please refer to Getting started with angular-seed
system.js
(and Angular 2 QuickStart) — please checkout sample repositorywebpack
— you can view our demo page source codeplnkr
— sample available hereAoT
using ngc
and rollup
— please refer to How to use angular2-markdown
in Angular 2 with AoT
compilation using ngc
and rollup
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!
1import { NgModule } from '@angular/core'; 2import { BrowserModule } from '@angular/platform-browser'; 3 4import { MarkdownModule } from 'angular2-markdown'; 5import { AppComponent } from '../src/app.component'; 6 7@NgModule({ 8 imports: [ 9 BrowserModule, 10 MarkdownModule.forRoot(), 11 ], 12 declarations: [AppComponent], 13 bootstrap: [AppComponent], 14})
If you want syntax highlighting you need to import the prism css file.
Alternative 1: Import from cdn
1<head> 2 <meta charset="utf-8"> 3 <base href="/"> 4 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="icon" type="image/x-icon" href="favicon.ico"> 7 <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" rel="stylesheet" /> 8 </head>
Alternative 2: Download the css file (or copy it from node_modules/prismjs/themes/
, place it somewhere in your src folder and import
1<link href="/css/prism.min.css" rel="stylesheet" />
Alternative 3: Include the prism css file in your sass style file
1@import 'prismjs/themes/prism.css';
1<div Markdown> 2 ### your markdown code 3</div> 4 5<!-- or use angular component --> 6 7<markdown> 8 ### your markdown code 9</markdown> 10 11<!-- to load from remote URL --> 12 13<div Markdown path="/path/to/readme.md"></div> 14 15<!-- load remote source code with auto syntax highlighting --> 16 17<markdown path="/path/to/code.cpp"></markdown> 18 19<markdown path="/path/to/code.java"></markdown> 20 21<!-- load remote source code from url stored in variable 22(see additional details about variable binding in the next section) --> 23 24<markdown [path]="urlVariable"></markdown>
Now, with >1.4.x you can bind a variable to the markdown
component. To do so:
1@Component({ 2 selector: 'markdown,[Markdown]', 3 template: ` 4 <textarea [(ngModel)]="textData"></textarea> 5 <markdown [data]="textData"></markdown> 6 `, 7}) 8export class MyComp { 9 public textData = `## Markdown content data`; 10}
Marked can be customized/extended by accessing the renderer from the MarkdownService:
1import { MarkdownService } from 'angular2-markdown'; 2@Component({ 3 selector='my-comp', 4 template: ` 5 <markdown> 6 > Block 7 > quote 8 > here 9 </markdown> 10 `, 11}) 12export class MyComp { 13 constructor(private _markdown: MarkdownService) {} 14 15 ngOnInit() { 16 this._markdown.renderer.blockquote = (quote: string) => { 17 return `<blockquote class="king-quote">${quote}</blockquote>`; 18 } 19 }
See marked documentation for all renderer extension points.
You can find a working example inside the demo
directory.
To serve it locally, run:
1git clone https://github.com/dimpu/angular2-markdown.git 2 3npm i 4 5npm run demo.serve
The following is a list of all the people that have helped build this project. Thanks for your contributions!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
no SAST tool detected
Details
Reason
license file not detected
Details
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
project is not fuzzed
Details
Reason
195 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More