Come evidenziare il codice preformattato degli articoli wordpress

| 8 agosto 2010 | 2 Comments

CodiceIn 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:
  1. <?php
  2.  
  3. global $post, $posts;
  4.  
  5. if (preg_match('[<pre.+>]',$post->post_content)) { ?>
  6.  
  7. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shCore.js"></script>
  8.  
  9. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushBash.js"></script>
  10.  
  11. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushCpp.js"></script>
  12.  
  13. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
  14.  
  15. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushCss.js"></script>
  16.  
  17. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushDelphi.js"></script>
  18.  
  19. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushDiff.js"></script>
  20.  
  21. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushGroovy.js"></script>
  22.  
  23. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushJava.js"></script>
  24.  
  25. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushJScript.js"></script>
  26.  
  27. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushPhp.js"></script>
  28.  
  29. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushPlain.js"></script>
  30.  
  31. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushPython.js"></script>
  32.  
  33. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushRuby.js"></script>
  34.  
  35. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushScala.js"></script>
  36.  
  37. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushSql.js"></script>
  38.  
  39. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushVb.js"></script>
  40.  
  41. <script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/shBrushXml.js"></script>
  42.  
  43. <link type="text/css" rel="stylesheet" href="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/styles/shCore.css"/>
  44.  
  45. <link type="text/css" rel="stylesheet" href="<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/styles/shThemeDefault.css"/>
  46.  
  47. <script type="text/javascript">
  48.  
  49. SyntaxHighlighter.config.clipboardSwf = '<?php bloginfo('url'); ?>/wp-content/syntaxhighlighter/scripts/clipboard.swf';
  50.  
  51. SyntaxHighlighter.all();
  52.  
  53. </script>
  54.  
  55. <?php
  56.  
  57. }
  58.  
  59. ?>
<?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:

  1. <pre class="brush:LINGUAGGIO;">
  2.  
  3. IL VOSTRO CODICE DA EVIDENZIARE
  4.  
  5. </pre>
<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;

Related Posts Plugin for WordPress, Blogger...

Tags: , , , , ,

Category: Programmazione

avatar

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.

Comments (2)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Technotizie.it | 12 agosto 2010
  2. Come evidenziare il codice preformattato degli articoli wordpress | Informati.org | 20 giugno 2011

Leave a Reply

 

Subscribe without commenting

«
»