{"id":25258939,"url":"https://github.com/ProAngular/ngx-gist","last_synced_at":"2025-10-27T03:30:49.563Z","repository":{"id":50446482,"uuid":"518963443","full_name":"ProAngular/ngx-gist","owner":"ProAngular","description":"An Angular Material and HighlighJs styled display box for GitHub gist and local code snippets.","archived":false,"fork":false,"pushed_at":"2025-10-26T03:27:01.000Z","size":1656,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T05:34:18.922Z","etag":null,"topics":["angular","angular-material","angular2","gist","gist-client","gistbox","gists","gists-files","ux","ux-design"],"latest_commit_sha":null,"homepage":"https://www.proangular.com","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/ProAngular.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"community_bridge":null,"github":["ProAngular","CodyTolene"],"issuehunt":null,"ko_fi":null,"liberapay":null,"open_collective":null,"otechie":null,"patreon":null,"tidelift":null,"custom":["https://www.paypal.me/CodyTolene"]}},"created_at":"2022-07-28T19:01:03.000Z","updated_at":"2025-10-26T03:47:56.000Z","dependencies_parsed_at":"2025-03-09T01:31:55.521Z","dependency_job_id":"67212b5a-340c-4939-b9e1-9ca2d4e57ad0","html_url":"https://github.com/ProAngular/ngx-gist","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ProAngular/ngx-gist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-gist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-gist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-gist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-gist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProAngular","download_url":"https://codeload.github.com/ProAngular/ngx-gist/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProAngular%2Fngx-gist/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281211348,"owners_count":26462074,"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","status":"online","status_checked_at":"2025-10-27T02:00:05.855Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","angular-material","angular2","gist","gist-client","gistbox","gists","gists-files","ux","ux-design"],"created_at":"2025-02-12T07:01:38.800Z","updated_at":"2025-10-27T03:30:49.557Z","avatar_url":"https://github.com/ProAngular.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.ProAngular.com\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/ProAngular/ngx-gist/refs/heads/main/public/images/pro-angular-logo.png\" /\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003e\n    \u003ca href=\"https://www.ProAngular.com\" target=\"_blank\"\u003e\n      Pro Angular\n    \u003c/a\u003e: GitHub Gist Code Snippet Viewer\n  \u003c/h1\u003e\n\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n[![npm](https://badgen.net/badge/icon/npm?icon=npm\u0026label)](https://www.npmjs.com/@proangular/ngx-gist)\n[![GitHub](https://badgen.net/badge/icon/GitHub?icon=github\u0026label)](https://github.com/ProAngular/ngx-gist)\n[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript\u0026label)](https://github.com/ProAngular/ngx-gist/search?l=typescript)\n[![npm Version](https://badge.fury.io/js/@proangular%2Fngx-gist.svg)](https://www.npmjs.com/@proangular/ngx-gist)\n[![Node Version](https://badgen.net/npm/node/@proangular/ngx-gist)](https://www.npmjs.com/@proangular/ngx-gist)\n[![Package Downloads](https://badgen.net/npm/dw/@proangular/ngx-gist)](https://www.npmjs.com/@proangular/ngx-gist)\n[![Size](https://img.shields.io/bundlephobia/minzip/@proangular/ngx-gist.svg)](https://bundlephobia.com/result?p=ProAngular/ngx-gist)\n[![Demo Status](https://badgen.net/badge/Demo/Online/green)](https://www.ProAngular.com/demos/ngx-gist)\n[![Website Status](https://img.shields.io/website?down_color=lightgrey\u0026down_message=Offline\u0026label=Website\u0026up_color=green\u0026up_message=Online\u0026url=https%3A%2F%2Fwww.proangular.com)](https://www.proangular.com)\n[![Gitter Chat](https://badges.gitter.im/ProAngular/lobby.svg)](https://gitter.im/ProAngular/community)\n[![Discord Chat](https://img.shields.io/discord/1003103094588055552?label=Discord)](https://discord.com/channels/1003103094588055552)\n[![Sponsors](https://img.shields.io/github/sponsors/proangular?label=Sponsors)](https://github.com/sponsors/ProAngular)\n[![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)\n[![GitHub Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml)\n[![npmjs Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml)\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Index \u003ca name=\"index\"\u003e\u003c/a\u003e\n\n- [Information](#information)\n- [Description](#description)\n- [Demo](#demo)\n- [Installation](#installation)\n  - [Prerequisites](#prerequisites)\n  - [Install Component](#install-component)\n- [Usage](#usage)\n- [Component API](#api)\n- [Compatibility](#compatibility)\n- [Development](#development)\n- [Licensing](#licensing)\n- [Wrapping Up](#wrapping-up)\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Information \u003ca name=\"information\"\u003e\u003c/a\u003e\n\nWhat is Gist? Gist is an easy method to share snippets or excerpts of data with\nothers. A gist can be a string of code, a bash script or some other small piece\nof data. These bits of information are hosted by GitHub as a repository.\n\nMore info in the following links:\n\n- Little Known Ways To Utilize GitHub Gists:\n  https://www.liquidweb.com/kb/little-known-ways-to-utilize-github-gists/\n- GitHub Docs:\n  https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists\n- Create a gist: https://gist.github.com/\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Description \u003ca name=\"description\"\u003e\u003c/a\u003e\n\nBehold, this package contains an Angular Material and HighlighJs styled element\nwhich displays your GitHub gists in a conveniant, easy to view interface. Don't\nhave a gist? No problem, display your own code snippets by just passing in a\ndirect model (`NgxGist.create({ ... })`)! All files from the remote/local gist\nare displayed in separate tabs for users to easily navigate. Many optional\nfeatures and themes are available.\n\nGitHub gists can be created here: https://gist.github.com/\n\nEnjoy!\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Demo \u003ca name=\"demo\"\u003e\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/ProAngular/ngx-gist/refs/heads/main/public/images/demo-gist.gif\" /\u003e\n\u003c/p\u003e\n\nLive demo here:\n[https://www.ProAngular.com/demos/ngx-gist](https://www.ProAngular.com/demos/ngx-gist)\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Installation \u003ca name=\"installation\"\u003e\u003c/a\u003e\n\nUsing Node Package Manager ([NPM][url-node-js]) in a new terminal window run the\nfollowing commands to install the required dependencies.\n\n### Prerequisites \u003ca name=\"prerequisites\"\u003e\u003c/a\u003e\n\n**Angular Material**\n\nMore information on theming Angular Material:\nhttps://material.angular.io/guide/theming\n\n```bash\nng add @angular/material\n```\n\n**HighlightJs**\n\nMore information on theming HighlightJs: https://highlightjs.org/\n\n```bash\nnpm install highlight.js --save\n```\n\n**highlightjs-line-numbers.js**\n\n```bash\nnpm install highlightjs-line-numbers.js --save\n```\n\n**io-ts**\n\n```bash\nnpm install io-ts --save\nnpm install io-ts-types --save\n```\n\n### Install Gist Components \u003ca name=\"install-component\"\u003e\u003c/a\u003e\n\n```bash\nng add @proangular/ngx-gist@latest\n```\n\nor\n\n```bash\nnpm install @proangular/ngx-gist --save\n```\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\nImport one or all of the following custom form components to use in your Angular\napplication where used:\n\n```diff\n+ import { NgxGistComponent } from '@proangular/ngx-gist';\n\n// Import to module\n@NgModule({\n  ...\n  imports: [\n+   NgxGistComponent,\n    ...\n  ],\n})\n\n...\n\n// or component\n@Component({\n  ...\n  imports: [\n+   NgxGistComponent,\n    ...\n  ],\n})\n```\n\nDecide if you'd like to display a local, or remote gist:\n\n1. Provide your gist id into the input `gistId`, or\n\n2. Provide a direct `NgxGist` mobdel in the input `gist`.\n\nNote: For example your gist id would be `TH1515TH3G15T1D` in:\n\nhttps://gist.github.com/YourUserName/TH1515TH3G15T1D\n\n### Default - fetched gist (auto cached for 24 hours)\n\nngx-gist will fetch the gist once and store it locally for 24 hours. In that\ntimeframe, if the user returns or visits another page where this gist was\npreviously loaded, it will reload the content without having to reach out to\nGitHub again.\n\n```html\n\u003cngx-gist gistId=\"TH1515TH3G15T1D\"\u003e\u003c/ngx-gist\u003e\n```\n\n### Fetched gist (forced no cache)\n\nForce no cache. This will force ngx-gist to retrieve the content live from\nGitHub every time this content loads. This is disabled by default, but could be\nuseful if your gists change frequently.\n\n```html\n\u003cngx-gist gistId=\"TH1515TH3G15T1D\" [useCache]=\"false\"\u003e\u003c/ngx-gist\u003e\n```\n\n### Setting the code style theme\n\nSelect a \"highlight.js\" code theme to apply. Note: Only one theme can be loaded\non a single page at a time! The first theme to load will apply to all gists on\nthe page.\n\n```html\n\u003cngx-gist codeTheme=\"github\" gistId=\"TH1515TH3G15T1D\"\u003e\u003c/ngx-gist\u003e\n```\n\n### Displaying one specific file\n\nDisplay only one specific file when your gist has many.\n\n```html\n\u003cngx-gist displayOnlyFileNames=\"super.js\" gistId=\"TH1515TH3G15T1D\"\u003e\u003c/ngx-gist\u003e\n```\n\n### Displaying multiple, specific files\n\nYou can also display any number of specific files by name.\n\n```html\n\u003cngx-gist\n  [displayOnlyFileNames]=\"['csstest.css', 'main.ts']\"\n  gistId=\"TH1515TH3G15T1D\"\n\u003e\u003c/ngx-gist\u003e\n```\n\n### Displaying a basic code snippet (without a remote gist)\n\nThese are not fetched from GitHub and are brought in elsewhere from your\napplication (seperate HTTP request, or statically for example). With this method\nyou can display code snippets without having to create a remote gist. You can\neasily create a new code snippet/gist object using `NgxGist.create({ ... })`.\nNote: no \"Open Gist on GitHub\" link will display.\n\n```html\n\u003cngx-gist [gist]=\"localGistObject\"\u003e\u003c/ngx-gist\u003e\n```\n\n### Hiding line numbers\n\nLine numbers are enabled by default, but you can turn them off like so.\n\n```html\n\u003cngx-gist gistId=\"TH1515TH3G15T1D\" [showLineNumbers]=\"false\"\u003e\u003c/ngx-gist\u003e\n```\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Component API \u003ca name=\"api\"\u003e\u003c/a\u003e\n\n| Input Name               | Input Typing                         | Default Value | Description                                                                                                                                                                                                                                                                |\n| ------------------------ | ------------------------------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **codeTheme**            | `HighlightJsTheme \\| undefined`      | `undefined`   | The `highlight.js` code theme to use and display. Note: Only _one_ theme can be loaded on a single page at a time! The first theme to load will apply to all gists on the page. Available themes here: https://unpkg.com/browse/highlight.js@11.6.0/styles/                |\n| **displayOnlyFileNames** | `string \\| string[] \\| undefined`    | `undefined`   | Display in the DOM only the selected filename(s) from the gists files array. Can be either a string or string array. File names much match exactly, be sure to remove any leading or trailing whitespace in the provided strings.                                          |\n| **gist**                 | `NgxGist \\| undefined`               | `undefined`   | Provide a static gist model here directly which will be displayed if no `gistId` is provided for remote fetching. Also this model will be displayed should a fetch fail when retrieving `gistId`, or overwritten once the pertaining `gistId` data is fetched.             |\n| **gistId**               | `string`                             | `undefined`   | Provide the GitHub gist id to be fetched and loaded. This can be found in URL of the gists you create. For example the id `TH1515TH3G15T1D` in: https://gist.github.com/YourUserName/TH1515TH3G15T1D. Alternatively, provide a value directly in the sibling input `gist`. |\n| **hideGistLink**         | `bool`                               | `false`       | Optionally hide the gist link which opens the gist on GitHub. The gist links automatically display for remote gists, but can be hidden with this feature.                                                                                                                  |\n| **materialTheme**        | `MaterialPrebuiltTheme \\| undefined` | `undefined`   | Define a material core theme to apply. Ideally, you should already have your global material theme set at the root of your project so try to avoid using this if possible. Note: These are loaded from the CDN: `https://unpkg.com`                                        |\n| **showLineNumbers**      | `bool`                               | `true`        | Display or hide the line numbers in your gist code snippets.                                                                                                                                                                                                               |\n| **useCache**             | `bool`                               | `true`        | Cache the GitHub gist request in local memory for 24 hours. GitHub has a request limit, so this helps in reducing bandwidth. Loads previously fetched gist content from the users machine on refresh and page re-visits.                                                   |\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Compatibility \u003ca name=\"compatibility\"\u003e\u003c/a\u003e\n\n| Angular version | @proangular/ngx-gist | Install                               |\n| --------------- | -------------------- | ------------------------------------- |\n| v20             | v20.x.0              | `ng add @proangular/ngx-gist@^20.0.0` |\n| v19             | v19.x.0              | `ng add @proangular/ngx-gist@^19.0.0` |\n| v18             | ------               | Untested                              |\n| v17             | v1.3.x               | `ng add @proangular/ngx-gist@~1.3.0`  |\n| v16             | v1.2.x               | `ng add @proangular/ngx-gist@~1.2.0`  |\n| v15             | v1.1.x               | `ng add @proangular/ngx-gist@~1.1.0`  |\n| v14             | v1.0.x               | `ng add @proangular/ngx-gist@~1.0.8`  |\n| v13             | v1.0.x               | `ng add @proangular/ngx-gist@~1.0.8`  |\n| v12             | v1.0.x               | `ng add @proangular/ngx-gist@~1.0.8`  |\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Development \u003ca name=\"development\"\u003e\u003c/a\u003e\n\nPlease submit all issues, and feature requests here:\n[https://github.com/ProAngular/ngx-gist/issues][url-new-issue]\n\nContribution:\n\n1. Clone the repo and create a new branch:\n\n- `git clone https://github.com/ProAngular/ngx-gist.git`\n- `git checkout -b username/feature-or-bug-description`\n\n2. Bump up the version of package in `package.json` and `package-lock.json`,\n   commit all changes, push.\n\n- `git add -A`\n- `git commit -m \"My commit message\"`\n- `git push origin username/feature-or-bug-description`\n\n3. Submit code in published PR for review and approval. Add a good description\n   and link any possible user stories or bugs.\n\n- [Create a new pull request](https://github.com/ProAngular/ngx-gist/compare).\n\n4. Allow CI actions to completely run and verify files.\n5. Add/ping reviewers and await approval.\n\nThank you for any and all contributions!\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Licensing \u003ca name=\"licensing\"\u003e\u003c/a\u003e\n\nThis project is licensed under the **MIT** License. See the\n[LICENSE](LICENSE.md) file for the pertaining license text.\n\n`SPDX-License-Identifier: MIT`\n\n\u003cp align=\"right\"\u003e[ \u003ca href=\"#index\"\u003eIndex\u003c/a\u003e ]\u003c/p\u003e\n\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\u003c!----------------------------------------------------------------------------\u003e\n\n## Wrapping Up \u003ca name=\"wrapping-up\"\u003e\u003c/a\u003e\n\nThank you to the entire Angular team and community for such a great framework to\nbuild upon. If you have any questions, please let me know by opening an issue\n[here][url-new-issue].\n\n| Type                                                                      | Info                                                           |\n| :------------------------------------------------------------------------ | :------------------------------------------------------------- |\n| \u003cimg width=\"48\" src=\".github/images/ng-icons/email.svg\" /\u003e                | webmaster@codytolene.com                                       |\n| \u003cimg width=\"48\" src=\".github/images/simple-icons/github.svg\" /\u003e           | https://github.com/sponsors/CodyTolene                         |\n| \u003cimg width=\"48\" src=\".github/images/simple-icons/buymeacoffee.svg\" /\u003e     | https://www.buymeacoffee.com/codytolene                        |\n| \u003cimg width=\"48\" src=\".github/images/simple-icons/bitcoin-btc-logo.svg\" /\u003e | bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt |\n\nFin. Happy programming friend!\n\nCody Tolene\n\n\u003c!-- LINKS --\u003e\n\n[url-new-issue]: https://github.com/ProAngular/ngx-gist/issues\n[url-node-js]: https://nodejs.org/\n","funding_links":["https://github.com/sponsors/ProAngular","https://github.com/sponsors/CodyTolene","https://www.paypal.me/CodyTolene","https://www.buymeacoffee.com/codytolene"],"categories":["Third Party Components","Recently Updated"],"sub_categories":["Viewers","[Feb 10, 2025](/content/2025/02/10/README.md)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FProAngular%2Fngx-gist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FProAngular%2Fngx-gist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FProAngular%2Fngx-gist/lists"}