Для отображения исходного кода на веб-странице с использованием Angular вы можете использовать библиотеку Prism.js.
1. Установите Prism.js в свой проект Angular с помощью npm:
```
npm install prismjs --save
```
2. Создайте сервис CodeHighlightService для загрузки и инициализации стилей Prism.js:
```typescript
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CodeHighlightService {
private isInitialized = false;
constructor() {}
initialize() {
if (!this.isInitialized) {
// Загрузка и инициализация стилей Prism.js
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js';
script.onload = () => {
this.isInitialized = true;
Prism.highlightAll();
};
document.head.appendChild(script);
}
}
}
```
3. В компоненте, где вы хотите отобразить код, вызовите метод `initialize()` сервиса CodeHighlightService при загрузке компонента:
```typescript
import { Component, OnInit } from '@angular/core';
import { CodeHighlightService } from './code-highlight.service';
@Component({
selector: 'app-code',
templateUrl: './code.component.html',
styleUrls: ['./code.component.css']
})
export class CodeComponent implements OnInit {
constructor(private codeHighlightService: CodeHighlightService) { }
ngOnInit(): void {
this.codeHighlightService.initialize();
}
}
```
4. В шаблоне компонента используйте тег `<pre>` для обертывания блока кода и добавьте класс `language-<lang>` для языка программирования (php/java/js), чтобы Prism.js использовал соответствующий синтаксический подсветчик:
```html
<pre class="language-php">
<code>
<?php
// Ваш код PHP здесь
?&rt;
</code>
</pre>
<pre class="language-java">
<code>
// Ваш код Java здесь
</code>
</pre>
<pre class="language-javascript">
<code>
// Ваш код JavaScript здесь
</code>
</pre>
```
5. Подключите стили Prism.js в файле `angular.json`:
```json
"styles": [
// Другие стили...
"node_modules/prismjs/themes/prism-tomorrow.css"
],
```
Теперь блоки кода на вашей веб-странице будут отображаться с подсветкой синтаксиса для соответствующего языка программирования и будут кликабельными для копирования.
