Prettyprint - demo

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()
{
  // et tilfeldig kodeeksempel
  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()
{
  // et tilfeldig kodeeksempel
  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 og får flgende beskrivelse av CSS-fila som e default:

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

/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 }  /* plain text */

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .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, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

/* Put a border around prettyprinted code snippets. */
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 }

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';