02 Ottobre 2013 12:21:21 · [Stilizziamo Codice Sorgente]
Postato da
Eccomi qui! Stavolta volevo farvi vedere come aggiungere i numeri di riga con il css per il codice sorgente postato, nulla di così difficile, basta aggiungere uno <span class="line"></span> ad ogni linea di codice, ci vorrà un contenitore che sia un div o una tabella poco importa, l'importante è che faccia da contenitore ai tag span e che indicheremo con la classe code come ad esempio <div class="code"></div>.
Come potete notare ho usato la pseudo classe :before per aggiungere a sinistra i numeri di riga... ci pensa il css a numerare le righe, niente paura In verità si tratta di uno pseudo elemento applicato alle classi e l'uso è davvero vastissimo. A voi la palla
/* Stile Codice Sorgente */
.code {
text-align: left;
table-layout: fixed;
word-wrap: break-word;
border-radius: 7px;
border: #6666FF 1px solid;
background-color:
#FFF5EE;
background-image: url("../bkg/Bkg_117.png"); /* Righe Orizzontali */
background-repeat: repeat;
background-position: 0 10px;
}
/* Stile Codice Sorgente */
.xcode {
color: #008000;
font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
font-size: 13px;
font-style: normal;
line-height: 20px; /* Adatta Righe Orizzontali */
font-weight: normal;
font-variant: normal;
}
/* Indice Codice Sorgente */
.code {
counter-reset: listing;
}
/* Indice Codice Sorgente */
.line {
counter-increment: listing;
}
/* Numerazione
Linee, Codice Sorgente */
.code .line:before {
text-align: right;
margin-left: -10px;
padding-right: 10px;
float: left;
width: 40px;
color: gray;
content: counter(listing, decimal-leading-zero) ".";
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}Come potete notare ho usato la pseudo classe :before per aggiungere a sinistra i numeri di riga... ci pensa il css a numerare le righe, niente paura In verità si tratta di uno pseudo elemento applicato alle classi e l'uso è davvero vastissimo. A voi la palla
19 Giugno 2014 13:15:38 · [Stilizziamo Codice Sorgente]
Postato da
Ho preparato una demo che vi permetterà di testare personalmente il codice da me postato. Ecco dunque la mia demo! Notate che ho dovuto resettare il margine, altrimenti il codice non avrebbe funzionato perfettamente Il reset del css è molto importante quando si pensa in modo cross-browser