Add a GitHub gist to your angular 13 project in an instant.
Install with NPM
npm install ngx-ggist
If you get dependency errors, as a temporary solution you can force the installation:
npm install -f ngx-ggist
import { NgxGgistModule } from 'ngx-ggist';
@NgModule({
imports: [
NgxGgistModule
],
...
})
export class AppModule { }
Place the component anywhere in your template to display the gist.
<ngx-ggist></ngx-ggist>
When you add the component to your project (as shown above), you will get the Hello world version of it. That's cool but, to show your own gists, you need to provide a couple of options to the component.
You will need just two properties: your user name
and the script id
: you can get both from the url of the GitHub gist, or when you copy the script for embedding the gist.
Optionally, you could also provide width
, height
, and a cool feature to highlight
lines.
There are more configurations available, optional.
Name | Type | Description |
---|---|---|
user | string |
Your GitHub user |
scriptId | string |
The script id of your gist, usually the last parameter in the URL. (i.e. 4171e2f2b5ea64bdf974d6d2e5683cce) |
width | string |
A string to define the width of the gist container; default: 600px (i.e. '100%') |
height | string |
A string to define the height of the gist container; default: inherit (i.e. '400px') |
lines | array of number |
An array of numbers. Each number represents a line in your gist file and that line will be highlighted; none are highlighted by default. (i.e. [1, 2, 3]) |
Example below, will display the gist 417...cce
, on a 400px
height container, highlighting lines 1, 2, 3
.
<ngx-ggist
user="jocelo"
scriptId="4171e2f2b5ea64bdf974d6d2e5683cce"
height="400px"
[lines]="[1,2,3]" >
</ngx-ggist>
Alfredo Alonso