Как красиво выводить raw код на html странице в angular?

В Angular для красивого вывода кода на HTML странице можно использовать несколько подходов.

1. Использование тега <pre>:
Тег <pre> предназначен для форматированного отображения предварительно отформатированного текста. Вы можете использовать этот тег, чтобы обернуть свой код и автоматически применить отступы и переносы строк.
Пример:

   <pre>
      <code>
         // Ваш код здесь
      </code>
   </pre>

2. Использование внешней библиотеки:
Вы также можете использовать сторонние библиотеки, такие как highlight.js или prism.js, которые предоставляют расширенные возможности для подсветки синтаксиса кода. Эти библиотеки позволяют автоматически определить язык кода и применить соответствующую подсветку.
Пример с использованием highlight.js:
**Установка библиотеки:**

   npm install highlight.js

**Импорт и использование в компоненте:**

   import hljs from 'highlight.js';
   import 'highlight.js/styles/default.css';

   @Component({
      selector: 'app-code',
      templateUrl: './code.component.html',
   })
   export class CodeComponent implements AfterViewInit {
      ngAfterViewInit() {
         hljs.highlightAll();
      }
   }

**Разметка компонента:**

   <pre><code class="hljs"> // Ваш код здесь </code></pre>

3. Использование пакетов синтаксического форматирования кода:
Веб-сайты, такие как Prettier и Beautify, предоставляют API для форматирования кода на HTML страницах. Вы можете использовать эти пакеты для автоматического форматирования вашего кода, чтобы он выглядел более читабельным на странице.
Пример с использованием Prettier:
**Установка пакета:**

   npm install prettier

**Использование в компоненте:**

   import prettier from 'prettier';

   @Component({
      selector: 'app-code',
      templateUrl: './code.component.html',
   })
   export class CodeComponent {
      formattedCode: string;

      ngOnInit() {
         const rawCode = `Ваш код здесь`;
         this.formattedCode = prettier.format(rawCode, { parser: 'babel' });
      }
   }

**Разметка компонента:**

   <pre><code>{{ formattedCode }}</code></pre>

Учтите, что эти подходы предоставляют разные возможности и требуют разных настроек. Выберите подход, который наилучшим образом соответствует вашим потребностям и требованиям дизайна.