venerdì 27 settembre 2013

Inserire porzioni di codice evidenziate syntax highlighter su blogger - blogspot

Spesso capita di leggere articoli di informatica con porzioni di codice evidenziate in modo da essere selezionate e copiate con facilità.
Tutto questo grazie alla classe javascritp SyntaxHighlighter.

Per utilizzare la classe su blogger io ho editato a mano il template in questo modo:

Bisogna aprire il proprio template in andando su modifica HTML.

Per prima cosa va copiato il foglio di stile css. Quindi bisogna copiare tutto il codice CSS di questo file prima del tag </b:skin>.

Ora bisogna inserire i file javascript, quindi bisogna incollare il seguente codice prima del tag </head>.


<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>


Ora bisogna inserire la funzione javascript che farà funzionare tutto, quindi bisogna copiare il seguente codice prima del tag </body>.


<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>


A questo punto non rimane altro da fare che salvare il proprio template.

Per inserire porzioni di codice è sufficiente inserirlo, utilizzando l'editor HTML, all'interno dei tag <pre> </pre>.

Per esempio così:

<pre name="code" class="php">
    echo "I like PHP";
</pre>

Qui trovate la lista delle classi per i linguaggi supportati, qui invece le varie opzioni da aggiungere.

Nessun commento:

Posta un commento