You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[](https://gitter.im/ProAngular/community)
22
+
<!-- BADGE: GITHUB PACKAGES DEPLOY STATUS -->
15
23
[](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml)
24
+
<!-- BADGE: NPMJS PACKAGES DEPLOY STATUS -->
16
25
[](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml)
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.
34
+
35
+
More info in the following links:
36
+
* Little Known Ways To Utilize GitHub Gists: https://www.liquidweb.com/kb/little-known-ways-to-utilize-github-gists/
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.
42
+
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 the same model! All files from the remote/local gist are displayed in separate tabs for users to easily navigate. Many optional features and themes are available.
43
+
44
+
GitHub gists can be created here: https://gist.github.com/
24
45
25
46
Enjoy!
26
47
27
48
# Demo
28
49
29
50
TODO: Add demo here.
30
51
31
-
# Requirements
32
-
33
-
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.
34
-
35
52
# Installation
36
53
37
54
```bash
@@ -55,6 +72,37 @@ Import `NgxGistModule` where needed
55
72
],
56
73
...
57
74
})
75
+
export class FeatureModule { }
76
+
```
77
+
78
+
# Dependencies
79
+
80
+
### Styling
81
+
82
+
You should have an Angular Material theme set up prior to using this, but it's not strictly neccessary. Disabled by default, you can alternatively use the `materialTheme` component input (see API documentation below) to auto load a pre-defined Angular Material theme from a CDN. I don't recommend depending on the CDN or this approach, but I wanted to make it possible for you. It's also possible to use this without an angular theme and style it yourself entirely!
83
+
84
+
More information on theming Angular Material: https://material.angular.io/guide/theming
85
+
86
+
### Packages
87
+
88
+
Depending on how your project is set up, you may also need the following imports either in your `FeatureModule` for example or your root module (generally these are already imported in `AppModule` or similar, they are common features of Angular). These dependencies are needed for animating the Angular Material tabs click transition and making an HTTP request to GitHub to retrieve the remote gist information.
89
+
90
+
Try using `ngx-gist` before importing these, you'll know if you need them if you get a console error in the browser.
91
+
92
+
```diff
93
+
...
94
+
+ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
95
+
+ import { HttpClientModule } from '@angular/common/http';
96
+
...
97
+
98
+
@NgModule({
99
+
imports: [
100
+
...
101
+
+ BrowserAnimationsModule,
102
+
+ HttpClientModule,
103
+
],
104
+
...
105
+
})
58
106
export class AppModule { }
59
107
```
60
108
@@ -63,9 +111,9 @@ export class AppModule { }
63
111
1. Provide your gist id into the input `gistId`, or
64
112
2. Provide a direct `NgxGist` mobdel in the input `gist`.
65
113
66
-
Note: For example your gist id would be `TH1515th31DT0C0PY` in:
114
+
Note: For example your gist id would be `TH1515TH31DT0C0PY` in:
### Default - fetched gist (auto cached for 24 hours)
71
119
@@ -128,7 +176,7 @@ Line numbers are enabled by default, but you can turn them off like so.
128
176
|**displayOnlyFileNames**|`string \| readonly 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. |
129
177
|**hideGistLink**|`bool`|`false`| Optionally hide the gist link which opens the gist on GitHub. The gist links automatically dispaly for remote gists, but can be hidden with this feature. |
130
178
|**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. |
131
-
|**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 `TH1515th31DT0C0PY` in: https://gist.github.com/YourUserName/TH1515th31DT0C0PY. Alternatively, provide a value directly in the sibling input `gist`. |
179
+
|**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 `TH1515TH31DT0C0PY` in: https://gist.github.com/YourUserName/TH1515TH31DT0C0PY. Alternatively, provide a value directly in the sibling input `gist`. |
132
180
|**languageName**|`string \| undefined`|`undefined`| When defined, override automatic language detection [and styling] and treat all gists as this lanuage. See supported language strings here: https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md|
133
181
|**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`|
134
182
|**showLineNumbers**|`bool`|`true`| Display or hide the line numbers in your gist code snippets. |
0 commit comments