divで表示されるフォーマットコード

UIに基づいてコードを生成するJavascriptベースのUIを構築しています。コード生成が機能しています。コードは文字列で保存されます。私はそれを字下げして、字下げを試みましたが、私はもはやそれが分かりません。フォーマットされたコードを出す方法はありますか？divで表示されるフォーマットコード

例えば

私はこの文字列がある場合：私はこのようなoutputingてる今

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

：

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

2017-02-17 Niqql

を見てみましょう。このような

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

された出力をat htmlのコードタグ。文字列をコードタグで囲んで表示する

<code>your string</code>

またはテキスト領域を使用してください。 https://jsfiddle.net/sureshatta/k1atgn6o/1/

あなたがフォーマットされた出力をachivedしようとしている場合は.text（）テンプレートリテラルで

2017-02-17 09:48:07

は、モノスペース用のコードタグではなく、ライン分割またはインデント用ではありませんか。 – Niqql

@Niqqlはい。真実。私の2番目のソリューションは動作しますか？ –

これは表示するためには動作しますが、コードは文字列にインデントされて保存されます。表示は問題ではない、インデントはです。 – Niqql

を見て変更するために任意のタグのテキストを使用してください。

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

.html（）は、タグ付きの文字列を追加するために使用します。

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

2017-02-17 09:50:10

これは、文字列中のすべての要素をdom要素に変換します。これは望ましくありません。 – Esko

true、要素としてではなくコードとして表示したい – Niqql

$（ "。output"）を試すことができます。テキスト（ "" + string + ""）; –

正しくインデントされて色分けされたコードを表示するには、ライブラリを使用してhighlighjsなどのコードを使用できます。

自動インデントはわかりませんが、アルゴリズムはそれほど難しくありません。新しいHTMLタグを開くときには、改行と十分なスペースを追加してください（再帰によってこの方法が簡単になります）。

また、js-beautifyを使用することもできます。

2017-02-17 09:51:01

ありがとう、私はこれを読むでしょう – Niqql

答えて