{"id":13787058,"url":"https://github.com/murhafsousli/ngx-highlightjs","last_synced_at":"2025-05-16T11:06:32.469Z","repository":{"id":23284641,"uuid":"98251478","full_name":"MurhafSousli/ngx-highlightjs","owner":"MurhafSousli","description":"Angular syntax highlighting module","archived":false,"fork":false,"pushed_at":"2025-01-18T04:02:59.000Z","size":4211,"stargazers_count":290,"open_issues_count":0,"forks_count":38,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-16T11:06:24.340Z","etag":null,"topics":["angular","code","gist","highlightjs","linenumbers","prism","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://ngx-highlight.netlify.app/","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/MurhafSousli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2017-07-25T01:43:45.000Z","updated_at":"2025-05-03T07:00:50.000Z","dependencies_parsed_at":"2024-05-29T03:26:10.965Z","dependency_job_id":"0169256b-5e4a-401f-8440-29947b628875","html_url":"https://github.com/MurhafSousli/ngx-highlightjs","commit_stats":{"total_commits":319,"total_committers":9,"mean_commits":35.44444444444444,"dds":"0.10344827586206895","last_synced_commit":"97b7a282fced8e2d095bfff991eda7d64476d0f7"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MurhafSousli%2Fngx-highlightjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MurhafSousli%2Fngx-highlightjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MurhafSousli%2Fngx-highlightjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MurhafSousli%2Fngx-highlightjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MurhafSousli","download_url":"https://codeload.github.com/MurhafSousli/ngx-highlightjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"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","code","gist","highlightjs","linenumbers","prism","syntax-highlighting"],"created_at":"2024-08-03T20:00:26.244Z","updated_at":"2025-05-16T11:06:27.455Z","avatar_url":"https://github.com/MurhafSousli.png","language":"TypeScript","funding_links":[],"categories":["Dependencies"],"sub_categories":["UI"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"200px\" width=\"200px\" style=\"text-align: center\" src=\"https://cdn.rawgit.com/MurhafSousli/ngx-highlightjs/b8b00ec3/src/assets/logo.svg\"\u003e\n  \u003ch1 align=\"center\"\u003eAngular Highlight.js\u003c/h1\u003e\n\u003c/p\u003e\n\n[![Demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://ngx-highlight.netlify.app/)\n[![Stackblitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-highlightjs)\n[![npm](https://img.shields.io/npm/v/ngx-highlightjs.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-highlightjs)\n[![tests](https://github.com/MurhafSousli/ngx-highlightjs/workflows/tests/badge.svg)](https://github.com/MurhafSousli/ngx-highlightjs/actions?query=workflow%3Atests)\n[![codecov](https://codecov.io/gh/MurhafSousli/ngx-highlightjs/graph/badge.svg?token=JWAelEiLT1)](https://codecov.io/gh/MurhafSousli/ngx-highlightjs)\n[![Downloads](https://img.shields.io/npm/dt/ngx-highlightjs.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-highlightjs)\n[![Monthly Downloads](https://img.shields.io/npm/dm/ngx-highlightjs.svg)](https://www.npmjs.com/package/ngx-highlightjs)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-highlightjs.svg)](https://bundlephobia.com/result?p=ngx-highlightjs)\n[![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)\n\nInstant code highlighting directives\n___\n\n## Table of Contents\n\n- [Live Demo](https://ngx-highlight.netlify.app/) | [Stackblitz](https://stackblitz.com/edit/ngx-highlightjs)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Lazy-load highlight.js script](#usage)\n  - [Import highlight.js theme](#themes)\n  - [Highlight usage](#highlight)\n  - [HighlightAuto usage](#highlight-auto)\n- [Line numbers addon usage](#line-numbers)\n- [Plus package](#plus)\n- [Issues](#issues)\n- [Author](#author)\n- [More plugins](#more-plugins)\n\n\u003ca name=\"installation\"/\u003e\n\n## Installation\n\nInstall with **NPM**\n\n```bash\nnpm i ngx-highlightjs\n```\n\n\u003ca name=\"usage\"/\u003e\n\n## Usage\n\n### Use `provideHighlightOptions` to provide highlight.js options in `app.config.ts`\n\n```typescript\nimport { provideHighlightOptions } from 'ngx-highlightjs';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHighlightOptions({\n      fullLibraryLoader: () =\u003e import('highlight.js')\n    })\n  ]\n};\n```\n\n\u003e Note: This includes the entire Highlight.js library with all languages.\n\nYou can also opt to load only the core script and the necessary languages.\n\n### Importing Core Library and Languages\n\n```typescript\nimport { provideHighlightOptions } from 'ngx-highlightjs';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHighlightOptions({\n      coreLibraryLoader: () =\u003e import('highlight.js/lib/core'),\n      lineNumbersLoader: () =\u003e import('ngx-highlightjs/line-numbers'), // Optional, add line numbers if needed\n      languages: {\n        typescript: () =\u003e import('highlight.js/lib/languages/typescript'),\n        css: () =\u003e import('highlight.js/lib/languages/css'),\n        xml: () =\u003e import('highlight.js/lib/languages/xml')\n      },\n      themePath: 'path-to-theme.css' // Optional, useful for dynamic theme changes\n    })\n  ]\n};\n```\n\n### HighlightOptions API\n\n| Name               | Description                                                                                                                    |\n|--------------------|--------------------------------------------------------------------------------------------------------------------------------|\n| fullLibraryLoader  | A function returning a promise to load the entire `highlight.js` script                                                        |\n| coreLibraryLoader  | A function returning a promise to load the core `highlight.js` script                                                          |\n| lineNumbersLoader  | A function returning a promise to load the `lineNumbers` script for adding line numbers                                        |\n| languages          | The languages to register with Highlight.js (Needed only if you opt to use `coreLibraryLoader`)                                |\n| config             | Set Highlight.js configuration, see [configure-options](http://highlightjs.readthedocs.io/en/latest/api.html#configure-option) |\n| lineNumbersOptions | Set line numbers plugin options                                                                                                |\n| themePath          | The path to the CSS file for the highlighting theme                                                                            |\n\n\u003ca name=\"themes\"/\u003e\n\n### Import highlighting theme\n\n**Dynamic Approach**\n\nSet the theme path in the global configuration to enable dynamic theme changes:\n\n```ts\n providers: [\n  {\n    provide: HIGHLIGHT_OPTIONS,\n    useValue: {\n      // ...\n      themePath: 'assets/styles/solarized-dark.css'\n    }\n  }\n]\n```\n\nAlternatively, import the theme from the app's distribution folder or use a CDN link.\n\nWhen switching between app themes, call the `setTheme(path)` method from the `HighlightLoader` service.\n\n```ts\nimport { HighlightLoader } from 'ngx-highlightjs';\n\nexport class AppComponent {\n\n  private hljsLoader: HighlightLoader = inject(HighlightLoader);\n\n  onAppThemeChange(appTheme: 'dark' | 'light') {\n    this.hljsLoader.setTheme(appTheme === 'dark' ? 'assets/styles/solarized-dark.css' : 'assets/styles/solarized-light.css');\n  }\n}\n```\n\n**Traditional Approach**\n\nIn `angular.json`:\n\n```\n\"styles\": [\n  \"styles.css\",\n  \"../node_modules/highlight.js/styles/github.css\",\n]\n```\n\nOr directly in `src/style.scss`:\n\n```css\n@import 'highlight.js/styles/github.css';\n```\n\n_[List of all available themes from highlight.js](https://github.com/isagalaev/highlight.js/tree/master/src/styles)_\n\n\u003ca name=\"highlight\"/\u003e\n\n### Highlight Directive Usage\n\nTo apply code highlighting, use the `highlight` directive. It requires setting the target language, with an optional feature to ignore illegal syntax.\n\n```ts\nimport { Highlight } from 'ngx-highlightjs';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cpre\u003e\u003ccode [highlight]=\"code\" language=\"html\"\u003e\u003c/code\u003e\u003c/pre\u003e\n  `,\n  imports: [Highlight]\n})\nexport class AppComponent {\n}\n```\n\n#### Options\n\n| Name                 | Type            | Description                                                                                                                                                    |\n|----------------------|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **[highlight]**      | string          | Code to highlight.                                                                                                                                             |\n| **[language]**       | string          | Parameter must be present and specify the language name or alias of the grammar to be used for highlighting.                                                   |\n| **[ignoreIllegals]** | boolean         | An optional parameter that when true forces highlighting to finish even in case of detecting illegal syntax for the language instead of throwing an exception. |\n| **(highlighted)**    | HighlightResult | Stream that emits the result object when element is highlighted                                                                                                |\n\n\n\u003ca name=\"highlight-auto\"/\u003e\n\n### HighlightAuto Directive Usage\n\nThe `highlightAuto` directive works the same way but automatically detects the language to apply highlighting.\n\n```ts\nimport { HighlightAuto } from 'ngx-highlightjs';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cpre\u003e\u003ccode [highlightAuto]=\"code\"\u003e\u003c/code\u003e\u003c/pre\u003e\n  `,\n  imports: [HighlightAuto]\n})\nexport class AppComponent {\n}\n```\n\n#### Options\n\n| Name                | Type                | Description                                                                                                |\n|---------------------|---------------------|------------------------------------------------------------------------------------------------------------|\n| **[highlightAuto]** | string              | Accept code string to highlight, default `null`                                                            |\n| **[languages]**     | string[]            | An array of language names and aliases restricting auto detection to only these languages, default: `null` |\n| **(highlighted)**   | AutoHighlightResult | Stream that emits the result object when element is highlighted                                            |\n\n\n\u003ca name=\"line-numbers\"/\u003e\n\n## Line Numbers Directive Usage\n\nThe `lineNumbers` directive extends highlighted code with line numbers. It functions in conjunction with the `highlight` and `highlightAuto` directives.\n\n```ts\nimport { HighlightAuto } from 'ngx-highlightjs';\nimport { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cpre\u003e\u003ccode [highlightAuto]=\"code\" lineNumbers\u003e\u003c/code\u003e\u003c/pre\u003e\n  `,\n  imports: [HighlightAuto, HighlightLineNumbers]\n})\nexport class AppComponent {\n}\n```\n\n#### Options\n\n| Name             | Type    | Description                                                  |\n|------------------|---------|--------------------------------------------------------------|\n| **[singleLine]** | boolean | Enable plugin for code block with one line, default `false`. |\n| **[startFrom]**  | number  | Start numbering from a custom value, default `1`.            |\n\n### NOTE\n\nDuring the project build process, you may encounter a warning stating `WARNING in ... CommonJS or AMD dependencies can cause optimization bailouts`.\n\nTo address this warning, include the following configuration in your angular.json file:\n\n```json\n{\n  \"projects\": {\n    \"project-name\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"allowedCommonJsDependencies\": [\n              \"highlight.js\"\n            ]\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nRead more about [CommonJS dependencies configuration](https://angular.io/guide/build#configuring-commonjs-dependencies)\n\n\n\u003ca name=\"plus\"/\u003e\n\n## Plus package\n\nThis package provides the following features:\n\n- Utilizes the gists API to highlight code snippets directly from GitHub gists.\n- Supports direct code highlighting from URLs.\n\n### Usage\n\nTo integrate this addon into your project, ensure the presence of `HttpClient` by importing it into your `main.ts` file.\n\n```ts\nimport { provideHttpClient } from '@angular/common/http';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHttpClient()\n  ]\n};\n```\n\n### Highlight a gist file\n\n1. Use `[gist]` directive, passing the gist ID as its attribute, to retrieve the response through the `(gistLoaded)` output event.\n2. Upon the emission of `(gistLoaded)`, gain access to the gist response.\n3. Use `gistContent` pipe to extract the file's content from the gist response based on the specified file name.\n\n**Example:**\n\n```ts\nimport { HighlightPlusModule } from 'ngx-highlightjs';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cpre [gist]=\"gistId\" (gistLoaded)=\"gist = $event\"\u003e\n      \u003ccode [highlight]=\"gist | gistContent: 'main.js'\"\u003e\u003c/code\u003e\n    \u003c/pre\u003e\n  `,\n  imports: [HighlightPlusModule]\n})\nexport class AppComponent {\n}\n```\n\n### Highlight all gist files\n\nTo loop over `gist?.files`, use `keyvalue` pipe to pass file name into `gistContent` pipe.\n\nTo highlight all files within a gist, iterate through `gist.files` and utilize the `keyvalue` pipe to pass the file name into the `gistContent` pipe.\n\n**Example:**\n\n```ts\nimport { HighlightPlusModule } from 'ngx-highlightjs';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cng-container [gist]=\"gistId\" (gistLoaded)=\"gist = $event\"\u003e\n      @for (file of gist?.files | keyvalue; track file.key) {\n        \u003cpre\u003e\u003ccode [highlight]=\"gist | gistContent: file.key\"\u003e\u003c/code\u003e\u003c/pre\u003e\n      }\n    \u003c/ng-container\u003e\n  `,\n  imports: [HighlightPlusModule, CommonModule]\n})\nexport class AppComponent {\n}\n```\n\n### Highlight code from URL directly\n\nUse the pipe `codeFromUrl` with the `async` pipe to get the code text from a raw URL.\n\n**Example:**\n\n```ts\nimport { HighlightPlusModule } from 'ngx-highlightjs';\n\n@Component({\n  selector: 'app-root',\n  template: `\n   \u003cpre\u003e\n     \u003ccode [highlight]=\"codeUrl | codeFromUrl | async\"\u003e\u003c/code\u003e\n   \u003c/pre\u003e\n  `,\n  imports: [HighlightPlusModule, CommonModule]\n})\nexport class AppComponent {\n}\n```\n\n### Providing Gist API secret (Optional)\n\nThe package offers the `provideHighlightOptions` function, allowing you to set your `clientId` and `clientSecret` for the gist HTTP requests.\nYou can provide these options in your `app.config.ts` file as demonstrated below:\n\n```ts\nimport { provideHttpClient } from '@angular/common/http';\nimport { provideHighlightOptions } from 'ngx-highlightjs/plus'\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideHttpClient(),\n    provideGistOptions({\n      clientId: 'CLIENT_ID',\n      clientSecret: 'CLIENT_SECRET'\n    })\n  ]\n};\n```\n\n\n\u003ca name=\"issues\"/\u003e\n\n## Issues\n\nIf you identify any errors in the library, or have an idea for an improvement, please open\nan [issue](https://github.com/MurhafSousli/ngx-highlightjs/issues).\n\n\u003ca name=\"author\"/\u003e\n\n## Author\n\n**Murhaf Sousli**\n\n- [github/murhafsousli](https://github.com/MurhafSousli)\n- [twitter/murhafsousli](https://twitter.com/MurhafSousli)\n\n\u003ca name=\"more-plugins\"/\u003e\n\n## More plugins\n\n- [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar)\n- [ngx-sharebuttons](https://github.com/MurhafSousli/ngx-sharebuttons)\n- [ngx-gallery](https://github.com/MurhafSousli/ngx-gallery)\n- [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar)\n- [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating)\n- [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurhafsousli%2Fngx-highlightjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmurhafsousli%2Fngx-highlightjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurhafsousli%2Fngx-highlightjs/lists"}