Question 275402 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – How to better control on automatic HTML indentation

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">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
</script>
</body>
</html>
$

I try to get it indented like this:

<!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 } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    </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
$
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Getting close, this is what I get with (not bad):

    :'<,'>!tidy -qni -ashtml --indent-attributes yes -w 140

    <!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>

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search