Sarà capitato anche a voi, cari i miei DD (Drupal Developers), di utilizzare il modulo Syntax Highlighter per il vostro blog e di incappare in un fastidioso problema, quello delle linee lunghe.
Queste hanno infatti il vizietto di NON andare da capo e di stravolgere la struttura del sito.
Mi spiego meglio:
quando ponete il vostro bel codice, di qual si voglia linguaggio di programmazione o di scripting, nel tag “pre”, può capitare che le linee lunghe siano tali da estendersi in orizzontale per una ampiezza maggiore dell’elemento che le contengono, adulterando il layout del vostro sito.
La soluzione? Eccola.
La soluzione sarà data dal CSS.
- Munitevi dell’oittma estensione per Mozilla Firefox Firebug (COSA??!? NON AVETE FIREBUG!?) o di un qualunque altro sistema di ispezione del codice (Opera, Chrome ed IE lo hanno integrato);
- Premete F12 per attivare Firebug (o avviate il vostro suddetto “ispettore” prediletto);
- Scoprite dove viene definito il tag con classe syntaxhighlighter, intendo dire in quale file CSS. Dovreste cercare una cosa di questo tipo .syntaxhighlighter.
Trovata la dichiarazione dovreste essere di fronte un codice CSS di questo tipo:
.syntaxhighlighter {
font-size: 1em !important;
margin: 1em 0 !important;
overflow: auto !important;
position: relative !important;
width: 100% !important;
}
che sarà sufficiente modificare nella sua ultima riga, ovvero in quella riguardante la dimensione.
Basterà infatti sostituire 100% con una dimensione assoluta (per esempio 500px) per ottenere un ridimensionamento del blocco di codice e una barra orizzontale che vi consentirà di scorrere le linee lunghe altrimenti parzialmente occultate.
Spero di essere stato chiaro e soprattutto di aiuto!