|
19 | 19 | [](https://www.proangular.com) |
20 | 20 | [](https://gitter.im/ProAngular/community) |
21 | 21 | [](https://discord.com/channels/1003103094588055552) |
22 | | -[](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml) |
23 | | -[](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml) |
24 | 22 | [](https://github.com/sponsors/ProAngular) |
25 | 23 | [](/LICENSE) |
| 24 | +[](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml) |
| 25 | +[](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml) |
26 | 26 |
|
27 | 27 | <!-- |
28 | 28 | []() |
@@ -104,12 +104,30 @@ export class FeatureModule { } |
104 | 104 |
|
105 | 105 | ## Dependencies |
106 | 106 |
|
107 | | -### Styling |
| 107 | +### Styling UX - Angular Material |
108 | 108 |
|
109 | 109 | 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! |
110 | 110 |
|
111 | 111 | More information on theming Angular Material: https://material.angular.io/guide/theming |
112 | 112 |
|
| 113 | +### Styling UX Code Snippets - Highlight.js |
| 114 | + |
| 115 | +You can pass in any theme name (string, excluding the file extension ".css") to the input `codeTheme` on _any_ `ngx-gist` element on a single page which will apply the theme to that pages gists. |
| 116 | + |
| 117 | +You can find the available styles here: https://unpkg.com/browse/highlight.js@11.6.0/styles/ |
| 118 | + |
| 119 | +Alternatively if you only want to use one style across the whole project or just apply to specific features, I recommend importing the styles directly. To do this install the `highlight.js` package and apply the style. Example below: |
| 120 | + |
| 121 | +```bash |
| 122 | +npm install highlight.js --save |
| 123 | +``` |
| 124 | + |
| 125 | +```diff |
| 126 | +... |
| 127 | ++ @import "highlight.js/styles/github.css"; |
| 128 | +... |
| 129 | +``` |
| 130 | + |
113 | 131 | ### Core Packages |
114 | 132 |
|
115 | 133 | 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. |
@@ -216,10 +234,10 @@ Line numbers are enabled by default, but you can turn them off like so. |
216 | 234 |
|
217 | 235 | | Input Name | Input Typing | Default Value | Description | |
218 | 236 | | ------------------------ | ------------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | |
219 | | -| **codeTheme** | `HighlightJsTheme` (string) | `'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. | |
| 237 | +| **codeTheme** | `HighlightJsTheme \| undefined` | `undefined` | 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. Available themes here: https://unpkg.com/browse/highlight.js@11.6.0/styles/ | |
220 | 238 | | **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. | |
221 | 239 | | **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. | |
222 | | -| **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 `TH1515TH3G15T1D` in: https://gist.github.com/YourUserName/TH1515TH3G15T1D. Alternatively, provide a value directly in the sibling input `gist`. | |
| 240 | +| **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 `TH1515TH3G15T1D` in: https://gist.github.com/YourUserName/TH1515TH3G15T1D. Alternatively, provide a value directly in the sibling input `gist`. | |
223 | 241 | | **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. | |
224 | 242 | | **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` | |
225 | 243 | | **showLineNumbers** | `bool` | `true` | Display or hide the line numbers in your gist code snippets. | |
|
0 commit comments