GitHub gist on Angular 13
Add a GitHub gist to your angular 13 project in an instant.
Table of Contents
Installation
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
Usage
NgxGgistModule
in your app
Import import { NgxGgistModule } from 'ngx-ggist';
@NgModule({
imports: [
NgxGgistModule
],
...
})
export class AppModule { }
Use Github Gist directive
Place the component anywhere in your template to display the gist.
<ngx-ggist></ngx-ggist>
Custom Properties
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]) |
More examples
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>
Author
Alfredo Alonso