无法将要点嵌入 angular 6 页
Cannot embed gist into angular 6 page
我正在尝试将一个要点嵌入到我的 angular 页面中,我不确定为什么我尝试过的每件事都不起作用。
这是我试过的:
ngx-要点
sgbj/angular-gist
angular-要点嵌入
手动使它成为嵌入它的js文件
是的,我也尝试复制并粘贴要点行(正如某些人所建议的)。
我也试过了,Prism.js,highlight.js。
Prism 确实有效,但它为每一行创建了一个非常糟糕的背景突出显示,并且无法将背景统一为代码后面的单个框。
我觉得我完全 运行 没有解决方案。
我想知道是否有更简单的方法,或者至少是实际有效的方法。
抱歉这个宽泛的问题,我知道有很多线程可以解决这个问题,相信我,我已经查看了所有线程,但找不到对我有用的东西。
这里我举了一个我在使用 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)
一切都在模块中设置
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 {}
我认为 ngx-gist 适合你。您的 gistId 似乎有错误。您收到的错误包含 URL 中 { 和 } 的编码(分别为 %7B 和 %7D)。我认为这意味着您不打算在 gistId 中使用这些字符。 ngx-gist readme 没有明确说明这些字符不应出现在最终字符串中。
尝试将标签更改为
<ngx-gist [gistId]="'blasterpal/4534675'"></ngx-gist>
让我们知道发生了什么。
我正在尝试将一个要点嵌入到我的 angular 页面中,我不确定为什么我尝试过的每件事都不起作用。
这是我试过的:
ngx-要点 sgbj/angular-gist angular-要点嵌入 手动使它成为嵌入它的js文件 是的,我也尝试复制并粘贴要点行(正如某些人所建议的)。
我也试过了,Prism.js,highlight.js。
Prism 确实有效,但它为每一行创建了一个非常糟糕的背景突出显示,并且无法将背景统一为代码后面的单个框。
我觉得我完全 运行 没有解决方案。
我想知道是否有更简单的方法,或者至少是实际有效的方法。
抱歉这个宽泛的问题,我知道有很多线程可以解决这个问题,相信我,我已经查看了所有线程,但找不到对我有用的东西。
这里我举了一个我在使用 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)
一切都在模块中设置
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 {}
我认为 ngx-gist 适合你。您的 gistId 似乎有错误。您收到的错误包含 URL 中 { 和 } 的编码(分别为 %7B 和 %7D)。我认为这意味着您不打算在 gistId 中使用这些字符。 ngx-gist readme 没有明确说明这些字符不应出现在最终字符串中。
尝试将标签更改为
<ngx-gist [gistId]="'blasterpal/4534675'"></ngx-gist>
让我们知道发生了什么。