Prism. js in Angular работает для первого блока кода (подсветка синтаксиса кода) - PullRequest
Новая
       32

Prism. js in Angular работает для первого блока кода (подсветка синтаксиса кода)

1 голос
/ 05 марта 2020

Согласно этой статье

После установки следующего пакета 

npm install prismjs --save

Затем я создал службу с именем: HighlightService 

import { Injectable } from '@angular/core';

import 'prismjs';
import 'prismjs/plugins/toolbar/prism-toolbar';
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';

declare var Prism: any;

@Injectable()
export class HighlightService {
    constructor() { }

    highlightAll() {
        Prism.highlightAll();
    }
}

Я использовал службу выше в компоненте, как показано ниже: 

export class AdminBlogDetailComponent implements AfterViewInit {
  ... 

  ngAfterViewInit(): void {
    this.highlightService.highlightAll();
  }

}

И, наконец, добавьте следующий S CSS в начало style.s css: 

@import "~prismjs/plugins/toolbar/prism-toolbar.css";
@import "~prismjs/themes/prism-okaidia";

Моя проблема в том, что вышеуказанный сервис работает для первого блока кода на странице!

Здесь Stackblitz

enter image description here

...