Per rimuovere l’indentazione del sorgente HTML da un blocco di codice visualizzato, elimina gli spazi iniziali condivisi dal testo, preservando l’indentazione relativa. Mantieni attiva la spaziatura preformattata, così le righe annidate e gli spazi intenzionali restano leggibili.

Questa guida è per chi modifica una piccola pagina HTML su un Mac e ne visualizza l’anteprima in un browser desktop. L’obiettivo è rimuovere l’indentazione introdotta dal layout della pagina circostante senza appiattire il codice al suo interno.

Perché l’indentazione HTML compare dentro un blocco di codice?

Un elemento pre rappresenta testo preformattato e WHATWG ne supporta esplicitamente l’uso insieme a un elemento code per il codice informatico. Di conseguenza, gli spazi usati per indentare l’esempio nel file HTML possono diventare parte dell’esempio visualizzato. Standard HTML: l’elemento pre.

Considera questo frammento HTML tratto da una pagina di esempio sintetica che contiene un pannello. Ogni riga di contenuto ha otto spazi iniziali indesiderati; le due righe delle proprietà ne hanno altri due, che devono rimanere.

<pre><code>        const panel = {
          label: "Panel A",
          count: 2
        };</code></pre>

Il testo da visualizzare è:

const panel = {
  label: "Panel A",
  count: 2
};

Il browser prevede un’eccezione di parsing rilevante: rimuove una singola nuova riga immediatamente dopo un tag di apertura pre. Questa eccezione non elimina l’indentazione comune e una nuova riga dopo un tag di apertura code interposto non si trova immediatamente dopo pre. MDN spiega inoltre che i caratteri di markup letterali nel testo preformattato richiedono comunque un escape appropriato. MDN: l’elemento di testo preformattato.

Scegli la correzione adatta agli spazi indesiderati

Prima di modificare la pagina, distingui l’indentazione del testo dalla spaziatura attorno all’elemento. Questa sequenza decisionale aiuta a evitare di intervenire sul livello sbagliato.

Cosa osservi Cosa controllare Azione appropriata
Ogni riga di contenuto inizia con caratteri di spazio aggiuntivi Il testo dell’elemento di codice Rimuovi solo l’indentazione iniziale comune
Il testo inizia correttamente, ma l’intero riquadro è rientrato Il CSS dell’elemento e il suo contenitore Modifica la spaziatura pertinente del layout
C’è una riga vuota prima o dopo l’esempio Le nuove righe attorno al contenuto effettivo Rimuovi quella specifica nuova riga se è indesiderata
Le righe lunghe superano il riquadro Il comportamento di ritorno a capo Scegli separatamente se mantenere le righe o mandarle a capo
L’esempio usa già Prism La configurazione del plugin per gli spazi bianchi Valuta Normalize Whitespace

Per un singolo esempio statico, la correzione più semplice consiste nel modificare direttamente il contenuto: inizia la prima riga subito dopo il tag di apertura code e rimuovi gli spazi condivisi indesiderati dalle righe successive. Mantieni l’indentazione che appartiene all’esempio stesso. Il markup circostante della pagina può restare indentato indipendentemente.

Per esempi ripetuti, normalizza il testo sorgente durante la generazione della pagina o prima dell’evidenziazione della sintassi. La sezione successiva mostra il calcolo in modo esplicito, così puoi vedere quali spazi scompaiono.

Perché modificare white-space non basta

Il CSS white-space: pre preserva spazi e interruzioni di riga senza il normale ritorno a capo. pre-wrap preserva gli spazi bianchi consentendo il ritorno a capo. pre-line preserva le interruzioni di riga ma comprime le sequenze di spazi; normal comprime anche le nuove righe del sorgente. Queste proprietà non sottraggono selettivamente l’indentazione comune di un esempio di codice. MDN: white-space.

Per questo compito, usa pre quando è importante preservare ogni riga del sorgente, oppure pre-wrap quando conta di più adattare le righe lunghe. Rimuovere l’indentazione comune è un’operazione distinta sul testo.

