{"id":13497419,"url":"https://github.com/dimpu/ngx-md","last_synced_at":"2025-11-12T21:30:34.886Z","repository":{"id":9358103,"uuid":"61858393","full_name":"dimpu/ngx-md","owner":"dimpu","description":"Angular(ngx) directive for parsing markdown content in your web application.","archived":false,"fork":false,"pushed_at":"2025-01-28T19:19:43.000Z","size":32709,"stargazers_count":265,"open_issues_count":35,"forks_count":81,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-08T18:45:09.935Z","etag":null,"topics":["angular-module","markdown","marked","ng","ng2","prismjs"],"latest_commit_sha":null,"homepage":"https://dimpu.github.io/ngx-md/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimpu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-24T05:11:04.000Z","updated_at":"2025-03-12T12:04:24.000Z","dependencies_parsed_at":"2024-11-07T21:21:30.226Z","dependency_job_id":"353cb42a-c95b-4bae-99b6-10f028ea6958","html_url":"https://github.com/dimpu/ngx-md","commit_stats":{"total_commits":192,"total_committers":31,"mean_commits":6.193548387096774,"dds":0.640625,"last_synced_commit":"ab88f043098a9a8b70791e8f0438211a85d0cfef"},"previous_names":["dimpu/angular2-markdown"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimpu%2Fngx-md","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimpu%2Fngx-md/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimpu%2Fngx-md/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimpu%2Fngx-md/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimpu","download_url":"https://codeload.github.com/dimpu/ngx-md/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264770,"owners_count":22041794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-module","markdown","marked","ng","ng2","prismjs"],"created_at":"2024-07-31T20:00:30.671Z","updated_at":"2025-11-12T21:30:34.840Z","avatar_url":"https://github.com/dimpu.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Third Party Components","UI Components"],"sub_categories":["Uncategorized","Markdown"],"readme":"# Angular Markdown (NgxMd)\n[![Build Status][cirrus-ci-badge]][cirrus-ci-badge-url]\n[![npm][circleci-badge-url]][circleci-url]\n[![version][npm-badge-url]][npm-url]\n[![npm][license-badge-url]][license-url]\n[![npm][opencollective]][opencollective]\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdimpu%2Fngx-md.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdimpu%2Fngx-md?ref=badge_shield)\n\nSupports Angular2,4,5,6,7,12,18\n\nSource @ [https://github.com/dimpu/ngx-md](https://github.com/dimpu/ngx-md)\n\n\n## Table of contents\n1. [Getting Started](#getting-started)\n2. [Installation instructions](#installation-instructions)\n3. [Usage \u0026 Demo](#usage--demo)\n4. [Contributing](#contribution)\n5. [License](#license)\n\n# Getting Started\n\nngx-md contains NgxMdModule for Angular.\n\nAdditionally we use [marked.js](https://github.com/chjj/marked/) and [prismjs](http://prismjs.com/) for this component.\n\n# Installation instructions\n\nInstall `ngx-md` from `npm`:\n\n```bash\nnpm install ngx-md --save\n```\nor using `yarn`:\n\n```bash\nyarn add ngx-md\n```\n\n## How to use it with:\n\n- `angular-cli` — please refer to [Getting started with `angular-cli`](https://github.com/dimpu/ngx-md/tree/master/docs/getting-started/ng-cli.md)\n- `angular-seed` — please refer to [Getting started with `angular-seed`](https://github.com/dimpu/ngx-md/tree/master/docs/getting-started/angular-seed.md)\n- `system.js` (and [Angular 2 QuickStart](https://angular.io/docs/ts/latest/quickstart.html)) — please checkout [sample repository](https://github.com/dimpu/angular2-quickstart)\n- `webpack` — you can view our demo page [source code](https://github.com/dimpu/ngx-md/tree/master/demo)\n- `stackblitz` — sample available [here](https://stackblitz.com/edit/ngx-md-exmaple)\n- `AoT` using `ngc` and `rollup` — please refer to [How to use `ngx-md` in Angular 2 with `AoT` compilation using `ngc` and `rollup`](https://github.com/dimpu/ngx-md/tree/master/docs/getting-started/aot.md)\n\n# Usage \u0026 Demo\n\nMain source of API documentation and usage scenarios is available at [https://dimpu.github.io/ngx-md/](https://dimpu.github.io/ngx-md/).\n\n# Contribution\n\nIs 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!\n\n## Quick Guide\n\n### app.module.ts\n\nThis library has dependency on **HttpClientModule**. It should be always provided in your application.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { NgxMdModule } from 'ngx-md';\nimport { HttpClientModule } from '@angular/common'\nimport { AppComponent } from '../src/app.component';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    HttpClientModule,\n    NgxMdModule.forRoot(),\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n})\n```\n\n### index.html\nIf you want syntax highlighting you need to import the prism css file.\n\nAlternative 1: Import from cdn\n```html\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cbase href=\"/\"\u003e\n\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\"\u003e\n    \u003clink href=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n```\n\nAlternative 2: Download the css file (or copy it from `node_modules/prismjs/themes/`, place it somewhere in your src folder and import\n```html\n\u003clink href=\"/css/prism.min.css\" rel=\"stylesheet\" /\u003e\n```\n\nAlternative 3: Include the prism css file in your sass style file\n```css\n@import 'prismjs/themes/prism.css';\n```\n\nTo support sytnax helight for other langugage you need to include\n```ts\n// import 'prismjs/prism';\nimport 'prismjs/components/prism-c';\nimport 'prismjs/components/prism-cpp';\nimport 'prismjs/components/prism-csharp';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-diff';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/components/prism-perl';\n...\n...\n...\n```\n\n### app.component.html\n\n```html\n\u003cdiv Markdown\u003e\n    ### your markdown code\n\u003c/div\u003e\n\n\u003c!-- or use angular component --\u003e\n\n\u003cngx-md\u003e\n    ### your markdown code\n\u003c/ngx-md\u003e\n\n\u003c!-- to load from remote URL --\u003e\n\n\u003cdiv NgxMd [path]=\"'/path/to/readme.md'\" (error)=\"errorHandler($event)\" (loaded)=\"loadedHandler($event)\" (rendered)=\"renderedHandler($event)\"\u003e\u003c/div\u003e\n\n\u003c!-- load remote source code with auto syntax highlighting --\u003e\n\n\u003cngx-md [path]=\"'/path/to/code.cpp'\"\u003e\u003c/ngx-md\u003e\n\n\u003cngx-md [path]=\"'/path/to/code.java'\"\u003e\u003c/ngx-md\u003e\n\n\u003c!-- load remote source code from url stored in variable\n(see additional details about variable binding in the next section) --\u003e\n\n\u003cngx-md [path]=\"urlVariable\"\u003e\u003c/ngx-md\u003e\n\n\u003cngx-md [path]=\"urlVariable\" (loaded)=\"onLoad($event)\" (error)=\"onError($event)\"\u003e\u003c/ngx-md\u003e\n\n```\n\n## Variable binding\n\nNow, with \u003e1.4.x you can bind a variable to the `markdown` component. To do so:\n\n```typescript\n@Component({\n    selector: 'app-root',\n    template: `\n    \u003ctextarea [(ngModel)]=\"textData\"\u003e\u003c/textarea\u003e\n    \u003cngx-md [data]=\"textData\"\u003e\u003c/ngx-md\u003e\n    `,\n})\nexport class MyComp {\n  public textData = `## Markdown content data`;\n}\n```\n\n## Marked customization\n\nMarked can be customized/extended by accessing the renderer from the MarkdownService:\n\n```typescript\nimport { NgxMdService } from 'ngx-md';\n@Component({\n    selector='my-comp',\n    template: `\n    \u003cngx-md\u003e\n     \u003e Block\n     \u003e quote\n     \u003e here\n    \u003c/ngx-md\u003e\n    `,\n})\nexport class MyComp {\n  constructor(private _markdown: NgxMdService) {}\n\n  ngOnInit() {\n    this._markdown.renderer.blockquote = (quote: string) =\u003e {\n      return `\u003cblockquote class=\"king-quote\"\u003e${quote}\u003c/blockquote\u003e`;\n    }\n  }\n```\n\nSee [marked documentation](https://github.com/chjj/marked) for all renderer extension points.\n\n## Example\n\nYou can find a working example inside the `demo` directory.\n\nTo serve it locally, run:\n\n```bash\ngit clone https://github.com/dimpu/ngx-md.git\n\nnpm i\n\nnpm run demo.serve\n```\n\n## Todo\n\n- [x] Variable binding\n- [x] Code refactor\n- [x] Write more unit tests\n- [x] Angular 5,6,7 support\n- [ ] Angular schemantics support\n- [ ] Module configuration for markdown settings\n- [ ] Module configuration for prismjs settings\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fdimpu%2Fngx-md.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fdimpu%2Fngx-md?ref=badge_large)\n\n\n[cirrus-ci-badge]: https://api.cirrus-ci.com/github/dimpu/ngx-md.svg?branch=master\n[cirrus-ci-badge-url]: https://api.cirrus-ci.com/github/dimpu/ngx-md\n\n[license-url]: https://opensource.org/licenses/MIT\n[license-badge-url]: https://img.shields.io/npm/l/ngx-md.svg\n[npm-url]: https://www.npmjs.com/package/ngx-md\n[npm-badge-url]: https://img.shields.io/npm/v/ngx-md.svg?style=flat\n[circleci-url]: https://circleci.com/gh/dimpu/ngx-md/master\n[circleci-badge-url]: https://circleci.com/gh/dimpu/ngx-md/tree/master.svg?style=shield\u0026\n[demo-url]: https://github.com/dimpu/ngx-md\n[dep-url]: https://david-dm.org/dimpu/ngx-md\n[dep-badge-url]: https://david-dm.org/dimpu/ngx-md/status.svg\n[opencollective]: https://opencollective.com/ngx-md/tiers/backer/badge.svg?label=backer\u0026color=brightgreen\n\n\n## License\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdimpu%2Fngx-md.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdimpu%2Fngx-md?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimpu%2Fngx-md","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimpu%2Fngx-md","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimpu%2Fngx-md/lists"}