Отступы форматирования кода в HTML появляются в документе

Question

Вот код HTML, который я скопировал и вставил из Anki (программы создания Flashcard). Код работает отлично. (Справочная информация: флэш-карта - это вопрос программирования)

<code><meta content="width=window-width, initial-scale=1.0" name="viewport">

What does this code do?<div><div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"=""><pre style="line-height: 25px;"><table class="highlighttable" style="font-family: Arial;"><tbody><tr><td><div 10px"="" class="linenodiv" padding-right:=""><pre style="line-height: 125%">1

< мета http-экв ="X-UA-совместимый" контент ="IE = edge" >

Код, отображаемый в браузере:

Очевидно, этот код не читается в своем текущем формате. Чтобы это исправить, я добавил соответствующие отступы.

<code><meta content="width=window-width, initial-scale=1.0" name="viewport">

What does this code do?
<div>
  <div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"="">
    <pre style="line-height: 25px;">
      <table class="highlighttable" style="font-family: Arial;">
        <tbody>
          <tr>
            <td>
              <div 10px"="" class="linenodiv" padding-right:="">
                <pre style="line-height: 125%">1

< meta < span style = "color: # 7D9029"> http-эквивалент ="X-UA-Compatible" содержание ="IE = край" >

Странная часть: вышеприведенные отступы теперь появляются в документе HTML.

Этого не должно быть, верно? Я думал, что новые строки в HTML не видны пользователям?

Answer 1

Это потому, что whitespace равен pre (сохраняется браузером). Это сделано для того, чтобы вы могли сделать отступ в коде. Обычно, когда вы хотите отобразить код в HTML, вы снимаете отступ:

<code>            <td class="code">
              <div class="highlight">
                <pre style="line-height: 125%">&lt;<span style="color: #008000; font-weight: bold">meta</span>
<span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>&gt;
                

Обратите внимание, что вам не нужно делать это на сама строка <pre> (и именно поэтому мета-часть отображается с нужным вам отступом).

Если вы собираетесь часто использовать фрагменты кода, используйте такую ​​библиотеку, как Prism js сделает вашу жизнь намного проще и будет стоить накладных расходов (на самом деле это очень легкая библиотека):

<pre><code class="language-html">(... html code ...)