La bozza CSS Text Level 4 del W3C definisce white-space-trim, ma il suo esempio di blocco preformattato mantiene esplicitamente l’indentazione del contenuto effettivo. Attualmente MDN documenta che questa proprietà non è implementata nei browser. Di conseguenza, non offre né una soluzione supportata dai browser né il calcolo dell’indentazione comune necessario in questo caso. W3C: rimozione degli spazi bianchi, MDN: proprietà costitutive di white-space.

Usa un esempio completo che preserva l’indentazione annidata

Il seguente documento HTML autonomo non richiede librerie né strumenti di build. Nell’editor di codice sul tuo Mac, salvalo come file di testo semplice chiamato indent-demo.html, quindi aprilo nel browser desktop. Lo script compare dopo l’esempio, quindi l’elemento interessato esiste già quando lo script viene eseguito.

La dimostrazione inizia intenzionalmente il contenuto sulla stessa riga del tag di apertura code. Lascia anche una nuova riga finale prima del tag di chiusura. La funzione preserva questa nuova riga finale invece di eliminare silenziosamente l’esempio.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Code indentation example</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: system-ui, sans-serif;
    }
    pre {
      padding: 1rem;
      background: #f2f2f2;
      white-space: pre;
      overflow-x: auto;
    }
    code {
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>Panel example</h1>
  <pre><code id="panel-example">        const panel = {
          label: "Panel A",
          count: 2
        };
</code></pre>
  <script>
    function dedentSpaces(text) {
      const lines = text.replace(/\r\n?/g, "\n").split("\n");

      if (lines.some(line => /^[ \t]*\t/.test(line))) {
        throw new Error(
          "Use spaces for leading indentation before dedenting."
        );
      }

      const contentLines = lines.filter(line => /[^ ]/.test(line));
      if (contentLines.length === 0) return lines.join("\n");

      const indent = Math.min(
        ...contentLines.map(line => line.match(/^ */)[0].length)
      );

      return lines.map(line => {
        const leadingSpaces = line.match(/^ */)[0].length;
        return line.slice(Math.min(indent, leadingSpaces));
      }).join("\n");
    }

    const code = document.getElementById("panel-example");
    code.textContent = dedentSpaces(code.textContent);
  </script>
</body>
</html>

La funzione trova il numero minimo di spazi iniziali tra le righe non vuote. Per questo input illustrativo, i conteggi sono otto, dieci, dieci e otto. Sottraendo otto si ottengono zero, due, due e zero: l’indentazione interna dell’oggetto rimane.

Le righe vuote non portano il minimo a zero. Su una riga vuota, la funzione rimuove al massimo il numero condiviso di spazi e mantiene l’interruzione di riga. Lascia inoltre intatti gli spazi finali delle righe di contenuto. Queste scelte rendono la trasformazione più circoscritta rispetto all’applicazione di trim() a ogni riga, che eliminerebbe l’indentazione annidata.

L’implementazione normalizza intenzionalmente le terminazioni di riga CRLF e CR in LF. Rifiuta le tabulazioni nell’indentazione iniziale invece di ipotizzare quante colonne visualizzate rappresenti ogni tabulazione. Un input composto interamente da spazi viene restituito mantenendo gli spazi, a parte la normalizzazione esplicita delle terminazioni di riga.

La funzione dedent è stata eseguita in Node.js su cinque casi di output deterministici che coprono l’indentazione annidata, le righe vuote, una riga non indentata, l’input CRLF e l’input composto solo da spazi. Un controllo separato ha confermato il rifiuto delle tabulazioni iniziali. Questi controlli convalidano la trasformazione della stringa; non costituiscono un test di rendering nel browser.

Applica la trasformazione prima dell’evidenziazione

L’esempio legge e scrive textContent. MDN documenta che la lettura di questa proprietà raccoglie il testo discendente, mentre l’impostazione sostituisce i figli dell’elemento con un nodo di testo. Esegui quindi questa trasformazione prima che un evidenziatore di sintassi aggiunga elementi per i token; applicandola in seguito, rimuoveresti il markup dell’evidenziazione. MDN: Node.textContent.

Per una pagina esistente, mantieni la funzione ma sostituisci l’ID dell’esempio con l’ID effettivo dell’elemento di codice. Seleziona solo l’esempio desiderato. Se un renderer della pagina sostituisce in seguito quell’elemento, inserisci la normalizzazione nella fase di preparazione del renderer, così il contenuto visualizzato riceve la trasformazione.

Se la pagina usa già Prism, usa il suo plugin per gli spazi bianchi

Prism fornisce un plugin chiamato Normalize Whitespace per gli esempi a blocchi che usano pre e code. L’opzione documentata remove-indent rimuove l’indentazione in eccesso. Le impostazioni predefinite eliminano anche l’inizio e la fine del blocco e rimuovono gli spazi bianchi finali, operazioni più ampie della funzione precedente. Prism: Normalize Whitespace.

Se Prism e Normalize Whitespace sono già caricati, il seguente frammento di configurazione mantiene attiva la rimozione dell’indentazione e disabilita queste tre operazioni di pulizia aggiuntive predefinite. Applicalo prima di evidenziare gli esempi interessati.

// Configuration fragment: Prism and its plugin must already be loaded.
Prism.plugins.NormalizeWhitespace.setDefaults({
  "remove-indent": true,
  "remove-trailing": false,
  "left-trim": false,
  "right-trim": false
});

Queste impostazioni predefinite influiscono sul comportamento del plugin anche oltre il singolo esempio. Prism documenta inoltre impostazioni per singolo blocco tramite gli attributi data- e la classe no-whitespace-normalization, che consente di escludere un blocco. Controlla le impostazioni esistenti prima di aggiungere un’altra passata di normalizzazione. Prism: uso di Normalize Whitespace.

Controlla il risultato senza modificare il significato del codice

Su un Mac con Chrome, premi Command + Option + J per aprire la Console. Dopo aver aperto la dimostrazione autonoma, esegui la seguente espressione di ispezione. Chrome documenta questa scorciatoia nel riferimento a DevTools. Chrome DevTools: scorciatoie da tastiera.

JSON.stringify(document.getElementById("panel-example").textContent)

La stringa restituita dovrebbe contenere il testo seguente. Le sequenze \n rendono visibili le interruzioni di riga; non dovrebbero esserci spazi prima del primo const, due prima di ciascuna proprietà e nessuno prima della parentesi graffa di chiusura.

"const panel = {\n  label: \"Panel A\",\n  count: 2\n};\n"

Poi controlla l’esempio visualizzato e copialo in un editor di testo semplice. Verifica che la prima riga inizi correttamente, che le righe annidate mantengano l’indentazione e che le righe vuote intenzionali rimangano. Se il testo è corretto ma il riquadro appare ancora rientrato, intervieni di nuovo sugli stili del layout invece di eliminare altri caratteri.

Se una riga non vuota non ha spazi iniziali, la funzione non rimuove nulla. È voluto: una riga non indentata significa che nessuna indentazione è condivisa da tutte le righe di contenuto. Esamina quella riga prima di scegliere una quantità fissa da rimuovere.

Infine, l’indentazione comune è un presupposto editoriale, non qualcosa che questa funzione possa dedurre dalla sintassi del programma. Evita la rimozione automatica dell’indentazione quando gli spazi iniziali sono dati di esempio significativi, fanno parte di una stringa multilinea o creano un allineamento intenzionale in un diagramma. In questi casi, prepara esplicitamente il testo da visualizzare.

Per un normale esempio di codice, il flusso di lavoro affidabile consiste nell’individuare il margine comune del sorgente, rimuoverlo una sola volta e lasciare che sia il browser a occuparsi del rendering del testo restante. Gestisci ritorno a capo e spaziatura del contenitore come decisioni separate, poi verifica sia il blocco visibile sia il testo sottostante.

Fonti