Cannot embed gist into angular 6 page

Question

I am trying to embed a gist into my angular page, I am not sure why every single thing I have tried does not work.

This is what I tried:

GithubGist

ngx-gist sgbj/angular-gist angular-gist-embed Manually make it a js file that embeds it Yes I also tried to copy and paste the gist line (as some suggest).

I also tried, Prism.js, highlight.js.

Prism does work, but for every line it creates a really bad background highlight, and cannot unify the background to be a single box behind the code.

I feel like I am completely running out of solutions.

I wonder if there is something easier, or at least something that actually works.

Sorry for the broad question, I know there are SO threads out there for this, trust me I have looked at all of them and could not find a thing that was useful for me.

Here I put an example of error I get when I use ngx-gist:

<ngx-gist [gistId]="'{blasterpal}/{4534675}'"></ngx-gist>

ngx-gist.js:22 GET https://gist.github.com/%7Bblasterpal%7D/%7B4534675%7D.js?file= net::ERR_ABORTED 404 (Not Found)

Everything is set in module

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavbarComponent } from "./components/navbar/navbar.component";
import { BlogComponent } from "./blog/blog.component";
import { IntroComponent } from "./intro/intro.component";
import { BlogPostPreviewComponent } from "./components/blog-post-preview/blog-post-preview.component";
import { HttpClientModule } from "@angular/common/http";
import { BlogService } from "./blog/blog.service";
import { BlogPostContentsComponent } from "./blog/blog-post-contents/blog-post-contents.component";
import { BlogContentTextComponent } from "./blog/blog-post-contents/blog-content-text/blog-content-text.component";
import { NgxGistModule } from "ngx-gist/dist/ngx-gist.module";

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    BlogComponent,
    IntroComponent,
    BlogPostPreviewComponent,
    BlogPostContentsComponent,
    BlogContentTextComponent
  ],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, NgxGistModule],
  providers: [BlogService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

I think ngx-gist will work for you. It seems you have an error in your gistId. The error you're receiving contains the encoding for { and } (%7B and %7D, respectively) in the URL. I think this means you are not meant to use those characters in your gistId. The ngx-gist readme doesn't make it clear these characters are not supposed to be in the final string.

Try changing the tag to

<ngx-gist [gistId]="'blasterpal/4534675'"></ngx-gist>

and let us know what happens.