Pagine

domenica 19 agosto 2012

PrettyPrint - formattare codice nel blog

Seguendo questo post è possibile migliorare la formattazione del codice riportato nel blog: http://vivianningyang.blogspot.it/2009/05/how-to-post-source-code-in-blogspotcom.html

Riferimento ufficiale: http://google-code-prettify.googlecode.com/svn/trunk/README.html


1) Editare il codice HTML del modello utilizzato (fare prima una copia di backup).

2) Aggiungere nel tag "head" le seguenti istruzioni:
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"/>


3) Rettificare il tag "pre":
pre {
   margin: 5px 20px;
   border: 1px dashed #666;
   padding: 5px;
   background: #f8f8f8;
   white-space: pre-wrap;       /* css-3 */
   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


4) Aggiungere onload="prettyPrint()" al tag "<body>"
<body onload='prettyPrint()'>


Nei post scrivere il codice nel tag "pre" utilizzando la classe "prettyprint":
<pre class="prettyprint">
codice sorgente
</pre>