Add a GitHub gist to your angular 13 project in an instant.

Table of Contents

• Live Demo
• Installation
• Usage
• Author

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

Import NgxGgistModule in your app

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

• blog
• github/jocelo
• twitter/jocelodev