An Angular Material and HighlighJs styled display box for GitHub gist and local code snippets. All files from the remote/local gist are displayed in separate tabs for users to easily navigate. Many optional features and themes are available.

Enjoy!

TODO: Add demo here.

This project uses Angular Material tabs so Angular Material must be installed and available along with its theme. You can define a theme if you use this application outside of Angular using the public API materialTheme (see below for more information). See other peer dependancies in the package description.

ng add @proangular/ngx-gist@latest

or

npm install @proangular/ngx-gist --save

Import NgxGistModule where needed

...
+ import { NgxGistModule } from '@proangular/ngx-gist';
...

@NgModule({
  imports: [
    ...
+   NgxGistModule
  ],
  ...
})
export class AppModule { }

1. Provide your gist id into the input gistId, or
2. Provide a direct NgxGist mobdel in the input gist.

Note: For example your gist id would be TH1515th31DT0C0PY in:

https://gist.github.com/YourUserName/TH1515th31DT0C0PY

ngx-gist will fetch the gist once and store it locally for 24 hours. In that timeframe, if the user returns or visits another page where this gist was previously loaded, it will reload the content without having to reach out to GitHub again.

<ngx-gist gistId="gistId_123abc"></ngx-gist>

Force no cache. This will force ngx-gist to retrieve the content live from GitHub every time this content loads. This is disabled by default, but could be useful if your gists change frequently.

<ngx-gist
  gistId="gistId_123abc"
  [useCache]="false"
></ngx-gist>

Display only one specific file when your gist has many.

<ngx-gist
  displayOnlyFileNames="super.js"
  gistId="gistId_123abc"
></ngx-gist>

You can also display any number of specific files by name.

<ngx-gist
  [displayOnlyFileNames]="['csstest.css', 'main.ts']"
  gistId="gistId_123abc"
></ngx-gist>

These are not fetched from GitHub and are brought in elsewhere from your application (seperate HTTP request, or statically for example). With this method you can display code snippets without having to create a remote gist. Also, please notice here that no "Open Gist on GitHub" link is displayed here.

<ngx-gist [gist]="localGistObject"></ngx-gist>

Line numbers are enabled by default, but you can turn them off like so.

<ngx-gist
  gistId="d55ea012b585a16a9970878d90106d74"
  [showLineNumbers]="false"
></ngx-gist>

Please submit all issues, and feature requests here: https://github.com/ProAngular/ngx-gist/issues

Contribution:

1. Clone the repo and create a new branch:

• git clone https://github.com/ProAngular/ngx-gist.git
• git checkout -b username/feature-or-bug-description

2. Bump up the version of package in package.json and package-lock.json, commit all changes, push.

• git add -A
• git commit -m "My commit message"
• git push origin username/feature-or-bug-description

3. Submit code in published PR for review and approval. Add a good description and link any possible user stories or bugs.

• Create a new pull request.

4. Allow CI actions to completely run and verify files.
5. Add/ping reviewers and await approval.

Thank you for any and all contributions!

As a husband and father of four children, your donations mean the world to me! Any donations are greatly appreciated and keep me going!

• https://www.paypal.me/CodyTolene
• https://github.com/sponsors/ProAngular

Copyright © 2022 Cody Tolene

All content is licensed under the MIT license.