Ответ
```
{{ formattedCode }}` для сохранения форматирования 2. Экранируем спецсимволы HTML 3. Добавляем базовую стилизацию для читаемости 4. Можно расширить, добавив подсветку синтаксиса через Prism.js или Highlight.js
Ответ 18+ 🔞
А, ну вот, смотри, очередной компонентик для отображения кода. Как будто их мало, блядь, на свете! Но ладно, разберём эту поделку.
Так, слушай сюда, это же просто шаблон, который берёт строку с кодом и выводит её, предварительно нахуй всё заэкранировав, чтобы браузер не принял `
` за настоящий тег, а показал его как текст. Умно, да? А то без этого — пиздец, всё развалится.
Смотри, что тут происходит, ёпта:
1. **В шаблоне:** Просто `
` с каким-то классом. Внутри него — `{{ formattedCode }}`. Это типа «подставь сюда результат вот этой штуки».
2. **В скрипте:** Есть пропс `code` — туда мы и будем пихать наш код, который хотим показать. А дальше — **вычисляемое свойство** `formattedCode`. Оно, сука, берёт исходный код и делает три замены:
* `<` вместо `<`
* `>` вместо `>`
* `"` вместо `"`
Всё, больше нихуя. Никаких сложных плясок с бубном. Просто чтобы HTML-теги не исполнялись, а отображались как символы.
3. **В стилях:** Ну, подкрасили фончик, скруглили уголки, чтобы красиво было. Чисто косметика, блядь.
А внизу пример, как этим пользоваться. Пихаешь строку с кодом в атрибут `:code`, и всё, пизда — компонент сам всё заменит и покажет.
**Но тут, блядь, есть один нюанс, Карл!** Автор в конце намекает: «Можно расширить, добавив подсветку синтаксиса». Ага, щас! Потому что текущая реализация — это просто текст в серой коробочке. Никакой подсветки `class`, `function` или хуй знает чего ещё тут нет! Для этого надо тащить целые библиотеки вроде Prism.js, что уже совсем другая история, блядь.
Так что компонент так себе, базовый. Для простого вывода куска кода без подсветки — сойдёт, на коленке сделано. А если хочешь красоты — готовься ебаться с настройкой подсветки, это уже отдельный присест.