hojas de estilo .css

[roman]

Lo del cuadro es lo más fácil. Pones todo dentro de etiquetas div:

<div class='truco'>

<!---

Aquí el texto del truco

-->

</div>

En tu hoja de estilo le das "brillo" a tu <div> de clase "truco":

div.truco
{
  border: 1px solid green;
  background-color: silver;
}

O sea, le pones todos los atributos que desees.

El resaltado es más difícil. El del código delphi se hace con un script php que lee el texto y "envuelve" las palabras reservadas con etiquetas <span>. Por ejemplo, el código original:

procedure MiProc;
begin
...
end;

lo reemplaza con:

<span class='keyword'>procedure</span> MiProc;
<span class='keyword'>begin</span>
...
<span class='keyword'>end</span>;

y en tu hoja de estilo das el formato deseado a span.keyword. Si te interesa, se habló del tema en este hilo.

Además, hay scripts ya hechos, como Geshi para el resaltado de sintaxis y otras monerías.

// Saludos