Как добавить многострочную строку шаблона в div?

Question

У меня есть шаблон строки следующим образом:

var temp = `
for i in range(10):
    print i`

Я ожидаю, что этот код шаблона должен появиться между div.
Мой div в index.html:

<div id = "code" style="height:500px;top:0;border: 1px solid black;"></div>

Мой код JavaScript, который вызывает добавление:

$('#code').append(temp);

Мой желаемый результат:

for i in range(10):
        print i 

Мой вывод:

for i in range(10):print i

Пожалуйста, предложите мне какой-нибудь способ получить желаемое в правильном интервале и линиях. Я старался (temp.split('\n')).join('<br>') это печатает temp в отдельных строках, но это не обеспечивает правильное расстояние. как это:

for i in range(10):
print i  

Answer 1

Если вы хотите отформатировать текст как есть, используйте <pre> тег.

Предварительно отформатированный текст HTML () представляет предварительно отформатированный текст. Текст в этом элементе обычно отображается непропорциональным шрифтом в точности так, как он выложен в файле. Пробелы внутри этого элемента отображаются как напечатанные.

Answer 2

Также вы можете использовать свойство CSS под названием white-space,

Это позволяет вам поставить div работать как pre или же code тег.

#code {
  white-space: pre-wrap;
}