I have the below code
$ cat index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue (no tranpile) + bootstrap</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<div class="container">
<div class="row mt-2">
<div class="col text-center">
<h1>Todo application</h1>
<div id="app"></div>
</div>
</div>
</div>
<script type="module">
<script type="module">
import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
createApp({
setup() {
const newTodo = ref(''); const todos = ref([]);
function addTodo() {
if (newTodo.value.trim()) {
todos.value.push(newTodo.value);
newTodo.value = '';}}
return { newTodo, todos, addTodo };
},
template: `
<div>
<input v-model="newTodo" @keyup.enter="addTodo">
<button @click="addTodo">Add</button>
<ul><li v-for="todo in todos" :key="todo">{{ todo }}</li></ul>
</div>`
}).mount('#app');
</script>
</body>
</html>
$
I try to get it indented like this (with the content untouched):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue (no tranpile) + bootstrap</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<div class="container">
<div class="row mt-2">
<div class="col text-center">
<h1>Todo application</h1>
<div id="app"> </div>
</div>
</div>
</div>
<script type="module">
import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
createApp({
setup() {
const newTodo = ref(''); const todos = ref([]);
function addTodo() {
if (newTodo.value.trim()) {
todos.value.push(newTodo.value);
newTodo.value = '';}}
return { newTodo, todos, addTodo };
},
template: `
<div>
<input v-model="newTodo" @keyup.enter="addTodo">
<button @click="addTodo">Add</button>
<ul><li v-for="todo in todos" :key="todo">{{ todo }}</li></ul>
</div>`
}).mount('#app');
</script>
</body>
</html>
In my context online formatters are not an option.
The best I get is with Tidy:
$ tidy -qni -ashtml index.html -o out.html
$ cat out.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue (no tranpile) + bootstrap</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity=
"sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<div class="container">
<div class="row mt-2">
<div class="col text-center">
<h1>Todo application</h1>
<div id="app"></div>
</div>
</div>
</div>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
...
</script>
</body>
</html>
$
==> No alignement of href, rel, crossorigin, integrity, ... ;(
tidy version:
$ tidy -v
HTML Tidy pour Linux version 5.6.0
$ uname -a
Linux spinoza 6.2.0-35-generic #35~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Fri Oct 6 10:23:26 UTC 2 x86_64 x86_64 x86_64 GNU/Linux
$
tidy options:
$ LANG=en tidy -h | grep -E '\-q |\-n |, \-i'
-indent, -i indent element content
-numeric, -n output numeric rather than named entities
-quiet, -q suppress nonessential output
$
You can use online HTML formatters like HTML Formatter, HTML Beautifier, or Online HTML Editor. • Copy your HTML code. • Paste it into one of these online tools. • Click the “Format” or “Beautify” button. • The tool will automatically format your code with proper indentation.