Come evidenziare il codice preformattato degli articoli wordpress

| | 2 Comments

In un altro articolo avevo già parlato di come evidenziare la sintassi dei pezzi di codice che inseriamo nei nostri articoli. Ora vediamo come possiamo fare per migliorarne l’efficienza, e far caricare tutti i file js necessari solo nelle pagine in cui realmente servono. Prima di tutto scaricate il pacchetto con tutti i file necessari dal sito di Alex Gorbatchev, io preferisco la versione 2.1.382 perchè dalla 3 in poi sono sparite le icone che permettono di copiare, vedere il sorgente o stampare, e poi non si adatta bene alla larghezza dei vari template.

  • Estraete il file compresso sul desktop
  • create la cartella syntaxhighlighter in wp-content nel vostro sito con il vostro programma ftp
  • copiate le cartelle estratte scripts e styles in wp-content/syntaxhighlighter
  • ora dovete editare il file header.php del vostro template e all’interno dei tag head incollate quanto segue:
<?php

global $post, $posts;

if (preg_match('[<pre.+>]',$post->post_content)) { ?>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shCore.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushBash.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushCpp.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushCSharp.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushCss.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushDelphi.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushDiff.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushGroovy.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushJava.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushJScript.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushPhp.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushPlain.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushPython.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushRuby.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushScala.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushSql.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushVb.js"></script>

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushXml.js"></script>

<link type="text/css" rel="stylesheet" href="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/styles/shCore.css"/>

<link type="text/css" rel="stylesheet" href="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/styles/shThemeDefault.css"/>

<script type="text/javascript">

SyntaxHighlighter.config.clipboardSwf = '<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/clipboard.swf';

SyntaxHighlighter.all();

</script>

<?php

}

?>
  • Salvate l’header e il gioco è fatto…

Non vi resta che utilizzare lo script, ogni volta che volete utilizzarlo non dovrete far altro che scrivere nella pagina il seguente codice html:

<pre class="brush:LINGUAGGIO;">

IL VOSTRO CODICE DA EVIDENZIARE

</pre>

a LINGUAGGIO sostituite i vari linguaggi disponibili e che userete, ad esempio php, js, xml, ecc ecc.

Ricordate inoltre che tra i tag pre il codice va inserito in html formattato, ad esempio < e > dovranno essere sostituiti con &lt; e &gt;

Tags: , , , , ,

Category: Programmazione

About the Author ()

Studio Ingegneria Informatica e Bio. all' Università Magna Graecia di Catanzaro, sono appassionato di informatica, e mi piace praticare la pesca nelle acque dolci.