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
Copy file name to clipboardExpand all lines: README.md
+22-13Lines changed: 22 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -20,15 +20,17 @@
20
20
21
21
# Description
22
22
23
-
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!
23
+
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.
24
+
25
+
Enjoy!
24
26
25
27
# Demo
26
28
27
29
TODO: Add demo here.
28
30
29
31
# Requirements
30
32
31
-
This project uses Angular Material tabs so an Angular Material must be installed and available along with a 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.
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.
32
34
33
35
# Installation
34
36
@@ -58,6 +60,13 @@ export class AppModule { }
58
60
59
61
# Usage
60
62
63
+
1. Provide your gist id into the input `gistId`, or
64
+
2. Provide a direct `NgxGist` mobdel in the input `gist`.
65
+
66
+
Note: For example your gist id would be `TH1515th31DT0C0PY` in:
### Default - fetched gist (auto cached for 24 hours)
62
71
63
72
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.
@@ -87,7 +96,7 @@ Display only one specific file when your gist has many.
87
96
88
97
### Displaying multiple, specific files
89
98
90
-
Display only one specific file when your gist has many.
99
+
You can also display any number of specific files by name.
|**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. |
120
-
|**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. |
121
-
|**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. |
122
-
|**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/FakeUserName/TH1515th31DT0C0PY. Alternatively, provide a value directly in the sibling input `gist`. |
123
-
|**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|
124
-
|**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`|
125
-
|**showLineNumbers**| bool |`true`| Display or hide the line numbers in your gist code snippets. |
126
-
|**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. |
126
+
| 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. |
129
+
|**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
+
|**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`. |
132
+
|**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
+
|**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
+
|**showLineNumbers**|`bool`|`true`| Display or hide the line numbers in your gist code snippets. |
135
+
|**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. |
0 commit comments