{"_id":"@amplifiqueme/ngx-showdown","_rev":"1-dd2cc3af248e614788f448163eca7b04","name":"@amplifiqueme/ngx-showdown","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.0-semantically-released":{"name":"@amplifiqueme/ngx-showdown","version":"0.0.0-semantically-released","description":"A Angular (>=2) integration for Showdown","keywords":["ng","ng2","ngx","angular","angular2","markdown","md","showdown","convert","converter","parse","parser"],"license":"MIT","author":{"name":"Robson Jean Penteado","email":"robson@amplifique.me","url":"https://github.com/Amplifique-me/"},"homepage":"https://github.com/Amplifique-me/ngx-showdown","repository":{"type":"git","url":"git+https://github.com/Amplifique-me/ngx-showdown.git"},"scripts":{"build":"run-s build:*","build:lib":"ng build lib","build:demo":"ng build demo","start:demo":"ng serve demo","build:docs":"compodoc","coverage":"codecov --file=coverage/coverage-final.json","clean":"rimraf dist coverage","commit":"git-cz","demo":"ng serve demo --watch --open","deploy":"gh-pages --dist dist/page --repo https://$GH_TOKEN@github.com/yisraelx/ngx-showdown.git --message \"chore: update\" --silent","docs":"compodoc --serve --watch --open","lint":"run-s lint:*","lint:demo":"ng lint demo","lint:lib":"ng lint lib","predeploy":"yarn build:demo --configuration production && yarn build:docs","prerelease":"yarn build:lib","verify":"run-s clean lint test:shell","release":"semantic-release","start":"yarn demo","test":"ng test","test:shell":"yarn test --browsers=ChromeHeadless"},"engines":{"node":">=10.18"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release":{"branches":"master","pkgRoot":"dist/lib"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"config":{"commitizen":{"path":"@commitlint/prompt"}},"peerDependencies":{"@types/showdown":"^1.9.3","showdown":"^1.9.1"},"devDependencies":{"@angular-devkit/build-angular":"^16.0.1","@angular/animations":"^16.0.1","@angular/cdk":"^15.2.8","@angular/cli":"^16.0.1","@angular/common":"^16.0.1","@angular/compiler":"^16.0.1","@angular/compiler-cli":"^16.0.1","@angular/core":"^16.0.1","@angular/forms":"^16.0.1","@angular/language-service":"^16.0.1","@angular/material":"^15.2.9","@angular/platform-browser":"^16.0.1","@angular/platform-browser-dynamic":"^16.0.1","@angular/router":"^16.0.1","@commitlint/cli":"^9.1.2","@commitlint/config-conventional":"^9.1.2","@commitlint/prompt":"^9.1.2","@compodoc/compodoc":"1.1.8","@types/jasmine":"~3.6.0","@types/jasminewd2":"^2.0.8","@types/node":"^12.12.54","@types/showdown":"^1.9.3","codecov":"^3.7.2","codelyzer":"^6.0.0","commitizen":"^4.1.2","gh-pages":"^3.1.0","husky":"^4.2.5","jasmine-core":"~3.6.0","jasmine-spec-reporter":"~5.0.0","karma":"~6.4.2","karma-chrome-launcher":"~3.1.0","karma-coverage-istanbul-reporter":"~3.0.3","karma-jasmine":"~4.0.0","karma-jasmine-html-reporter":"^1.5.0","ng-packagr":"^16.0.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","rxjs":"^6.5.4","semantic-release":"^17.1.1","showdown":"^1.9.1","showdown-highlight":"2.1.5","ts-node":"^8.10.2","tslint":"~6.1.3","typescript":"~4.9.5","yarn":"^1.22.4","zone.js":"~0.13.0"},"dependencies":{"tslib":"^2.5.0"},"gitHead":"3679a9b860c96be4536d3a14250892dfd0f08054","bugs":{"url":"https://github.com/Amplifique-me/ngx-showdown/issues"},"_id":"@amplifiqueme/ngx-showdown@0.0.0-semantically-released","_nodeVersion":"18.16.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-ac0ep9gQaRXq1QXFr7EuAfSl8kCypIV+WvGHz6DKCFvrNejk24c3WpvE8x1WTLz74a6iF7E8RcCxNPjRy126Iw==","shasum":"4e0ef255cf2e42a18d87cfe1ddd551fea2ebbeea","tarball":"https://registry.npmjs.org/@amplifiqueme/ngx-showdown/-/ngx-showdown-0.0.0-semantically-released.tgz","fileCount":52,"unpackedSize":132179,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWtftsgL1m8h80mtpFEDJQmUnYQ8eYRB6yJGNXCgOVowIhANlbmESvcsovERp967RQYRfupLqvaeoX48e6EdUuPePn"}]},"_npmUser":{"name":"amplifiqueme","email":"robson@amplifique.me"},"directories":{},"maintainers":[{"name":"amplifiqueme","email":"robson@amplifique.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-showdown_0.0.0-semantically-released_1699558129091_0.9009380242294927"},"_hasShrinkwrap":false},"1.0.0":{"name":"@amplifiqueme/ngx-showdown","version":"1.0.0","description":"A Angular (>=2) integration for Showdown","keywords":["ng","ng2","ngx","angular","angular2","markdown","md","showdown","convert","converter","parse","parser"],"license":"MIT","author":{"name":"Robson Jean Penteado","email":"robson@amplifique.me","url":"https://github.com/Amplifique-me/"},"homepage":"https://github.com/Amplifique-me/ngx-showdown","repository":{"type":"git","url":"git+https://github.com/Amplifique-me/ngx-showdown.git"},"engines":{"node":">=10.18"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release":{"branches":"master","pkgRoot":"dist/lib"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"config":{"commitizen":{"path":"@commitlint/prompt"}},"peerDependencies":{"@types/showdown":"^1.9.3","showdown":"^1.9.1"},"dependencies":{"tslib":"^2.5.0"},"module":"fesm2022/amplifiqueme-ngx-showdown.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/amplifiqueme-ngx-showdown.mjs","esm":"./esm2022/amplifiqueme-ngx-showdown.mjs","default":"./fesm2022/amplifiqueme-ngx-showdown.mjs"}},"sideEffects":false,"gitHead":"9ca6d73a086049c0e25aadece2a3c9bbadbeb12e","bugs":{"url":"https://github.com/Amplifique-me/ngx-showdown/issues"},"_id":"@amplifiqueme/ngx-showdown@1.0.0","_nodeVersion":"18.16.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-Py4aASVr8qXY3lUzLHOWMLHlCh4vTFsyvIn7Xjgc1mwAnjIi8HKWnUZXslF63UFB902BBeYWjKMp/JEUJSJE9Q==","shasum":"daf1f017ddf8d21f1b746bcac5fb8adb26efc196","tarball":"https://registry.npmjs.org/@amplifiqueme/ngx-showdown/-/ngx-showdown-1.0.0.tgz","fileCount":20,"unpackedSize":135452,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB333h+z3w+iVV6n0sxyWCnE2/RqgNeqnX3f2JwCu6Z0AiAPgRSRh2KMkPirif1h690g3Cn0kuJAhDomyZCw22XaKw=="}]},"_npmUser":{"name":"amplifiqueme","email":"robson@amplifique.me"},"directories":{},"maintainers":[{"name":"amplifiqueme","email":"robson@amplifique.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-showdown_1.0.0_1699558752497_0.7803708376963174"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-09T19:28:48.987Z","0.0.0-semantically-released":"2023-11-09T19:28:49.304Z","modified":"2023-11-09T19:39:12.884Z","1.0.0":"2023-11-09T19:39:12.683Z"},"maintainers":[{"name":"amplifiqueme","email":"robson@amplifique.me"}],"description":"A Angular (>=2) integration for Showdown","homepage":"https://github.com/Amplifique-me/ngx-showdown","keywords":["ng","ng2","ngx","angular","angular2","markdown","md","showdown","convert","converter","parse","parser"],"repository":{"type":"git","url":"git+https://github.com/Amplifique-me/ngx-showdown.git"},"author":{"name":"Robson Jean Penteado","email":"robson@amplifique.me","url":"https://github.com/Amplifique-me/"},"bugs":{"url":"https://github.com/Amplifique-me/ngx-showdown/issues"},"license":"MIT","readme":"<p align=\"center\">\n  <img height=\"200px\" width=\"200px\" src=\"https://github.com/yisraelx/ngx-showdown/raw/master/demo/src/assets/logo.png\" alt=\"ngx-showdown\">\n  <h1 align=\"center\">Angular Showdown</h1>\n</p>\n\n[![Travis build](https://travis-ci.org/yisraelx/ngx-showdown.svg?branch=master)](https://travis-ci.org/yisraelx/ngx-showdown)\n[![Codecov coverage](https://codecov.io/github/yisraelx/ngx-showdown/coverage.svg?branch=master)](https://codecov.io/github/yisraelx/ngx-showdown)\n[![Version](https://img.shields.io/npm/v/ngx-showdown.svg)](https://www.npmjs.com/package/ngx-showdown)\n[![MIT License](https://img.shields.io/npm/l/ngx-showdown.svg)](https://github.com/yisraelx/ngx-showdown/blob/master/LICENSE)\n[![Documentation](https://img.shields.io/badge/%F0%9F%93%9A-documentation-informational.svg)](https://yisraelx.github.io/ngx-showdown/docs/index.html)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/ngx-showdown.svg?color=green)](https://bundlephobia.com/result?p=ngx-showdown)\n[![TypeScript](https://img.shields.io/badge/100%25-TypeScript-blue.svg)](https://www.typescriptlang.org)\n[![Semantic release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n**ngx-showdown is an [Angular](https://angular.io) (>=2) integration for [Showdown](https://github.com/showdownjs/showdown), A `Markdown` to `HTML` converter.**\n___\n\n## Demo\n* Demo app in [source code](https://github.com/yisraelx/ngx-showdown/blob/master/demo) ([live](http://yisraelx.github.io/ngx-showdown)).\n* You can play with it in [Stackblitz](https://stackblitz.com/edit/ngx-showdown) and [Plunker](https://plnkr.co/edit/0j8d9w).\n\n## Install\n```bash\n$ npm install ngx-showdown --save\n```\nand install peer dependencies (`@angular/common/http` for `SourceDirective`)\n```bash\n$ npm install showdown @angular/common @angular/platform-browser --save\n```\nand install type package of `Showdown` for `TypeScript` \n```bash\n$ npm install @types/showdown --save-dev\n```\n\n\n## Usage\n*For more information and explanations, see the [full documentation](https://yisraelx.github.io/ngx-showdown/docs/index.html).*\n\n### Setup `ShowdownModule` in your app.\nAdd `ShowdownModule` to `imports` of App.\n```typescript\nimport { NgModule } from '@angular/core';\nimport { ShowdownModule } from 'ngx-showdown';\n\n@NgModule({\n  imports: [ ShowdownModule ]\n})\nexport class AppModule {}\n```\nOr with config (it will init `ShowdownConfig` provider)\n```typescript\nimport { NgModule } from '@angular/core';\nimport { ShowdownModule } from 'ngx-showdown';\n\n@NgModule({\n  imports: [ ShowdownModule.forRoot({emoji: true, noHeaderId: true, flavor: 'github'}) ]\n})\nexport class AppModule {}\n```\n\nAdd `showdown` to [`allowedCommonJsDependencies`](https://angular.io/guide/build#configuring-commonjs-dependencies) in the build config of the `angular.json` file (From angular >= 10).\n```json\n\"build\": {\n  \"builder\": \"@angular-devkit/build-angular:browser\",\n  \"options\": {\n     \"allowedCommonJsDependencies\": [\n        \"showdown\"\n     ]\n     ...\n   }\n   ...\n},\n\n```\n### Use `ShowdownComponent` in the template\n#### Binding to `[value]` property\nBind markdown value to `value` property of showdown component.\n```html\n<input type=\"text\" [(ngModel)]=\"text\"/>\n<showdown [value]=\"text\"></showdown>\n```\n\nBind value and options.\n```typescript\nimport { Component } from '@angular/core';\nimport * as Showdown from 'showdown';\n\n@Component({\n  selector: 'some',\n  template: '<showdown [value]=\"text\" [options]=\"options\"></showdown>'\n})\nexport class SomeComponent {\n  text: string = `\n# h1\n## h2\n`;\n  options: Showdown.ShowdownOptions = {...};\n  // ...\n}\n```\n\nAs directive on anther element \n```html\n<div showdown=\"# Static\" noHeaderId></div>\n```\n\n#### Markdown in component content\nA markdown value in the component content.  \n```html\n<showdown>\n# H1\n## H2\n</showdown>\n```\n\nWith options\n```html\n<showdown [options]=\"{smartIndentationFix: true}\">\n    * a\n    * b\n    * c\n</showdown>\n```\n\nAs directive on anther element \n```html\n<span showdown emoji>:showdown:**howdown**</span>\n```\n\n#### Load .md content (by `SourceDirective`)\nLoad markdown content of url source.\n```html\n<showdown src=\"README.md\"></showdown>\n```\n\nBind input url to `src` directive.\n```html\n<input type=\"text\" placeholder=\"Url\" [(ngModel)]=\"url\"/>\n<showdown #sd [src]=\"url\" (error)=\"sd.render('**Not found..**')\">**No Url..**</showdown>\n```\n*Note: Loading markdown content requires [`HttpClient`](https://angular.io/api/common/http/HttpClient) of [`@angular/common/http`](https://angular.io/api/common/http)*\n\n#### Mixing sources\nWhen both `Content` and `[value]`, It will render `[value]`.\n```html\n<showdown value=\"# Value\"># Content</showdown>\n```\n\nWhen both `Content` and `[src]`, It will render `Content` and when `src` loads then results will be `src` content. \n```html\n<showdown src=\"README.md\"># Content</showdown>\n```\n\nWhen both `[value]` and `[src]`, It will render `[value]` and when `src` loads then results will be `src` content. \n```html\n<showdown value=\"# Value\" src=\"README.md\"></showdown>\n```\n\n#### Binding options\nBind options object (it init root `ShowdownConfig` and then set the bind `options`)\n```typescript\nimport { Component } from '@angular/core';\nimport * as Showdown from 'showdown';\n\n@Component({\n  selector: `some`,\n  template: `<showdown [value]=\"text\" [options]=\"options\"></showdown>`\n})\nexport class SomeComponent {\n  text: string = '# Some';\n  options: Showdown.ShowdownOptions = {noHeaderId: true};\n  // ...\n}\n```\nOr\n```html\n<showdown [options]=\"{noHeaderId: true}\"># abc</showdown>\n```\nBind single option (it have input properties for all showdown options).\n```html\n<showdown noHeaderId [headerLevelStart]=\"2\" [tables]=\"options.tables\"># abc</showdown>\n```\n\n#### Sanitize the convert html output\nSanitize the convert html output by [`DomSanitizer`](https://angular.io/api/platform-browser/DomSanitizer#sanitize).\n```html\n<showdown sanitize>\n# Some\n<a href=\"javascript:alert('Hello!')\">Click</a>\n__Foo__\n</showdown>\n```\nAlso sanitize content of `src` url.\n```html\n<showdown [value]=\"# Loading..\" src=\"README.md\" sanitize=\"true\"></showdown>\n```\n\n### Use `ShowdownPipe` in the template\nTransform markdown value of `text` property to html. \n```html\n{{ text | showdown }}\n```\n\nTransform value with options (it init root `ShowdownConfig` and then set the pipe `options`)\n```typescript\nimport { Component } from '@angular/core';\nimport * as Showdown from 'showdown';\n\n@Component({\n  selector: 'some',\n  template: '{{ text | showdown:options }}'\n})\nexport class SomeComponent {\n  text: string = `\n      # h1\n      ## h2\n  `;\n  options: Showdown.ShowdownOptions = {smartIndentationFix: true};\n  // ...\n}\n```\n\n### Use `ShowdownConverter` service\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { ShowdownConverter } from 'ngx-showdown';\n\n@Injectable()\nexport class SomeService {\n  constructor(showdownConverter: ShowdownConverter){\n    console.log(showdownConverter.makeHtml('# Showdown'));\n  }\n}\n```\n\n### Set config provider (`ShowdownConfig`)\nSet root config that will be injected to [ShowdownComponent](#ShowdownComponent), [ShowdownPipe](#ShowdownPipe), [ShowdownConverter](#ShowdownConverter) when they are created.\n```typescript\nimport { NgModel } from '@angular/core';\nimport { ShowdownModule, ShowdownConverter } from 'ngx-showdown';\nimport * as Showdown from 'showdown';\n\nlet colorExtension: Showdown.FilterExtension = {\n  type: 'output',\n  filter(text: string, converter: ShowdownConverter){\n    return text.replace('$color', converter.getOption('color') || 'green')\n  }\n};\n\n@NgModel({\n  imports:[\n    ShowdownModule.forRoot({\n      flavor: 'original',\n      emoji: true,\n      color: 'red',\n      extensions: [ colorExtension ]\n    })\n  ]\n})\nexport class AppModule {}\n```\n\nOverride the root config provider value.\n```typescript\nimport { Component } from '@angular/core';\nimport { ShowdownConfig } from 'ngx-showdown';\n\n@Component({\n  selector: 'some',\n  template: '<showdown># Header</showdown>',\n  providers: [ {provide: ShowdownConfig, useValue: {underline: true, emoji: false}} ]\n})\nexport class SomeComponent {}\n```\n\nSet the config manually by the converter methods.\n```typescript\nimport { Component } from '@angular/core';\nimport { ShowdownComponent } from 'ngx-showdown';\nimport highlightExtension from 'showdown-highlight';\nimport 'highlight.js/styles/default.css';\n\n@Component({\n  selector: 'some',\n  template: '<showdown># Header</showdown>'\n})\nexport class SomeComponent {\n  constructor(showdownComponent: ShowdownComponent) {\n    showdownComponent.addExtension(highlightExtension);\n    showdownComponent.setFlavor('ghost');\n    showdownComponent.setOptions({emoji: true});\n  }\n}\n```\n\n#### Flavor\nSet root flavor ([Showdown flavors](https://github.com/showdownjs/showdown/blob/master/README.md#flavors)).\n```typescript\nimport { NgModel } from '@angular/core';\nimport { ShowdownModule } from 'ngx-showdown';\n\n@NgModel({\n  imports:[\n    ShowdownModule.forRoot({flavor: 'github'})\n  ]\n})\nexport class AppModule {}\n```\n*Note: If `flavor` is not set then the default value is 'vanilla' flavor.*\n\n#### ConverterOptions\nSet root ConverterOptions ([Showdown options](https://github.com/showdownjs/showdown/blob/master/README.md#valid-options)).\n```typescript\nimport { NgModel } from '@angular/core';\nimport { ShowdownModule } from 'ngx-showdown';\n\n@NgModel({\n  imports:[\n    ShowdownModule.forRoot({underline: true, emoji: false})\n  ]\n})\nexport class AppModule {}\n```\n\n#### Extensions\nSet root Extensions ([Showdown extensions](https://github.com/showdownjs/showdown#extensions)).\nWith extension can be made changes to the `Markdown` input ('lang') and the `Html` output also listen to parse event, you can [make extension](https://github.com/showdownjs/showdown/wiki/Extensions) or [search in npm](https://www.npmjs.com/search?q=keywords:showdown%20extension) for existing extension.\n```typescript\nimport { NgModel } from '@angular/core';\nimport { ShowdownModule } from 'ngx-showdown';\nimport * as Showdown from 'showdown';\nimport highlightExtension from 'showdown-highlight';\nimport 'highlight.js/styles/default.css';\n\nlet someExtension: Showdown.ShowdownExtension = {\n  type: 'lang',\n  regex: new RegExp('markdown', 'g'),\n  replace: 'showdown'\n};\n\n\n@NgModel({\n  imports: [ \n    ShowdownModule.forRoot({extensions: [ someExtension, highlightExtension ]}) \n  ]\n})\nexport class AppModule {}\n```\n\n## Troubleshoot\n#### Interpolation\nUsing unescaped `{}` (`<showdown>{}</showdown>`) in template causes an template parse error ([@angular/angular/#11859](https://github.com/angular/angular/issues/11859)), \nThe solution is to use escape chars (html char code etc.), \nAnther solution is to override the default [interpolation](https://angular.io/api/core/Component#interpolation).\n\n#### Whitespaces\nAngular aot compiler remove whitespaces by default, use [ngPreserveWhitespaces](https://angular.io/api/core/Component#preserving-whitespace) to preserve whitespaces. \n```html\n<showdown ngPreserveWhitespaces>\n* a\n  * 1\n  * 2\n* b\n</showdown>\n```\nWith `ngPreserveWhitespaces`\n```\n* a\n  * 1\n  * 2\n* b\n```\nWithout `ngPreserveWhitespaces`\n```\n* a * 1 * 2\n* b\n```\n\n#### Indentation\nShowdown converter [smartIndentationFix](https://github.com/showdownjs/showdown/wiki/Showdown-options#smartindentationfix) option can fix string indentation problems of es6 template and html. \n```typescript\ntext = `\n  # A\n  ## B\n`;\n```\n```html\n<showdown [value]=\"text\" smartIndentationFix></showdown>\n```\nWith `smartIndentationFix`\n```\n# A\n## B\n```\nWithout `smartIndentationFix`\n```\n  # A\n  ## B\n```\n\n## Contribute\n**Pull requests are welcome!**\n\n## Development\nThis project built with [`Angular Cli`](https://angular.io/cli).\n\nInstall dependencies\n```bash\n$ yarn install\n```\nRun test\n```bash\n$ yarn test\n```\nBuild for release\n```bash\n$ yarn build\n```\n\n## Credits\nThis project use [Showdown library](https://github.com/showdownjs/showdown) to convert `Markdown` to `Html`.\n\n## License\nCopyright © [Yisrael Eliav](https://github.com/yisraelx),\nLicensed under the [MIT license](https://github.com/yisraelx/ngx-showdown/blob/master/LICENSE).\n","readmeFilename":"README.md"}