How to preserve whitespace indentation of text enclosed in HTML tags excluding the current indentation level of the tag in the document?

by

Indenting With Comments

Since browsers ignore comments, you can use them to indent your pre tag contents.

Solution

<html>
  <body>
    <main>
      Here is my code with hack:
      <pre>
<!-- -->def some_function
<!-- -->  return 'Hello, World!'
<!-- -->end
      </pre>
      Here is my code without hack:
      <pre>
        def some_function
          return 'Hello, World!'
        end
      </pre>
    </main>
  <body>
</html>

NOTE: a main wrapper was added to provide enough space for the comments.

Advantages

  • No JavaScript required
  • Can be added statically
  • Minification won’t affect the indentation and reduces file size

Disadvantages

  • Requires a minimum amount of space for the comments
  • Not very elegant unless build tools are used

Removing Indentation With Node

A better solution is to remove the leading white-space using either your build process or back-end rendering process. If you are using node.js, then you can use a stream I wrote called predentation. You can use any language you want to build a similar tool.

Before

<html>
 <body>
   Here is my code:
   <pre>
     def some_function
       return 'Hello, World!'
     end
   </pre>
 </body>
</html>

After

<html>
 <body>
   Here is my code:
   <pre>
def some_function
  return 'Hello, World!'
end
   </pre>
 </body>
</html>

Advantages

  • Seamless way to write pre tags
  • Smaller output file size

Disadvantages

  • Requires a build step in your workflow
  • Does not handle non pre elements with white-space: pre added by CSS

Removing Indentation With JavaScript

See this answer to remove indentation with JavaScript

Advantages

  • Possible to target elements with white-space: pre

Disadvantages

  • JavaScript can be disabled
  • White-space adds to the file size

More Related Contents:

  1. Ignore whitespace in HTML [duplicate]
  2. Render a string in HTML and preserve spaces and linebreaks
  3. Why does HTML require that multiple spaces show up as a single space in the browser?
  4. How do I reformat HTML code using Sublime Text 2?
  5. How to display raw HTML code in PRE or something like it but without escaping it
  6. How to escape < and > inside tags
  7. HTML/CSS – Best practice for preserving white space on certain elements?
  8. When does whitespace matter in HTML?
  9. How to indent multiple levels of select optgroup with CSS?
  10. How do I tidy up an HTML file’s indentation in VI?
  11. How to insert spaces/tabs in text using HTML/CSS
  12. Specifying Tab-Width?
  13. Extra space under textarea, differs along browsers
  14. Is whitespace allowed within XML/HTML tags?
  15. Styling text input caret
  16. Can specific text character change the line height?
  17. What characters are allowed in DOM IDs? [duplicate]
  18. Make Iframe to fit 100% of container’s remaining height
  19. Change the “No file chosen”:
  20. How to center the contents of an HTML table?
  21. How to hide Table Row Overflow?
  22. Is there any benefit to adding accept-charset=”UTF-8″ to HTML forms, if the page is already in UTF-8?
  23. How to escape HTML in node.js EJS view?
  24. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  25. What does #document mean?
  26. Tab character instead of multiple non-breaking spaces (“nbsp”)?
  27. String attribute values in multiple lines, HTML
  28. How much faster is it to use inline/base64 images for a web site than just linking to the hard file?
  29. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  30. HTML canvas with scrollbar

Leave a Comment