{"id":24096458,"url":"https://github.com/ngx-prism/core","last_synced_at":"2025-05-07T14:03:09.799Z","repository":{"id":22840619,"uuid":"91479495","full_name":"ngx-prism/core","owner":"ngx-prism","description":"Simple Angular 2+ Prism highlighter module.","archived":false,"fork":false,"pushed_at":"2023-01-12T07:04:09.000Z","size":1632,"stargazers_count":12,"open_issues_count":35,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T14:02:45.505Z","etag":null,"topics":["angular","angular4","highlight","ng2","ngx","prism","prismjs","syntax"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@ngx-prism/core","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngx-prism.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-16T16:20:25.000Z","updated_at":"2022-10-24T23:53:45.000Z","dependencies_parsed_at":"2023-01-14T13:18:46.013Z","dependency_job_id":null,"html_url":"https://github.com/ngx-prism/core","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-prism%2Fcore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-prism%2Fcore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-prism%2Fcore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-prism%2Fcore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngx-prism","download_url":"https://codeload.github.com/ngx-prism/core/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252892501,"owners_count":21820648,"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","angular4","highlight","ng2","ngx","prism","prismjs","syntax"],"created_at":"2025-01-10T12:54:51.196Z","updated_at":"2025-05-07T14:03:09.708Z","avatar_url":"https://github.com/ngx-prism.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @ngx-prism/core\n\n[![npm version](https://badge.fury.io/js/%40ngx-prism%2Fcore.svg)](https://badge.fury.io/js/%40ngx-prism%2Fcore)\n[![GitHub version](https://badge.fury.io/gh/ngx-prism%2Fcore.svg)](https://badge.fury.io/gh/ngx-prism%2Fcore)\n[![Build Status](https://travis-ci.org/ngx-prism/core.svg?branch=master)](https://travis-ci.org/ngx-prism/core)\n[![Known Vulnerabilities](https://snyk.io/test/github/ngx-prism/core/badge.svg)](https://snyk.io/test/github/ngx-prism/core)\n\n[![GitHub issues](https://img.shields.io/github/issues/ngx-prism/core.svg)](https://github.com/ngx-prism/core/issues)\n[![GitHub forks](https://img.shields.io/github/forks/ngx-prism/core.svg)](https://github.com/ngx-prism/core/network)\n[![GitHub stars](https://img.shields.io/github/stars/ngx-prism/core.svg)](https://github.com/ngx-prism/core/stargazers)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ngx-prism/core/master/LICENSE)\n\nSimple Angular 4+ Prism highlighter module. [Click](https://github.com/ngx-prism/rxjs) to get package with rxjs on board.   \n**Next update will be available only on [@angular-package](https://github.com/angular-package/angular-package)** with name `@angular-package/prism/core`. \n\n* [Demonstration](#demonstration)\n* [Installation](#installation)\n* [Usage](#usage)\n* [Inputs](#inputs)\n* [Lifecycle Hooks](#lifecycle-hooks)\n* [Change detection](#change-detection)\n* [Scripts](#scripts)\n* [Git](#git)\n  * [Commit](#commit)\n  * [Versioning](#versioning)\n* [License](#license)\n* [Donate](#donate)\n\n---\n\n**Pros(+)**\n* **AOT** (Ahead Of Time Compilation) package: *faster rendering*, *fewer asynchronous requests*, *smaller Angular framework download size*, *detect template errors earlier*, *better security*.\n* **MIT** License: it can be used commercially.\n* Component `changeDetectionStrategy` is set to `OnPush`, It gives better overall __performance__. \n* **[New]** Change detector status is initially `Detached` and `detectChanges()` is used in every component property declared in its own property `__properties`. This is because of using [@angular-package/change-detection](https://github.com/angular-package/angular-package/tree/master/packages/change-detection). \n* **Setters** instead of **ngOnChanges()** method to detect changes.\n* Dynamically changes highlight string with `code` input property, and dynamically changes properties for change detection by setting them `true` or `false` with input `cd`.\n* It uses prismjs `highlightElement(element, async, callback)` to higlight, so `async` and `hooks` internal prism features can be used.\n* Interpolates string to highlight with `interpolation` object.\n* Performs highlight depending on whether property change detection is active or is not (by checking `cd` property).\n* Live `@angular/cli` usage demonstration and inside repository.\n* No known vulnerabilities found by **snyk.io**.\n\n**Cons(-)**\n* Hooks are defined globally.\n* You cannot use both `ng-content` and property `code` the same time.\n* Need to provide new instance of objects to get them changed.\n\n**Important!**\n* By default all properties are sensitive to detection.\n* Instead of using `ngOnChanges` angular cycle hook, now, it base only on **setters** and **getters**. \n* It is designed to use `ng-content` and property `code` separately. You should **NOT** use both the same time.\n* In `@angular/cli` add `--aot` to `ng serve` in scripts to have script `\"start\": \"ng serve --aot\"`.\n* Selector `prism-highlight` is changed to `ngx-prism`.\n\n---\n\n## Demonstration\n\n[Live demonstration](http://ngx-prism.wwwdev.io/core)\n\nClone this repository:\n\n```bash\ngit clone https://github.com/ngx-prism/core.git\n```\n\nGo to **demo** folder and with your command line write the following:\n\n```bash\nnpm i \u0026\u0026 npm start\n```\n\nOpen http://localhost:4200/ in your browser.\n\n\nExample demonstration usage of both `core` and `rxjs` is in [https://github.com/ngx-prism/demo](https://github.com/ngx-prism/demo) repository.\nTo install it, do the following:\n\n```bash\ngit clone https://github.com/ngx-prism/demo.git\ncd demo\nnpm i \u0026\u0026 npm start\n```\n\nOpen http://localhost:4200/ in your browser.\n\n\n## Installation\n\nFirst, install `@ngx-prism/core` package with command:\n\n```bash\nnpm i --save @ngx-prism/core\n```\n\nAdd peer dependencies:\n```bash\nnpm i --save @types/prismjs@1.9.0 prismjs@1.9.0\n```\n\n## Usage\n\n1. Now, import `PrismModule` into your module:\n\n```typescript\n// example.module.ts\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { PrismModule } from '@ngx-prism/core'; // \u003c----- Here\nimport { ExampleComponent } from './example.component'; // your component\n\n@NgModule({\n  declarations: [ ExampleComponent ],\n  imports: [\n    CommonModule,\n    PrismModule // \u003c----- Here\n  ],\n  exports: [ ExampleComponent ]\n})\nexport class ExampleModule { }\n```\n\n2. Use `\u003cngx-prism\u003e\u003c/ngx-prism\u003e` tag with content inside and specify its content with property `[language]` to highlight it:\n\n```typescript\n// example.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'example-component',\n  template: `\n    \u003cngx-prism [language]=\"language\"\u003e\n      {{content}}\n    \u003c/ngx-prism\u003e\n  `\n})\nexport class ExampleComponent {\n  language = 'html';\n  content = '\u003cp\u003etest\u003c/p\u003e';\n  constructor() { }\n}\n```\n\nor use `\u003cngx-prism\u003e\u003c/ngx-prism\u003e` tag with `[code]` and `[interpolation]` attribute like in `ExampleComponent` below:\n\n```typescript\n// example.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'example-component',\n  template: `\n    \u003cngx-prism\n      [language] = \"language\"\n      [hooks] = \"hooks\"\n      [code] = \"content\"\n      [interpolation] = \"interpolate\"\n    \u003e\u003c/ngx-prism\u003e`\n})\nexport class ExampleComponent {\n  content = '\u003cp\u003etest {{language}}\u003c/p\u003e';\n  hooks = {\n    'before-sanity-check': (env) =\u003e { console.log(`before-sanity-check`, env); },\n    'before-highlight': (env) =\u003e { console.log(`before-highlight`, env); },\n    'after-highlight': (env) =\u003e { console.log(`after-highlight`, env); },\n    'complete': (env) =\u003e { console.log(`complete`, env); },\n    'before-insert': (env) =\u003e { console.log(`before-insert`, env); }\n  };\n  interpolate = {\n    language: 'language interpolated'\n  };\n  language = 'html';\n  constructor() { }\n}\n```\n\n* It is possible to import themes files in `@angular/cli`:\n\n```css\n@import '~prismjs/themes/prism-coy.css';\n@import '~prismjs/themes/prism-dark.css';\n@import '~prismjs/themes/prism-funky.css';\n@import '~prismjs/themes/prism-okaidia.css';\n@import '~prismjs/themes/prism-solarizedlight.css';\n@import '~prismjs/themes/prism-tomorrow.css';\n@import '~prismjs/themes/prism-twilight.css';\n@import '~prismjs/themes/prism.css';\n```\n\n### Inputs\n\n| name | Type | Description |\n|----------|---------------|--|\n| async | boolean | *\"Whether to use Web Workers to improve performance and avoid blocking the UI when highlighting very large chunks of code.\"* - prismjs |\n| callback | (element: Element) =\u003e void \\| undefined = undefined | *\"An optional callback to be invoked after the highlighting is done. Mostly useful when async is true, since in that case, the highlighting is done asynchronously.\"* - prismjs  |\n| cd \u003cbr /\u003e *(ChangeDetection)* | PropertiesInterface\u003cbr /\u003e **{[index:string]:boolean}** | Properties provided with `index` as name and value `true` will be sensitive for changes. |\n| code | string | *\"A string with the code to be highlighted.\"* - prismjs |\n| **hooks** | Object | Callback with specific execute time and name: `before-sanity-check`, `before-highlight`, `after-highlight`, `complete`, `before-insert`. |\n| **interpolation** | Object \\| undefined | Data property values to inject.  |\n| language | string | *\"Valid language identifier, for example 'javascript', 'css'.\"* - prismjs |\n\n\n### Lifecycle Hooks \n\n[Angular Lifecycle Hooks](https://angular.io/guide/lifecycle-hooks)\n\n#### PrismComponent\n\n**ngAfterViewInit()**: \n- Sets property `ready` to `true` which by default is `false`. \n- Property `ready` is used in `highlightElement(result: { code: string, language: string }): void` method to performs when `ready` is set to `true` - `prismService.highlight()` method to highlight code.\n\n**ngAfterContentInit()**: \n- Update `__properties` for change detection with inputted property `cd`.\n\n\n## Change detection\n\n[Angular source](https://github.com/angular/angular/blob/02394d2d8021c26c4ab80d89efcbba436120d96f/packages/core/src/change_detection/constants.ts)\n\nComponent `changeDetectionStrategy` is set to `OnPush` means that the change detector's mode will be initially set to `CheckOnce`, and status `CheckOnce` means that after calling detectChanges the status of the change detector will become `Checked`. Status `Checked` means that the change detector should be skipped until its mode changes to `CheckOnce`.\n\nChange detector status is now manually set to `Detached` by default and it means that its sub tree is not a part of the main tree and should be skipped. However it will call `detectChanges()` in **Setters** with indicated properties.\n\n\n## Scripts\n\nClone repository:\n\n```bash\ngit clone https://github.com/ngx-prism/core.git\n```\n\nGo to just created folder:\n\n```bash\ncd core\n```\n\nTo build a clean package, means before that script removes node_modules, dist folder and install dependencies:\n\n```bash\nnpm run clean:start\n```\n\nTo build a package:\n\n```bash\nnpm start\n```\n\nTo run karma tests:\n\n```bash\nnpm test\n```\n\n## GIT\n\n### Commit\n\n- [AngularJS Git Commit Message Conventions](https://gist.github.com/stephenparish/9941e89d80e2bc58a153)   \n- [Karma Git Commit Msg](http://karma-runner.github.io/0.10/dev/git-commit-msg.html)\n\n### Versioning\n\n[Semantic Versioning 2.0.0](http://semver.org/)\n\n**Given a version number MAJOR.MINOR.PATCH, increment the:**  \nMAJOR version when you make incompatible API changes,  \nMINOR version when you add functionality in a backwards-compatible manner, and  \nPATCH version when you make backwards-compatible bug fixes.\n\nAdditional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.   \n\n**FAQ**\nHow should I deal with revisions in the 0.y.z initial development phase?\n\u003eThe simplest thing to do is start your initial development release at 0.1.0 and then increment the minor version for each subsequent release.\n\nHow do I know when to release 1.0.0?\n\n\u003eIf your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.\n\n## License\n\nMIT © ngx-prism\n\n## Donate\n\n[Click to donate](https://donorbox.org/help-creating-open-source-software)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-prism%2Fcore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngx-prism%2Fcore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-prism%2Fcore/lists"}