В Angular для красивого вывода кода на HTML странице можно использовать несколько подходов.
- Использование тега
<pre>:
Тег <pre> предназначен для форматированного отображения предварительно отформатированного текста. Вы можете использовать этот тег, чтобы обернуть свой код и автоматически применить отступы и переносы строк.
Пример:
<pre>
<code>
// Ваш код здесь
</code>
</pre>
- Использование внешней библиотеки:
Вы также можете использовать сторонние библиотеки, такие как 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>
- Использование пакетов синтаксического форматирования кода:
Веб-сайты, такие как 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>
Учтите, что эти подходы предоставляют разные возможности и требуют разных настроек. Выберите подход, который наилучшим образом соответствует вашим потребностям и требованиям дизайна.