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
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.
32
48
@@ -35,19 +51,25 @@ More info in the following links:
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.
41
59
42
60
GitHub gists can be created here: https://gist.github.com/
43
61
44
62
Enjoy!
45
63
46
-
# Demo
64
+
<aname="demo"/>
65
+
66
+
## Demo
47
67
48
68
TODO: Add demo here.
49
69
50
-
# Installation
70
+
<aname="installation"/>
71
+
72
+
## Installation
51
73
52
74
```bash
53
75
ng add @proangular/ngx-gist@latest
@@ -73,15 +95,17 @@ Import `NgxGistModule` where needed
73
95
export class FeatureModule { }
74
96
```
75
97
76
-
# Dependencies
98
+
<aname="dependencies"/>
99
+
100
+
## Dependencies
77
101
78
102
### Styling
79
103
80
104
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!
81
105
82
106
More information on theming Angular Material: https://material.angular.io/guide/theming
83
107
84
-
### Packages
108
+
### Core Packages
85
109
86
110
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.
87
111
@@ -104,7 +128,11 @@ Try using `ngx-gist` before importing these, you'll know if you need them if you
104
128
export class AppModule { }
105
129
```
106
130
107
-
# Usage
131
+
See other `peerDependencies` you may need in the package.json in the root of this project.
132
+
133
+
<aname="usage"/>
134
+
135
+
## Usage
108
136
109
137
1. Provide your gist id into the input `gistId`, or
110
138
2. Provide a direct `NgxGist` mobdel in the input `gist`.
@@ -130,6 +158,16 @@ Force no cache. This will force ngx-gist to retrieve the content live from GitHu
130
158
></ngx-gist>
131
159
```
132
160
161
+
### Setting the code style theme
162
+
163
+
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.
164
+
```html
165
+
<ngx-gist
166
+
codeTheme="github"
167
+
gistId="gistId_123abc"
168
+
></ngx-gist>
169
+
```
170
+
133
171
### Displaying one specific file
134
172
135
173
Display only one specific file when your gist has many.
@@ -167,28 +205,34 @@ Line numbers are enabled by default, but you can turn them off like so.
167
205
></ngx-gist>
168
206
```
169
207
170
-
# Component API
208
+
<aname="api"/>
171
209
172
-
| Input Name | Input Typing | Default Value | Description |
|**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. |
175
-
|**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. |
176
-
|**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. |
177
-
|**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`. |
178
-
|**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|
179
-
|**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`|
180
-
|**showLineNumbers**|`bool`|`true`| Display or hide the line numbers in your gist code snippets. |
181
-
|**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. |
210
+
## Component API
182
211
183
-
# Compatibility
212
+
| Input Name | Input Typing | Default Value | Description |
|**codeTheme**|`HilightJsTheme`|`'default'`| 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. |
215
+
|**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. |
216
+
|**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. |
217
+
|**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`. |
218
+
|**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. |
219
+
|**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`|
220
+
|**showLineNumbers**|`bool`|`true`| Display or hide the line numbers in your gist code snippets. |
221
+
|**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. |
222
+
223
+
<aname="compatibility"/>
224
+
225
+
## Compatibility
184
226
185
227
| Angular version |@proangular/ngx-gist| Install |
0 commit comments