1.3.1 • Published 9 months ago
beauty-html v1.3.1
beauty-html
comment: <> ([(https://circleci.com/gh/riversun/xml-beautify/tree/master.svg?style=shield)](https://circleci.com/gh/riversun/xml-beautify/tree/master))
beauty-html - pretty-print text in HTML and XML formats.
){kind=link}
It is licensed under MIT license.
This is an upgraded version of xml beautify of Tom Misawa/riversun (https://github.com/riversun/xml-beautify.git)
How to use?
var beautifiedHTMLText = new BeautyHtml().beautify(srcHtmlText,
{
indent: " ", //indent pattern like white spaces
useSelfClosingElement: true, //true:use self-closing element when empty element.
textContentOnDifferentLine: false // false: will write all the text together with its tags and siblings. true: will make a different line for each text fragment
});Example of result
BEFORE source XML
<?xml version="1.0" encoding="utf-8"?><example version="2.0">
<head>
<title>Original Title</title>
</head>
<body>
<element message="Greeting" title="Chapter1">
<element message="We say good morning in the morning."></element><element message="We say hello at noon."/>
<element message="We say good evening at night."/>
</element>
<element message="Thank" title="Chapter2">
<element>value</element>
<element></element><foo><![CDATA[ < > & ]]></foo>
</element>
</body>
</example>AFTER beautified XML
<?xml version="1.0" encoding="utf-8"?>
<example version="2.0">
<head>
<title>Original Title</title>
</head>
<body>
<element message="Greeting" title="Chapter1">
<element message="We say good morning in the morning." />
<element message="We say hello at noon." />
<element message="We say good evening at night." />
</element>
<element message="Thank" title="Chapter2">
<element>value</element>
<element />
<foo><![CDATA[ < > & ]]></foo>
</element>
</body>
</example>Install
install via npm
npm install beauty-htmluse from CDN
<script src="https://cdn.jsdelivr.net/npm/xml-beautify@1.2.3/dist/BeautyHtml.js"></script>Demo
demo on the web
https://felipet007.github.io/beauty-html.html
demo on node.js
clone this project and type
git clone https://github.com/Felipet007/beauty-html.git
npm startRun on Browser
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://cdn.jsdelivr.net/npm/xml-beautify@1.2.3/dist/BeautyHtml.js"></script>
<script>
const srcXmlText = `<?xml version="1.0" encoding="utf-8"?><example version="2.0">
<head>
<title>Original Title</title>
</head>
<body>
<element message="Greeting" title="Chapter1">
<element message="We say good morning in the morning."></element><element message="We say hello at noon."/>
<element message="We say good evening at night."/>
</element>
<element message="Thank" title="Chapter2">
<element>value</element>
<element></element>
</element>
</body>
</example>`;
const beautifiedXmlText = new BeautyHtml().beautify(srcXmlText);
console.log(beautifiedXmlText);
</script>
</body>
</html>Run on Node.js
To run BeautyHtml on node.js, need to install an external DOMParser like as follows.
npm install xmldom And specify it as follows,
new BeautyHtml({parser: DOMParser})- Example for Node.js
const BeautyHtml = require('beauty-html');
const { DOMParser } = require('xmldom');// When used in a node.js environment, DOMParser is needed.
const srcXmlText = `<?xml version="1.0" encoding="utf-8"?><example version="2.0">
<head>
<title>Original Title</title>
</head>
<body>
<element message="Greeting" title="Chapter1">
<element message="We say good morning in the morning."></element><element message="We say hello at noon."/>
<element message="We say good evening at night."/>
</element>
<element message="Thank" title="Chapter2">
<element>value</element>
<element></element>
</element>
</body>
</example>`;
const beautifiedXmlText = new BeautyHtml({ parser: DOMParser }).beautify(srcXmlText);
console.log(beautifiedXmlText);