安排/格式化html和js代码

时间:2018-07-09 14:00:05

标签: javascript linux html5

我正在寻找可以排列/格式化html&Javascript的代码/工具。网站上的大多数源代码都只有几行用于所有编码。我喜欢下载某些网站并进行一些格式化,因此每个命令都在新行中。

示例代码:

<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles/main.css"><title>Example</title><meta name="description" content="example page"><meta name="keywords" content="example"></head><body><header><img src="images/logo.png" id="img_logo"><nav><input type="image" src="images/hamburger.png" id="button_nav"><ul><li><a href="#" class="active">a</a></li><li><a href="b/">b</a></li><li><a href="c/">c</a></li></ul></nav></header><article><br><h1>Example</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Etiam tristique tristique lacus in varius.<br>Donec nec vestibulum ligula.<br>Aenean turpis diam, feugiat a luctus in, rhoncus eget risus.<br>Maecenas consequat porttitor dui, vitae consequat massa imperdiet ut. elit ut tempus lobortis,<br>eros leo molestie velit, non egestas augue nulla eget erat.</p><script>function loadScript(scriptURL) {var scriptElem = document.createElement('SCRIPT');scriptElem.setAttribute('language', 'JavaScript');scriptElem.setAttribute('src', scriptURL);document.body.appendChild(scriptElem);}</script></article><footer><a href="#">http://example.com/</a><br></footer></body></html>

格式化的输出:

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/main.css">
    <title>Example</title>
    <meta name="description" content="example page">
    <meta name="keywords" content="example">
</head>
<body>
<header>
<img src="images/logo.png" id="img_logo">
<nav>
<input type="image" src="images/hamburger.png" id="button_nav">
<ul>
    <li><a href="#" class="active">a</a></li>
    <li><a href="b/">b</a></li>
    <li><a href="c/">c</a></li>
</ul>
</nav>
</header>
<article>
<br>
<h1>Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Etiam tristique tristique lacus in varius.<br>
Donec nec vestibulum ligula.<br>
Aenean turpis diam, feugiat a luctus in, rhoncus eget risus.<br>
Maecenas consequat porttitor dui, vitae consequat massa imperdiet ut. elit ut tempus lobortis,<br>
eros leo molestie velit, non egestas augue nulla eget erat.</p>
<script>
function loadScript(scriptURL) {
    var scriptElem = document.createElement('SCRIPT');
    scriptElem.setAttribute('language', 'JavaScript');
    scriptElem.setAttribute('src', scriptURL);
    document.body.appendChild(scriptElem);
}
</script>
</article>
<footer>
<a href="#">http://example.com/</a><br>
</footer>
</body>
</html>

我该如何进行这项工作? 我不在乎如何存档它,只要我可以使用linux即可。

1 个答案:

答案 0 :(得分:-1)

假设您已经安装了Node.js,如果安装了https://www.npmjs.com/package/html-cli,则可以为您完成这项工作。有关详细信息,请参见description