Formatting HTML code copied from Inspector Element

Question

I have a problem when i copied a code from chrome elements inspector to sublimetext 3, the javascript code have a good format but the html code is showen in one long line, this code have manu div tags.

exemple :

<div id="cmp_name-triggerWrap" data-ref="triggerWrap" class="x-form-trigger-wrap x-form-trigger-wrap-default"><div id="cmp_name-inputWrap" data-ref="inputWrap" class="x-form-text-wrap x-form-text-wrap-default"><input id="cmp_name-inputEl" data-ref="inputEl" type="text" role="textbox" size="1" name="msn_name" placeholder="Name/NO." style="color:gray;font-weight:normal" class="x-form-field x-form-empty-field x-form-empty-field-default x-form-text x-form-text-default " autocomplete="off" componentid="cmp_name"></div></div></div></div></div></div></div></div><div class="x-panel x-column x-panel-default" style="margin: 2px 10px; width: 252px; height: 29px;" id="panel-1012"><div id="panel-1012-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" role="presentation" style="left: 0px; top: 0px; width: 252px; height: 29px;"><div id="panel-1012-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt" role="presentation" style="width: 100%; table-layout: fixed;"><div id="panel-1012-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt" role="presentation"><div class="x-field x-form-item x-form-item-default x-form-type-text x-field-default x-autocontainer-form-item x-form-item-no-label" style="width:100%;" id="cmp_addr_type"><label id="cmp_addr_type-labelEl" data-ref="labelEl" class="x-form-item-label x-form-item-label-default x-form-item-label-right x-unselectable" style="padding-right:5px;width:25px;" for="cmp_addr_type-inputEl"><span class="x-form-item-label-inner x-form-item-label-inner-default" style="width:20px"></span></label><div id="cmp_addr_type-bodyEl" data-ref="bodyEl" class="x-form-item-body x-form-item-body-default x-form-text-field-body x-form-text-field-body-default "><div id="cmp_addr_type-triggerWrap" data-ref="triggerWrap" class="x-form-trigger-wrap x-form-trigger-wrap-default"><div id="cmp_addr_type-inputWrap" data-ref="inputWrap" class="x-form-text-wrap x-form-text-wrap-default"><input id="cmp_addr_type-inputEl" data-ref="inputEl" type="text" role="combobox" size="1" name="msn_addr_type" placeholder="Address Type" readonly="readonly" style="color:gray;font-weight:normal" class="x-form-field x-form-empty-field x-form-empty-field-default x-form-text x-form-text-default " autocomplete="off" componentid="cmp_addr_type"></div><div id="cmp_addr_type-trigger-picker" class="x-form-trigger x-form-trigger-default x-form-arrow-trigger x-form-arrow-trigger-default "></div><div id="cmp_addr_type-trigger-clear" class="x-form-trigger x-form-trigger-default x-form-clear-trigger x-form-clear-trigger-default "></div></div></div></div>*

thnaks

Answer 1

I'm using a plugin for similar tasks: Prettify.

Applying to your sample yields the following:

<div id="cmp_name-triggerWrap" data-ref="triggerWrap" class="x-form-trigger-wrap x-form-trigger-wrap-default">
  <div id="cmp_name-inputWrap" data-ref="inputWrap" class="x-form-text-wrap x-form-text-wrap-default"><input
      id="cmp_name-inputEl" data-ref="inputEl" type="text" role="textbox" size="1"
      name="msn_name" placeholder="Name/NO." style="color:gray;font-weight:normal"
      class="x-form-field x-form-empty-field x-form-empty-field-default x-form-text x-form-text-default  "
      autocomplete="off" componentid="cmp_name"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="x-panel x-column x-panel-default" style="margin: 2px 10px; width: 252px; height: 29px;"
  id="panel-1012">
  <div id="panel-1012-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl"
    role="presentation" style="left: 0px; top: 0px; width: 252px; height: 29px;">
    <div id="panel-1012-outerCt" data-ref="outerCt" class="x-autocontainer-outerCt"
      role="presentation" style="width: 100%; table-layout: fixed;">
      <div id="panel-1012-innerCt" data-ref="innerCt" style="" class="x-autocontainer-innerCt"
        role="presentation">
        <div class="x-field x-form-item x-form-item-default x-form-type-text x-field-default x-autocontainer-form-item x-form-item-no-label"
          style="width:100%;" id="cmp_addr_type"><label id="cmp_addr_type-labelEl"
            data-ref="labelEl" class="x-form-item-label x-form-item-label-default  x-form-item-label-right x-unselectable"
            style="padding-right:5px;width:25px;" for="cmp_addr_type-inputEl"><span
              class="x-form-item-label-inner x-form-item-label-inner-default"
              style="width:20px"></span></label>
          <div id="cmp_addr_type-bodyEl" data-ref="bodyEl" class="x-form-item-body x-form-item-body-default x-form-text-field-body x-form-text-field-body-default  ">
            <div id="cmp_addr_type-triggerWrap" data-ref="triggerWrap" class="x-form-trigger-wrap x-form-trigger-wrap-default">
              <div id="cmp_addr_type-inputWrap" data-ref="inputWrap" class="x-form-text-wrap x-form-text-wrap-default"><input
                  id="cmp_addr_type-inputEl" data-ref="inputEl" type="text"
                  role="combobox" size="1" name="msn_addr_type" placeholder="Address Type"
                  readonly="readonly" style="color:gray;font-weight:normal"
                  class="x-form-field x-form-empty-field x-form-empty-field-default x-form-text x-form-text-default  "
                  autocomplete="off" componentid="cmp_addr_type"></div>
              <div id="cmp_addr_type-trigger-picker" class="x-form-trigger x-form-trigger-default x-form-arrow-trigger x-form-arrow-trigger-default "></div>
              <div id="cmp_addr_type-trigger-clear" class="x-form-trigger x-form-trigger-default x-form-clear-trigger x-form-clear-trigger-default  "></div>
            </div>
          </div>
        </div>

(because your original code is invalid HTML and has unbalanced tags)