justdesign

Kodefarvning i HTML

Når præsentationsopmærkning gi'r (en vis) mening

Nogle forsøg med gengivelse af kodefarvning (syntax highlighting) i HTML dokumenter, med og uden CSS.

Advarsel! Denne side indeholder <font> koder samt spor af andet forældet markup. Disse kan fremkalde kraftige reaktioner hos nogle mennesker. Hvis du føler dig utilpas mens du læser dette, bør du straks søge lægehjælp!

<font color="#nnn">

Forældet (deprecated), validerer ikke længere, men er trods alt en lovlig, hurtig og relativt effektiv metode, som selvfølgelig også virker uden CSS!
Måske den sidste forsvarlige anvendelse af <font>… elementet?

  blockquote p {
    margin: 0;
    padding: 20px;
    background-color: #ffbd99;
  }

<u>, <b> og <i> + CSS

3 små tags, 4 farver! Fylder meget lidt, meget økonomisk og effektiv… Har den fordel at den, på en måde, også "virker" uden CSS!

  Med CSS:
  .kode b {
    font-weight: normal;
    color: blue;
  }
  .kode i {
    font-style: normal;
    color: red;
  }
  Uden CSS (men er det stadigvæk "kodefarvning"?):
  .kode b {
    font-weight: normal;
    color: blue;
  }
  .kode i {
    font-style: normal;
    color: red;
  }

Variant af ovenst. med linienumre (<ol> + white-space:pre;)

  1. .kode b {
  2. font-weight: normal;
  3. color: blue;
  4. }
  5. .kode i {
  6. font-style: normal;
  7. color: red;
  8. }

<span class="[selector, property, value]">

Og så vinderen! Sikkert det rigtigste (er faktisk ikke præsentationsopmærkning!)
En løsning med <span style="color:nnn"> kunne også laves, men er ikke meget bedre end <font>…

  blockquote p {
    margin: 0;
    padding: 20px;
    background-color: #ffbd99;
  }

Dovenskab

Man behøver ikke kode det hele i hånden! Uanset hvilken metode man bruger, kan kodefarvning generes automatisk v.h. af ECMAScript, PHP, eller andet. Se et eksempel på min "divless" side.

Tilbage til demosiden

justdesign