• Information
• Description
• Demo
• Installation
  • Prerequisites
  • Install Component
• Usage
• Component API
• Compatibility
• Development
• Licensing
• Wrapping Up

What is Gist? Gist is an easy method to share snippets or excerpts of data with others. A gist can be a string of code, a bash script or some other small piece of data. These bits of information are hosted by GitHub as a repository.

More info in the following links:

• Little Known Ways To Utilize GitHub Gists: https://www.liquidweb.com/kb/little-known-ways-to-utilize-github-gists/
• GitHub Docs: https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists
• Create a gist: https://gist.github.com/

[ Index ]

Behold, this package contains an Angular Material and HighlighJs styled element which displays your GitHub gists in a conveniant, easy to view interface. Don't have a gist? No problem, display your own code snippets by just passing in a direct model (NgxGist.create({ ... }))! All files from the remote/local gist are displayed in separate tabs for users to easily navigate. Many optional features and themes are available.

GitHub gists can be created here: https://gist.github.com/

Enjoy!

[ Index ]

Live demo here: https://www.ProAngular.com/demos/ngx-gist

[ Index ]

Using Node Package Manager (NPM) in a new terminal window run the following commands to install the required dependencies.

Angular Material

More information on theming Angular Material: https://material.angular.io/guide/theming

ng add @angular/material

HighlightJs

More information on theming HighlightJs: https://highlightjs.org/

npm install highlight.js --save

highlightjs-line-numbers.js

npm install highlightjs-line-numbers.js --save

io-ts

npm install io-ts --save
npm install io-ts-types --save

ng add @proangular/ngx-gist@latest

or

npm install @proangular/ngx-gist --save

[ Index ]

Import one or all of the following custom form components to use in your Angular application where used:

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

// Import to module
@NgModule({
  ...
  imports: [
+   NgxGistComponent,
    ...
  ],
})

...

// or component
@Component({
  ...
  imports: [
+   NgxGistComponent,
    ...
  ],
})

Decide if you'd like to display a local, or remote gist:

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 TH1515TH3G15T1D in:

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

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="TH1515TH3G15T1D"></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="TH1515TH3G15T1D" [useCache]="false"></ngx-gist>

Select a "highlight.js" code theme to apply. 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.

<ngx-gist codeTheme="github" gistId="TH1515TH3G15T1D"></ngx-gist>

Display only one specific file when your gist has many.

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

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

<ngx-gist
  [displayOnlyFileNames]="['csstest.css', 'main.ts']"
  gistId="TH1515TH3G15T1D"
></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. You can easily create a new code snippet/gist object using NgxGist.create({ ... }). Note: no "Open Gist on GitHub" link will display.

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

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

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

[ Index ]

[ Index ]

[ Index ]

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!

[ Index ]

This project is licensed under the MIT License. See the LICENSE file for the pertaining license text.

SPDX-License-Identifier: MIT

[ Index ]

Thank you to the entire Angular team and community for such a great framework to build upon. If you have any questions, please let me know by opening an issue here.

Type	Info
	webmaster@codytolene.com
	https://github.com/sponsors/CodyTolene
	https://www.buymeacoffee.com/codytolene
	bc1qfx3lvspkj0q077u3gnrnxqkqwyvcku2nml86wmudy7yf2u8edmqq0a5vnt

Fin. Happy programming friend!

Cody Tolene