Prettify the whole html output automatically - e.g. with "prettier.io"

The CMS Questions
1

I like the code formatter https://prettier.io

Is there a method to integrate such a tool into Kirby and get the complete output of html consistently and pretty formatted?
That would be great.

Is it correct that a solution is about the “build” and “deployment” process?

Have any of you already implemented this and would like to share your experience?

Thanks.

2

while you could postprocess the string returned from the kirby->render method in the index.php my advise would be to use prettier/pint to format the php templates and snippets.

prettier depends on node so that would mean a roundtrip to the cli. you will also have to let pettier know which format html/json as the render will also output json for like the kirby panel api. this gets complex quickly.

1 Like
3

Prettier does not support mixed content of PHP/HTML, so it doesn’t work with Kirby.

1 Like
4

Which one is your goal?

  1. Have beautifully formatted source files (PHP, CSS, JS, etc.) in your codebase?
  2. Send beautifully formatted HTML text to web browsers?

The first one can be handled with tooling like Prettier (with a plugin for formatting PHP, see @prettier/plugin-php) and/or Laravel Pint.

The second one is more problematic, for a few reasons:

  • Overall, browsers do not care about nice indentation or wrapping lines at a specific length (you can read up on how whitespace is handled by HTML/CSS).
  • When using PHP as a templating language to generate HTML, nicely-formatted PHP code (that is easy to read and reason about) tends to use more line breaks and indentations, and those often end up in the generated HTML output. So good PHP code is at odds to nicely-looking HTML output. If you try to author your PHP code to generate nicely indented HTML, the PHP itself will be harder to read and work with.
  • You can take the complete HTML output generated by $kirby-render(), and run it through a formatting function, but that means more work for your server, which could be a performance issue for very long HTML pages.
  • The formatting function also needs to be pretty much correct and safe (doesn’t mangle your HTML code or mess with some meaningful whitespace, such as whitespace within a <pre> element).

Given this situation, the common calculus results in: write nicely formatted PHP code, and forget about nicely formatting the HTML result because it introduces risks and has virtually no benefits.

But if you still want to send nicely formatted HTML to Web browsers because you like how it looks when you use “View Source” in your browser, and it’s your personal website or pet project so you can do what you want, then I would recommend looking for a HTML formatter written in PHP. Prettier is written in JavaScript and runs on Node.js (or Deno or Bun), which means that to use it in PHP you would need to write PHP code that starts a node process, sends it some input and wait for some output. This increases the performance penalty even more because starting a process like node takes some fixed amount of time (say, 20ms or 50ms) on top of the time that it would take Prettier to format your input.

(A dedicated formatter process which does not require Node.js, like dprint, might be a bit faster, but spawning a new process every time you want to render a single page is still not ideal.)

By the way, if you want to format the HTML output, the best way to do it is probably in a plugin hook:

<?php
// site/plugins/pretty-html/index.php

use Kirby\Cms\App as Kirby;

Kirby::plugin('my-pretty-html-plugin', [
return [
    'hooks' => [
        'page.render:after' => function (string $contentType, array $data, string $html, Kirby\Cms\Page $page) {
            if ($contentType == 'html') {
              return functionThatFormatsHTML($html);
            }
        }
    ]
]);

Of course you need the functionThatFormatsHTML to be a real function that works. ^^

2 Likes
5

Both.

In my post I just talk about the second goal.

I understood, that it is a goal which is difficult to solve because there’s no prettifier which is as safe as prettier.io as a php-tool.

So I’m concentrating on finding a method for the first goal. It is essential that the automatic formatting (I don’t want to do it manually) works for mixed code from PHP and HTML.

Could you recommend me an IDE that solves this task well.

6

Laravel Pint/PHP-CS-Fixer do an okay job, and Prettier doesn’t really support mixed PHP and HTML content. Personally, I’ve found that using my IDE integration works best. For VS Code/Zed, that’s Intelephense. If you use PhpStorm, just use the included one.

7

At Kirby, we use PhpCsFixer: Coding style standards | Kirby CMS