{"id":16407146,"url":"https://github.com/cipchk/ngx-highlight-js","last_synced_at":"2025-04-09T09:10:07.208Z","repository":{"id":39352255,"uuid":"89052056","full_name":"cipchk/ngx-highlight-js","owner":"cipchk","description":"Angular for syntax highlighting with highlight.js","archived":false,"fork":false,"pushed_at":"2024-11-23T14:49:56.000Z","size":3572,"stargazers_count":30,"open_issues_count":3,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T08:11:22.614Z","etag":null,"topics":["angular","angular5","highlight","highlight-js","ngx-highlight-js"],"latest_commit_sha":null,"homepage":"https://cipchk.github.io/ngx-highlight-js/","language":"HTML","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/cipchk.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-22T07:22:04.000Z","updated_at":"2024-12-29T13:29:41.000Z","dependencies_parsed_at":"2024-06-18T15:45:26.722Z","dependency_job_id":"d0f2e51e-e011-482e-8bfc-c4446ddc1286","html_url":"https://github.com/cipchk/ngx-highlight-js","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":0.1515151515151515,"last_synced_commit":"442efb5e4a5230fd70da1c34eb0dc41aebd6664f"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fngx-highlight-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fngx-highlight-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fngx-highlight-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fngx-highlight-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cipchk","download_url":"https://codeload.github.com/cipchk/ngx-highlight-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"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","angular5","highlight","highlight-js","ngx-highlight-js"],"created_at":"2024-10-11T06:12:14.102Z","updated_at":"2025-04-09T09:10:07.174Z","avatar_url":"https://github.com/cipchk.png","language":"HTML","funding_links":[],"categories":["HTML","Framework Interoperability"],"sub_categories":["Wrappers"],"readme":"# ngx-highlight-js\r\n\r\nAngular for syntax highlighting with highlight.js\r\n\r\n[![NPM version](https://img.shields.io/npm/v/ngx-highlight-js.svg)](https://www.npmjs.com/package/ngx-highlight-js)\r\n[![Ci](https://github.com/cipchk/ngx-highlight-js/workflows/Ci/badge.svg)](https://github.com/cipchk/ngx-highlight-js/actions)\r\n[![codecov](https://codecov.io/github/cipchk/ngx-highlight-js/graph/badge.svg?token=FI8lMVH3bN)](https://codecov.io/github/cipchk/ngx-highlight-js)\r\n\r\n## Demo\r\n\r\n- [Live Demo](https://cipchk.github.io/ngx-highlight-js/)\r\n- [Stackblitz](https://stackblitz.com/edit/ngx-highlight-js)\r\n\r\n## Installation instructions\r\n\r\n### 1、Install\r\n\r\n```\r\nnpm install --save ngx-highlight-js\r\n```\r\n\r\n### 2、Add highlight.js\r\n\r\nLoad the [highlight.js](https://highlightjs.org/download/) and theme css in page.\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.min.css\" /\u003e\r\n\u003cscript src=\"//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n## Usage\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { HighlightJsDirective } from 'ngx-highlight-js';\r\n\r\n@Component({\r\n  selector: 'test',\r\n  template: `\u003ctextarea highlight-js [lang]=\"'bash'\"\u003enpm install --save ngx-highlight-js\u003c/textarea\u003e`,\r\n  imports: [HighlightJsDirective],\r\n})\r\nexport class SimpleComponent {}\r\n```\r\n\r\n### Simple mode\r\n\r\n```html\r\n\u003ctextarea highlight-js [options]=\"{}\" [lang]=\"'typescript'\"\u003e\r\n/* tslint:disable */\r\nimport { Component } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'demo',\r\n  templateUrl: './demo.component.html',\r\n  styleUrls: ['./demo.component.scss']\r\n})\r\nexport class DemoComponent {\r\n  switchStatus: boolean = true;\r\n}\r\n\u003c/textarea\u003e\r\n```\r\n\r\n### Default mode\r\n\r\nWill render each `\u003cpre\u003e\u003ccode\u003e`:\r\n\r\n```html\r\n\u003ctextarea highlight-js mode=\"default\"\u003e\r\n  \u003cp\u003e\r\n    The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling\r\n    \u003ca href=\"http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload\"\u003e\u003ccode\u003einitHighlightingOnLoad\u003c/code\u003e\u003c/a\r\n    \u003e:\r\n  \u003c/p\u003e\r\n  \u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;link rel=\u0026quot;stylesheet\u0026quot; href=\u0026quot;/path/to/styles/default.css\u0026quot;\u0026gt;\r\n  \u0026lt;script src=\u0026quot;/path/to/highlight.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\r\n  \u0026lt;script\u0026gt;hljs.initHighlightingOnLoad();\u0026lt;/script\u0026gt;\r\n  \u003c/code\u003e\u003c/pre\u003e\r\n  \u003cp\u003e\r\n    This will find and highlight code inside of \u003ccode\u003e\u0026lt;pre\u0026gt;\u0026lt;code\u0026gt;\u003c/code\u003e tags; it tries to detect the language automatically. If\r\n    automatic detection doesn’t work for you, you can specify the language in the \u003ccode\u003eclass\u003c/code\u003e attribute:\r\n  \u003c/p\u003e\r\n  \u003cpre\u003e\u003ccode class=\"language-html\"\u003e\u0026lt;pre\u0026gt;\u0026lt;code class=\u0026quot;html\u0026quot;\u0026gt;...\u0026lt;/code\u0026gt;\u0026lt;/pre\u0026gt;\r\n  \u003c/code\u003e\u003c/pre\u003e\r\n\u003c/textarea\u003e\r\n```\r\n\r\n### Parameter\r\n\r\n| Property    | Description                                                                                              | Type              | Default  | Global Config |\r\n| ----------- | -------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ------------- |\r\n| `[mode]`    | - `default` Will render each `\u003cpre\u003e\u003ccode\u003e`\u003cbr\u003e- `simple` Render all content according to `lang` language | `default, simple` | `simple` | ✅            |\r\n| `[options]` | Equar [configure(options)](https://highlightjs.readthedocs.io/en/latest/api.html#configure)              | `any`             | -        | ✅            |\r\n| `[lang]`    | Uses language detection by default but you can specify the language                                      | `string`          | `html`   | ✅            |\r\n| `[code]`    | Specify content                                                                                          | `string`          | `html`   | -             |\r\n\r\n**Global Config**\r\n\r\n```ts\r\n@NgModule({\r\n  providers: [provideSFConfig({ lang: 'html' })],\r\n})\r\nexport class AppDemoModule {}\r\n```\r\n\r\n## Troubleshooting\r\n\r\nPlease follow this guidelines when reporting bugs and feature requests:\r\n\r\n1. Use [GitHub Issues](https://github.com/cipchk/ngx-highlight-js/issues) board to report bugs and feature requests (not our email address)\r\n2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.\r\n\r\nThanks for understanding!\r\n\r\n### License\r\n\r\nThe MIT License (see the [LICENSE](https://github.com/cipchk/ngx-highlight-js/blob/master/LICENSE) file for the full text)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipchk%2Fngx-highlight-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcipchk%2Fngx-highlight-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipchk%2Fngx-highlight-js/lists"}