Edit

Unformatted

Config Key: unformatted

Description: List of tags (defaults to inline) that should not be reformatted

Available since version: 0.7.0 (Current: npm)

Type: array of strings

Default: ["a","abbr","area","audio","b","bdi","bdo","br","button","canvas","cite","code","data","datalist","del","dfn","em","embed","i","iframe","img","input","ins","kbd","keygen","label","map","mark","math","meter","noscript","object","output","progress","q","ruby","s","samp","select","small","span","strong","sub","sup","svg","template","textarea","time","u","var","video","wbr","text","acronym","address","big","dt","strike","tt","pre","h1","h2","h3","h4","h5","h6"]

Support

Languages: HTML, Handlebars, Liquid, Mustache, XML

Beautifiers: JS-Beautify

Comparison Table

LanguageJS-Beautify
HTML✅
Handlebars✅
Liquid✅
Mustache✅
XML✅

Examples

Invisible characters are shown with the following symbols:

Carriage Return = ␍; Line Feed = ␊; Tab = ⇥; Whitespace = ·.

🚧 Original Code

<div>␊
<h1>Unformatted</h1>␊
<div>␊
<span>Un<span>formatted</span></span>␊
</div>␊
<span><span>For</span><span>mat</span><span>ted</span></span>␊
<div><div>For</div><div>mat</div><div>ted</div></div>␊
</div>␊

🔧 []

Using JS-Beautify beautifier:

<div>␊
··<h1>Unformatted</h1>␊
··<div>␊
····<span>Un<span>formatted</span></span>␊
··</div>␊
··<span><span>For</span><span>mat</span><span>ted</span></span>␊
··<div>␊
····<div>For</div>␊
····<div>mat</div>␊
····<div>ted</div>␊
··</div>␊
</div>

How to configure A .unibeautify.json file would look like the following:

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "unformatted": [],
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: 
===================================================================
---     Original
+++     Beautified
@@ -1,8 +1,12 @@
 <div>␊
-<h1>Unformatted</h1>␊
-<div>␊
-<span>Un<span>formatted</span></span>␊
-</div>␊
-<span><span>For</span><span>mat</span><span>ted</span></span>␊
-<div><div>For</div><div>mat</div><div>ted</div></div>␊
-</div>␊
+··<h1>Unformatted</h1>␊
+··<div>␊
+····<span>Un<span>formatted</span></span>␊
+··</div>␊
+··<span><span>For</span><span>mat</span><span>ted</span></span>␊
+··<div>␊
+····<div>For</div>␊
+····<div>mat</div>␊
+····<div>ted</div>␊
+··</div>␊
+</div>
\ No newline at end of file

🔧 ["a","abbr","area","audio","b","bdi","bdo","br","button","canvas","cite","code","data","datalist","del","dfn","em","embed","i","iframe","img","input","ins","kbd","keygen","label","map","mark","math","meter","noscript","object","output","progress","q","ruby","s","samp","select","small","span","strong","sub","sup","svg","template","textarea","time","u","var","video","wbr","text","acronym","address","big","dt","strike","tt","pre","h1","h2","h3","h4","h5","h6"]

Using JS-Beautify beautifier:

<div>␊
··<h1>Unformatted</h1>␊
··<div>␊
····<span>Un<span>formatted</span></span>␊
··</div>␊
··<span><span>For</span><span>mat</span><span>ted</span></span>␊
··<div>␊
····<div>For</div>␊
····<div>mat</div>␊
····<div>ted</div>␊
··</div>␊
</div>

How to configure A .unibeautify.json file would look like the following:

{
  "HTML": {
    "indent_size": 2,
    "indent_char": " ",
    "unformatted": [
      "a",
      "abbr",
      "area",
      "audio",
      "b",
      "bdi",
      "bdo",
      "br",
      "button",
      "canvas",
      "cite",
      "code",
      "data",
      "datalist",
      "del",
      "dfn",
      "em",
      "embed",
      "i",
      "iframe",
      "img",
      "input",
      "ins",
      "kbd",
      "keygen",
      "label",
      "map",
      "mark",
      "math",
      "meter",
      "noscript",
      "object",
      "output",
      "progress",
      "q",
      "ruby",
      "s",
      "samp",
      "select",
      "small",
      "span",
      "strong",
      "sub",
      "sup",
      "svg",
      "template",
      "textarea",
      "time",
      "u",
      "var",
      "video",
      "wbr",
      "text",
      "acronym",
      "address",
      "big",
      "dt",
      "strike",
      "tt",
      "pre",
      "h1",
      "h2",
      "h3",
      "h4",
      "h5",
      "h6"
    ],
    "beautifiers": [
      "JS-Beautify"
    ]
  }
}

Difference from original

Index: a,abbr,area,audio,b,bdi,bdo,br,button,canvas,cite,code,data,datalist,del,dfn,em,embed,i,iframe,img,input,ins,kbd,keygen,label,map,mark,math,meter,noscript,object,output,progress,q,ruby,s,samp,select,small,span,strong,sub,sup,svg,template,textarea,time,u,var,video,wbr,text,acronym,address,big,dt,strike,tt,pre,h1,h2,h3,h4,h5,h6
===================================================================
--- a,abbr,area,audio,b,bdi,bdo,br,button,canvas,cite,code,data,datalist,del,dfn,em,embed,i,iframe,img,input,ins,kbd,keygen,label,map,mark,math,meter,noscript,object,output,progress,q,ruby,s,samp,select,small,span,strong,sub,sup,svg,template,textarea,time,u,var,video,wbr,text,acronym,address,big,dt,strike,tt,pre,h1,h2,h3,h4,h5,h6 Original
+++ a,abbr,area,audio,b,bdi,bdo,br,button,canvas,cite,code,data,datalist,del,dfn,em,embed,i,iframe,img,input,ins,kbd,keygen,label,map,mark,math,meter,noscript,object,output,progress,q,ruby,s,samp,select,small,span,strong,sub,sup,svg,template,textarea,time,u,var,video,wbr,text,acronym,address,big,dt,strike,tt,pre,h1,h2,h3,h4,h5,h6 Beautified
@@ -1,8 +1,12 @@
 <div>␊
-<h1>Unformatted</h1>␊
-<div>␊
-<span>Un<span>formatted</span></span>␊
-</div>␊
-<span><span>For</span><span>mat</span><span>ted</span></span>␊
-<div><div>For</div><div>mat</div><div>ted</div></div>␊
-</div>␊
+··<h1>Unformatted</h1>␊
+··<div>␊
+····<span>Un<span>formatted</span></span>␊
+··</div>␊
+··<span><span>For</span><span>mat</span><span>ted</span></span>␊
+··<div>␊
+····<div>For</div>␊
+····<div>mat</div>␊
+····<div>ted</div>␊
+··</div>␊
+</div>
\ No newline at end of file

← Unescape StringsWrap Attributes →