Код формата, отображаемый в div

Я создаю пользовательский интерфейс на основе Javascript, который генерирует код на основе пользовательского интерфейса. У меня получилось поколение кода. код сохраняется в строке. Я пробовал форматировать его, отступая от него, но я не знаю, как это сделать. Есть ли способ отформатировать код?Код формата, отображаемый в div

Например, если у меня есть эта строка:

"<body><div><h1>Hi</h1></div></body>"

, выводимого так:

<body> 
    <div> 
    <h1> 
     Hi 
    </h1> 
    </div> 
</body>

сейчас я outputing так:

$(".output").text(string);

источник

2017-02-17 Niqql

Посмотрите в теге кода в html. Показать свою строку, обернутую кодовыми тегами

<code>your string</code>

Или используйте текстовую область. https://jsfiddle.net/sureshatta/k1atgn6o/1/

Если вы пытаетесь achived форматированный вывод, пожалуйста, посмотрите на литералов Template

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

источник

2017-02-17 09:48:07

не является кодовым тегом только для monospacing, а не для строк или отступов? – Niqql

@Niqql Да. Правда. Мое второе решение работает? –

Это будет работать, чтобы отобразить его, но код сохраняется с отступом в строке. дисплей не является проблемой, отступом является. – Niqql

.text(), используемый для изменения текста любой категории.

$(".output").text(string);

.html() используется для добавления строки с тегом.

$(".output").html(string);

источник

2017-02-17 09:50:10

Это преобразует все элементы в строку в dom-элементы, которые не нужны. – Esko

true, я хочу отображать как код не как элементы – Niqql

, а затем вы можете попробовать $ (". Output"). Text ("" + string + ""); –

Если вы хотите отобразить код, который правильно отступы и раскрашенный, вы можете использовать библиотеку, чтобы сделать это, например, highlighjs.

Я не уверен, что это автоматический отступ, но алгоритм для этого не такой уж сложный: просто добавьте новую строку и достаточно пробелов при открытии нового тега html (рекурсия сделает это проще).

Кроме того, вы можете использовать js-beautify.

источник

2017-02-17 09:51:01

спасибо, я прочитаю в этом – Niqql

ответ

Смежные вопросы