Can't create wanted code-indentations

Help
1

Hi all,
still being a real beginner, I have not understood how to achieve nice indented code in the _site output files.

After repeated searches failed my hope is to get a more clear picture of this here.

Firstly, if a comprehensive help text would exist somewhere, I’d like to read it.

Else, the basic quest seems simple:

In the output, I want something nicely indented like:

<html lang="...">
  <head>
    <meta name="...">
    ...
    <link rel="...">
    ...
  </head>
  ...
  ...
</html>

Now, since include-files and liquid statements are existing in various places, this is somewhat more complex and I didn’t manage yet to to so.

Could someone explain general rules for this? Thereafter I would try to follow and get back with a dedicated sample piece of code, if problems continue.

Thanks for your help in advance!
Uli

2

Why would you want pretty-printed output? It would just blow up code, increases needless data transfer. Mine is even worse :), because I use the compress layout.

3

Thanks!
Basically agreed, compression is a good thing, provided you are some more experienced…
For me it greatly helps to better see the program structure in both, the source and the target when debugging.

Regards
Uli

Edit:
A very stupid question: What is ‘the compress layout’ you are using?

4

Ah, I fully understand the learning aspect (still learning myself all the time). Doubtful you will find such in the Jekyll universe (you could feed the produced html files into a pretty printer program).

As to compress, see: http://jch.penibelst.de/. Excellent, very creative Liquid programming. A caveat: it stumbles on these JavaScript comments //, must all be converted to /* … */, then fine.

1 Like
5

where are you looking at your _site files that they look bad? in the browser dev tools? or locally in your editor? if you look at them in the browser dev tolls they should be pretty as the dev tools should do it for you. My site is minimized and all the code is on one line if you look at the raw text of the file, but in the chrome dev tools inspector it is pretty.

maybe post what one one of your rendered files looks like.

1 Like
6

There are some more points influencing that aspect…

Disregarding these, for the_site - files I am using an editor (NPP+).

What is of importance before going into sample(s): Since I never used compressed html/css code: How would it look like in the W3C-validator for instance? Does it prettify it?

This greatly would help for continuing partially this line or to drop it for some time to come.

Regards
Uli

7

The …penibelst… is looking very promising! Once some more experienced (and some more spare time…), I definitely want to install and use it!

8

compressed code is w3c valid, no problem.

I’m not sure there is too much benefit to compressing the files as most servers will serve them gzipped and that should shrink them to more or less the same size anyways (totally guessing at that though).

Your original complaint is about you viewing the files and they are not pretty, I’d go back to why that matters and how you are viewing them. Compressing them for sure will make them even less readable, but again the browser dev tools will show them pretty so it shouldn’t matter what they actually look like - I rarely ever look at the _site files in my editor.

9

→ Yes, certainly - the question was about viewing the check-output in the validator window if the files originally are compressed. If they are not prettyfied, I could not make much use of it.

→ Oh, this would make obsolete at least some of the benefits of compression

To become more concrete, I shall prepare one or two simple examples for indenting troubles.

10

@rdyar : Excellent idea with the browser dev pane! I’m using it all the time and had not connected it with the problem here.

Re gzipping: Yes, that can make a huge difference (load time factor of 3 for me). My provider had not enabled it. Since they’re using Apache, I could add it in .htaccess with AddOutputFilterByType DEFLATE … and AddOutputFilter DEFLATE … (stopping now to avoid too much off-topping…).

11

To end the off-topic conversation perhaps usefully:
Because I also see this possibility as so great, it could be worthwile to open a clean, clear HowTo / advice topic, searchable for other users.

@rdyar , you were the one to mention it - if you think similarly, here is the complete answer of my server-helpdesk (apache):

<IfModule mod_deflate.c>
<FilesMatch ".(js|css|html|htm|php)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

(Regarding the OT: postponed for some more time…)

12

Hi,
a first sample here where I couldn’t find a solution - no matter what I try…

It is the insertion of only one NewLine between a preceeding </script...> and a following <script…>.
The problem: Either no NL at all or two NL’s are inserted.

The indentation of the string “<script…>” also is to be conserved.

  {% raw %}</script>{% endraw %}

{% if netPageName == "index" %}
  {% raw %}<script type="application/ld+json">{% endraw %}