{"id":13535489,"url":"https://github.com/JayChase/angular2-highlight-js","last_synced_at":"2025-04-02T01:30:59.236Z","repository":{"id":9911607,"uuid":"63699257","full_name":"JayChase/angular2-highlight-js","owner":"JayChase","description":"highlight.js integration with Angular","archived":false,"fork":false,"pushed_at":"2023-01-07T06:23:12.000Z","size":1538,"stargazers_count":21,"open_issues_count":34,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T02:22:41.269Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/JayChase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-19T14:08:31.000Z","updated_at":"2020-11-29T11:35:59.000Z","dependencies_parsed_at":"2023-01-13T15:38:03.144Z","dependency_job_id":null,"html_url":"https://github.com/JayChase/angular2-highlight-js","commit_stats":null,"previous_names":["useful-software-solutions-ltd/angular2-highlight-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fangular2-highlight-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fangular2-highlight-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fangular2-highlight-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fangular2-highlight-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JayChase","download_url":"https://codeload.github.com/JayChase/angular2-highlight-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246738493,"owners_count":20825789,"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":[],"created_at":"2024-08-01T08:00:57.240Z","updated_at":"2025-04-02T01:30:58.960Z","avatar_url":"https://github.com/JayChase.png","language":"TypeScript","readme":"### angular2-highlight-js\n\n[highlight.js](https://highlightjs.org) integration with Angular.\n\n#### Quick links\n\n### Installation\n\n```bash\nnpm install --save angular2-highlight-js@latest highlight.js\n```\n\n### Usage\n\nAdd the highlight.js css for the style you want to use to your app's styles in **angular.json**.\n\n```json\n \"styles\": [\n             \"./node_modules/highlight.js/styles/monokai-sublime.css\",\n              ...\n            ],\n```\n\nIn **app.module.ts** import the highlight.js library and any languages you will be highlighting.\n\n```typescript\nimport { registerLanguage } from 'highlight.js';\nimport javascript from 'highlight.js/lib/languages/javascript';\nimport typescript from 'highlight.js/lib/languages/typescript';\n\nregisterLanguage('typescript', typescript);\nregisterLanguage('javascript', javascript);\n```\n\nImport the **AngularHighlightJsModule**.\n\n```typescript\nimport { AngularHighlightJsModule } from 'angular2-highlight-js';\n```\n\n```typescript\n@NgModule({\n  declarations: [AppComponent],\n  imports: [...AngularHighlightJsModule],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nThis library contains the **HighlightJsContentDirective**\nBelow are usage notes for each. A demo app is also available as in the [repo]().\n\n#### For hljsContent directive\n\nUse this to highlight the contents of and element which will be set dynamically (by setting innerHTML for example).\n\nImport the directive and declare it.\n\n```typescript\n\n@Component({\n    selector: 'demo',\n    templateUrl: 'demo.component.html',\n    styleUrls: ['demo.component.css']\n})\n```\n\nAdd the attribute **hljsContent** to the element which will have content that requires highlighting.\nWhen the content is changed the directive will look for all child elements which match the selector provided and highlight them. If no selector is given it will default to finding all code elements.\n\n```html\n\u003csection [innerHTML]=\"sampleContent\" hljsContent=\".highlight\"\u003e\u003c/section\u003e\n```\n\nYou can configure **highlight.js** by using the **[options]** property on the directive\n\n```html\n\u003csection\n  [innerHTML]=\"sampleContent\"\n  hljsContent=\".highlight\"\n  [options]=\"{ useBr: true }\"\n\u003e\u003c/section\u003e\n```\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJayChase%2Fangular2-highlight-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJayChase%2Fangular2-highlight-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJayChase%2Fangular2-highlight-js/lists"}