如何获得带有适当缩进的源代码

Question

我正在尝试创建一个拖放生成器。有两个部分，一个是按钮，另一个是预览部分。

我已将HTML部分附加在table上具有类.container的{​​{1}}上。现在我想获取源代码。我已经使用下面的代码来获取源代码，但是事情变得非常混乱。

我希望代码以正确的方式格式化。例如，检查下面给出的链接。拖动一个部分并检查源代码。我想获取源代码，因为您将在拖动元素后进入ck-editor构建器。 https://nazifa22.github.io/Builder---CK-Editor-/

.preview-section

$(document).ready(function(){

// This is how i append the code on .main-container
$(".container-btn").click(function(){
  $.get('./parts/main-container.html', function(data) {
     $('.preview-section').append(data);
  });
});

$(".source-btn").click(function(){
   $(".preview-section").text($(".preview-section").html());
});
  
});