首页 > 解决方案 > 排列/格式化html和js代码

问题描述

我正在寻找可以安排/格式化 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 做到这一点。

标签: javascriptlinuxhtml

解决方案


假设您安装了Node.js,如果是这样,那么https://www.npmjs.com/package/html-cli可以为您完成这项工作。有关详细信息,请参阅说明


推荐阅读