时空索引-Angular-Gist-RunKit-PROSAGA-码农传奇

Angular Gist RunKit

Gist RunKit combines the power of Github Gist with RunKit.

Source Code

Gist-RunKit website

Gist-RunKit source code

Gist-RunKit npm

Edit on Stackblitz

Install

Install the package.

$ npm i -s ngx-gist-runkit

Add the RunKit embed library to your index page:

src/index.html

<head>
    ...
    <script src="https://embed.runkit.com"></script>
    ...
</head>

Whitelist angular-runkit in your System.js config:

src/systemjs.config.js (if applicable)

map: {
    ...
    'angular-runkit': 'npm:angular-runkit/dist/index.js',
    ...
}

Declare the component in your module:

src/app/app.module.ts

import { NgxGistRunkitModule } from 'ngx-gist-runkit'
...
@NgModule({
    ...
    imports: [
        ...
        NgxGistRunkitModule,
        ...
    ],
    ...
})

Usage

<app-ngx-gist-runkit [gistId]="gistId" [gistFileName]="gistFileName" ></app-ngx-gist-runkit>

Don’t forget to check out the RunKit embed docs.

Inputs

source : string

Basically there are two inputs one is [gistId] and second is [gistFileName].

[gistId] : is the id present after you username when you open your gist on github.

[gistFileName] : Before creating any Gist github asks for the filename you have to enter the same.

Please check below image for more details.

<app-ngx-gist-runkit [gistId]="gistId" [gistFileName]="gistFileName" ></app-ngx-gist-runkit>