Как хранить данные для кастомного блока code?

Question

[MishaXXL]

Как хранить данные подобного формата, чтобы при их выводе из БД оставить те же отступы?
Пример из чата хабр, когда мы оборачиваем текст в тег code, как реализовать похожее, что текст у нас отображается обычно, а все, что в теге codeзапоминало свои места?

const arr = [1, 2, 3]

function count(a, b) {
  if(a > 5) {
    a = a * a
  }
  return a + b
}

Comments

[WbICHA]

А что мешает открыть девтулзы и глянуть как блок кода выглядит в хтмл?

spoiler

<pre><code data-highlighted="yes" class="hljs language-undefined">const arr = [1, 2, 3]

function count(a, b) {
  if(a &gt; 5) {
    a = a * a
  }
  return a + b
}</code ></pre>

[MishaXXL]

WbICHA, а как в БД такая строка хранится?
Ведь там много отступов, а после получения из БД, нужно ее обратно так отобразить

[Михаил Р.]

MishaXXL, с < pre>< /pre> и хранится.

[WbICHA]

MishaXXL, просто как оригинальный текст, который парсится при запросе.

Михаил Р., зачем хранить распарсеренную версию? Всё равно оригинал хранить придётся.

[MishaXXL]

WbICHA, так с <pre> text... </pre> это правильный ответ, что просто хранить тег с текстом?
Т.е. в прицепе в БД будет запись текста в таком виде?

<h1>Мой заголовок статьи</h1><pre>function foo() { ... }</pre>

Я просто не совсем понимаю, как в таком линейном формате <pre> превращенный в просто текст запомнит все отступы

[WbICHA]

MishaXXL, нет, неправильный (если речь не о рич текст эдиторе). Твоя задача хранить только то, что написал пользователь в сыром виде и только. Ты видишь какие-нибудь пре и спан, когда вот прям здесь добавляешь код или делаешь текст жирным?

[MishaXXL]

WbICHA, а как тогда правильно обрабатывать текст и хранить его в бд?

[WbICHA]

MishaXXL, да, по сути, никогда. Оригинал всё равно нужен всегда, можно разве что хранить оригинал и обработанную версию одновременно, но зачем?
А оригинал нужен всегда, потому что иначе любое изменение рендера сообщений (банально класс поменять) и всё, тебе надо думать как это всё поменять в уже готовых сообщениях во всей базе.

[MishaXXL]

WbICHA, так всё-таки вариант с тегами и<pre>?
А то я потерял ныть к чему ты ведешь

[WbICHA]

MishaXXL, при чём здесь хтмл? Ты на этом сайте видишь в своих сообщениях пре и прочие хтмл теги? Или ты видишь бб коды?

Answer 1

[Vindicar]

БД тут абсолютно ни причём. Она хранит текст в том виде, в каком ты его туда поместил, вплоть до байта.
Это браузеры по умолчанию сокращает отступы в ходе рендеринга HTML. Но есть теги вроде <pre>, которые отступы сохраняют. Также можно использовать CSS-свойство white-space со значениями pre или pre-wrap.