Modificare IG Sintax Hiliter per renderlo “fluido” e maggiormente compatibile con IE sotto Windows
24 September 2006 - Scritto da Carlo Filippo Follis per WP Codice e Plug-in
Loading ...
Pochi giorni fa ho inserito in Norisberghen.it il Plug-In IG Sintax Hiliter. Strumento splendido per pubblicare del Codice in maniera tale che mantenga l'aspetto originale e sia facilmente copiabile e riutilizzabile. Si presentavano però alcuni problemi legati alla compatibilità con il tema e con la visualizzazione sotto Windows tramite Internet Explorer. Analizziamo l'operazione per punti.
Quali erano i problemi?
Le Div in cui veniva inserito il Codice con relativa etichetta erano a larghezza fissa di 511 pixel, se tale misura può andar bene per il tema di defaul di WordPress non è detto che si adatti al nostro.
Nel caso di Norisberghen.it le Div risultavano troppo larghe e si sovrapponevano alla colonna dei Banner per quanto concerne le prove fatte sotto l'OS X di Apple con Safari e FireFox.
Più grave il problema sotto Windows con Internet Explorer. In questo caso l'articolo e gli altri contenuti scivolava in cantina ... Si poteva recuperare laddove finivano le colonne Advertising e Sidebar relativamente contenitori di Banners e Menù.
Era necessaria una modifica che si adattasse al tema grafico e sposasse la compatibilità con IE per Windows.
I files su cui lavorare
Vi evito l'elencazione di tutti i files che compongono il Plug-In. Prendiamo in esame solo quelli da modificare.
- wp-content/plugins/syntax_hilite.php
- wp-content/plugins/ig_syntax_hilite/css/
syntax_hilite_css.css
Vediamo ora che modifiche vanno apportate.
Le modifiche
Partiamo con syntax_hilite.php che genera la struttura di Div per la pubblicazione del Codice. La struttura si presenta così:
Per ottenere un layout fluido ho scelto di inserire una Div supplementare con l'introduzione della Classe .igBarArea ottenendo una struttura del tipo:
Per raggiungere lo scopo bisogna modificare il Codice PHP così:
-
<?php
-
function pFix($hLang='PHP', $bId, $bCls='syntax_hilite') {
-
$bBody = "";
-
if(IG_PLAIN_TEXT) {
-
//show the PLAIN TEXT View
-
if(IG_PLAIN_TEXT_TYPE=="inbox") {
-
$ig_jsPlainTxt = "showPlainTxt";
-
} else {
-
$ig_jsPlainTxt = "showCodeTxt";
-
}
-
// |_^_^_^_|
-
// Originale:
-
// $bBody .= "<div class=\"igBar\"><span id=\"l{$bId}\"><a href=\"#\" onclick=\"javascript:{$ig_jsPlainTxt}('{$bId}'); return false;\">Codice</a></span>";
-
$bBody .= "<div class=\"igBarArea\"><div class=\"igBar\"><span id=\"l{$bId}\"><a href=\"#\" onclick=\"javascript:{$ig_jsPlainTxt}('{$bId}'); return false;\">Codice</a></span></div>";
-
}
-
if(IG_SHOW_LANG_NAME) {
-
$bBody .= "<div class=\"{$bCls}\"><span class=\"langName\">{$hLang}:</span><br /><div id=\"{$bId}\">\n";
-
} else {
-
$bBody .= "<div class=\"{$bCls}\"><div id=\"{$bId}\">\n";
-
}
-
return $bBody;
-
} // END pFix
-
-
// Function for Suffixing the DIV
-
/**
-
* @return Ending <div> for the CODE BOX
-
* @param $bId
-
* @desc This is the function for suffixing the end portion of the <div> code box
-
*/
-
function sFix() {
-
// |_^_^_^_|
-
// Originale:
-
// $bBody = "\n</div></div><br />";
-
$bBody = "\n</div></div></div><br />";
-
return $bBody;
-
} // END sFix
-
</div></div> // Queste due Div non consideratele. Sono state inserite per ovviare ad un Bug di IG Sintax Hilite che, in questo caso, interferisce con la struttura della pagina.
Le modifiche sono contemplate nelle righe immediatamente successive a quelle commentate con "//": Vi state chiedendo cosa significhi il simbolo "|_^_^_^_|"? È una sequenza di caratteri che colloco per marcare i punti di inserimento delle modifiche; grazie a BBEdit ed alle sue ricerche sono così in grado di rintracciare ed elencare ogni modifica. Torniamo a noi ...
Avrete certamente notato l'inserimento della Div e la sua chiusura, ora bisogna agire sui CSS di syntax_hilite_css.css.
Le Classi modificate sono: .igBar e .syntax_hilite. oltre all'introduzione di .igBarArea. Il file originale era:
-
.syntax_hilite, li .syntax_hilite {
-
padding:3px 3px 10px 8px; border:1px solid #303130; background-color:#FEFEFE;
-
font-size:13px; font-family:'Courier New',Courier,monospace;
-
/* comment the line below to remove scrolling in code boxes */
-
overflow:auto; white-space:nowrap;
-
}
-
/* change this line to set the width of code box */
-
.syntax_hilite { width:500px; }
-
/* change this line to set the width of code box in a list */
-
li .syntax_hilite { width:460px; }
-
.igBar, li .igBar {
-
background-color:#D6D3CE; font-family:courier,arial,verdana;
-
border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE;
-
border-right:1px solid #424142;
-
}
-
/* change this line to set the width of plain text bar above code box */
-
.igBar { width:511px; }
-
/* change this line to set the width of plain text bar above code box in a list */
-
li .igBar { width:471px; }
-
.igBar a, .igBar a:hover {
-
margin:0px 5px 0px 10px; font-weight:bold; color:#000000;
-
text-decoration:none;
-
}
-
.syntax_hilite .langName { color:#000000; font-weight:bold; }
-
.syntax_hilite textarea { margin:0px -5px -2px 0px; border:none; }
Mentre quello modificato risulterà essere così:
-
.igBarArea { /* AGGIUNTA */
-
margin: 0;
-
padding: 0 1em;
-
}
-
.syntax_hilite, li .syntax_hilite {
-
padding:3px 3px 10px 8px; border:1px solid #303130; background-color:#FEFEFE;
-
font-size:13px; font-family:'Courier New',Courier,monospace;
-
/* comment the line below to remove scrolling in code boxes */
-
overflow:auto; white-space:nowrap;
-
}
-
/* change this line to set the width of code box */
-
.syntax_hilite {width: 90%;}
-
/* change this line to set the width of code box in a list */
-
li .syntax_hilite {width: 90%;}
-
.igBar, li .igBar {
-
font-family:courier,arial,verdana;
-
}
-
/* change this line to set the width of plain text bar above code box */
-
.igBar {/* width:450px; */}
-
/* change this line to set the width of plain text bar above code box in a list */
-
li .igBar {}
-
.igBar a, .igBar a:hover {
-
margin:0px 5px 0px 10px; font-weight:bold; color:#000000;
-
text-decoration:none;
-
}
-
.syntax_hilite .langName { color:#000000; font-weight:bold; }
-
.syntax_hilite textarea { margin:0px -5px -2px 0px; border:none; }
Il padding di .igBarArea può essere ridotto, a piacimento, sino a zero.
Il risultato
Ora le Div sono fluide e si adattano bene alla larghezza della colonna Contenuti ed Internet Explorer per Windows è contento delle modifiche ...
Segnalazione
Nel caso cercaste di inserire del Codice non riuscendoci perché il sistema e/o WordPress si rifiutano di accettalo, convertitelo nel formato Unicode UTF-8. Se utilizzate un Editor come BBEdit non dovreste aver problemi.
In conclusione
Sono soddisfatto, lo sarei di più se riuscissi a capire come mai a destra delle Div compare un padding maggiore rispetto a quello di sinistra che appare correttamente impostato ad 1em.
Se scoprite l'arcano, postate la soluzione ...
Articoli correlati:
RSS 2.0
Commenta
trackback
