User: Пользователь отправляет сообщение в чат. Сообщение он форматирует, например, начинает с новой строки, вставляет код и т.д. Но в чат оно вставляется сплошным текстом, без форматирования. Как обработать текст сообщения в js перед выводом на экран, чтобы сохранялось форматирование? сейчас работает так prompt = document.getElementById('prompt').value; var parent = document.getElementById('parent'); parent.insertAdjacentHTML("beforeEnd", `<div data-v-7f9493dd="" class="container user" id="user"><div data-v-7f9493dd="" class="message" id="message"><div data-v-7f9493dd="" id="post"><p>${prompt}</p></div></div></div>`);
Assistant: Чтобы сохранить форматирование текста в сообщении, можно использовать несколько подходов. Один из наиболее простых способов — это преобразовать специальные символы в HTML. Например, заменить символы новой строки на теги `<br>`, а также экранировать специальные символы HTML, такие как `<`, `>`, `&`, чтобы они не нарушали структуру HTML.

Вот пример того, как можно обработать текст для сохранения форматирования:

```javascript
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

function formatText(text) {
    // Экранировать специальные HTML символы
    let safeText = escapeHtml(text);

    // Заменить символы новой строки на <br>
    safeText = safeText.replace(/\n/g, "<br>");

    return safeText;
}

document.getElementById('sendButton').addEventListener('click', function() {
    let prompt = document.getElementById('prompt').value;
    let formattedPrompt = formatText(prompt);

    var parent = document.getElementById('parent');
    parent.insertAdjacentHTML("beforeEnd", `<div data-v-7f9493dd="" class="container user" id="user"><div data-v-7f9493dd="" class="message" id="message"><div data-v-7f9493dd="" id="post"><p>${formattedPrompt}</p></div></div></div>`);
});
```

В этом коде функция `escapeHtml` используется для экранирования символов, которые могут вызвать проблемы в HTML, а в функции `formatText` происходит замена символов новой строки на `<br>`. Таким образом, когда сообщение вставляется в HTML, форматирование будет сохранено.
User: Надо чтобы код, если он есть в сообщении выделялся как после использования hljs.highlightAll();
Assistant: Чтобы выделить код в сообщении с помощью библиотеки `highlight.js` после форматирования текста с сохранением форматирования, нам нужно обернуть фрагменты кода в соответствующие HTML-теги. Обычно для этого используют тег `<pre><code>`.

Вот как это можно сделать вместе с обработкой текста:

1. Убедитесь, что библиотека `highlight.js` подключена в вашем HTML:

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
```

2. Обновите JavaScript-код, чтобы обрабатывать код внутри сообщения.

```javascript
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

function formatText(text) {
    // Экранировать специальные HTML символы
    let safeText = escapeHtml(text);

    // Заменить символы новой строки на <br>
    safeText = safeText.replace(/\n/g, "<br>");

    // Заменить фрагменты текста, который нужно выделить как код
    // Используйте регулярные выражения для поиска фрагментов кода между ``` ... ```
    safeText = safeText.replace(/```([^]+?)```/g, function(match, p1) {
        return `<pre><code>${escapeHtml(p1)}</code></pre>`;
    });

    return safeText;
}

document.getElementById('sendButton').addEventListener('click', function() {
    let prompt = document.getElementById('prompt').value;
    let formattedPrompt = formatText(prompt);

    var parent = document.getElementById('parent');
    parent.insertAdjacentHTML("beforeEnd", `<div data-v-7f9493dd="" class="container user" id="user"><div data-v-7f9493dd="" class="message" id="message"><div data-v-7f9493dd="" id="post">${formattedPrompt}</div></div></div>`);
    
    // После добавления нового элемента, запускаем подсветку синтаксиса
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
    });
});
```

В этом примере:

- Используем регулярное выражение, чтобы найти код, который размещается между тройными обратными кавычками (`` ` ``), и оборачиваем его в теги `<pre><code>`.
- После вставки HTML-кода нового сообщения вызываем `hljs.highlightElement(block)` на элементе `<code>` для применения подсветки синтаксиса.

Теперь код в сообщении будет выделяться так, как вы хотите, с помощью `highlight.js`.
User: А если ``` встретится в комментариях кода?
Assistant: