Lettlest framstilling av programkode, pretty print.

Vi laster ned .zip fila fra [1] og pakker den ut i en katalog. Den versjonen jeg bruker på denne siden er datert juli 2010.

I katalogen jeg pakker ut finner jeg noen testsider, en katalog (src) med Javascript-filer og en .css -fil. Jeg finner dessuten en README.html readme som beskriver hva vi kan gjøre, hvilke språk som støttes og hvordan vi kan gjøre det.

Vi skal bruke prettyfy til å framstille noen eksempler på kode av den typen vi finner i dette materialet: Javascript, CSS, Python og SQL.

Javascript

Javascript faller under kategorien "C-like languages" og vi trenger bare pakke inn programkoden i en pre-tag med class prettyprint, slik:

 
 <pre class="prettyprint">
 ... mitt javaskript...
 </pre>
 

Det eneste vi må passe på er at vi:

• Må kople til prettyfy.js og stilsettet på siden

    
    <script src="google-code-prettify/src/prettify.js" type="text/javascript"> </script>
    <link href="google-code-prettify/src/prettify.css" type="text/css" rel="stylesheet" />
    
   

• Må starte opp en js-metode, prettyPrint();, som finner alle pre-elementer med class prettyprint Dette kan vi enten gjøre i body med onload eller vi kan legge til en script-tag nederst på siden:

   
   <script type="text/javascript">prettyPrint(); </script>
   
   

Hvis vi får dette på plass, og legger inn et javascript, pakket i en pre-tag med class prettyprint, kan vi få noe slikt:

function controldato()
{
  inputelt=document.getElementById('dato');
  errorelt=document.getElementById('datoerror');
  if ((inputelt.value==null) || (inputelt.value.length!=10))
  {
    errorelt.innerHTML='galt format';
    return false;
  }
  var T=inputelt.value;
  var regex=/(19|20)\d\d[:](0[1-9]|1[012])[:](0[1-9]|[12][0-9]|3[01])/;
  if (regex.test(T))
  {
    errorelt.innerHTML='';
    return true;
  }
  errorelt.innerHTML='galt format';
  return false;
}
 

Vi kan også bestille linjenummere i listingen, ved ganske enkelt å angi class prettyprint linenums. Dette kan være hensiktsmessig dersom vi ønsker å skrive kommentarer til koden, utenfor selve koden.

function controldato()
{
  inputelt=document.getElementById('dato');
  errorelt=document.getElementById('datoerror');
  if ((inputelt.value==null) || (inputelt.value.length!=10))
  {
    errorelt.innerHTML='galt format';
    return false;
  }
  var T=inputelt.value;
  var regex=/(19|20)\d\d[:](0[1-9]|1[012])[:](0[1-9]|[12][0-9]|3[01])/;
  if (regex.test(T))
  {
    errorelt.innerHTML='';
    return true;
  }
  errorelt.innerHTML='galt format';
  return false;
}
 

CSS

CSS faller ikke under kategorien "C-like languages" og vi trenger et eget javascript for å handtere dette, lang-css.js. Dette er også distribuert med prettyfy og vi må passe på å inkludere dette i siden. Vi må dessuten navngi det språket vi skal bruke i pre-tagen:

 
 <pre class="prettyprint lang-css">
 
 

Vi gjør dette med det stilsettet som følger prettyfy, prettyfy.css, som eksempel og får:

/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}

Det er denne fila vi må endre dersom vi ønsker andre farger, fonter eller hva det måtte være.

Python

Python faller i denne sammenheng i kategorien "C-like" og vi angir kun prettyprint som class.

#! /usr/bin/python
"""
 Reading fields navn and adresse
 and reports the findings
"""
import cgi
form=cgi.FieldStorage()
print 'Content-type: text/html; charset=iso-8859-1\n'
print form
navn=''
adresse=''
try:
   navn=form['navn'].value
except:
   navn='ukjent'
try:
   adresse=form['adresse'].value
except:
   adresse='ukjent'
print "Dette er det jeg fant: Navn: %s, Adresse: %s"%(navn,adresse)

SQL

SQL er ikke "C-like" og vi angir prettyprint lang-sql som class. Husk å includere "lang-sql.js" -fila.

 SELECT h_lag_id,b_lag_id,h_maal,b_maal,kamp_dato 
                 FROM kamp WHERE liga_id='%s';

Eksperimenter

Det er selvsagt interessant å eksperimentere med stilsettet. Et forsiktig forsøk:

Et forsøk med dynamisk lasting av programkode