CSS: stili dei blocchi di codice

Molti evidenziatori di sintassi non usano l'elemento pre per i blocchi di codice, quanto piuttosto una lista ordinata per aggiungere anche la numerazione alle righe di codice. In questo articolo vedremo come realizzare questo effetto con i CSS.

Partiamo dalla seguente struttura HTML:

<div class="code">
<ol>
	<li>
		<span class="selector">body</span> {
	</li>
	<li class="indent">
		<span class="property">font-family</span>: <span class="value">Arial, sans-serif</span>;
	</li>
	<li>}</li>
</ol>
</div>

Questo esempio evidenzia la sintassi di una regola CSS. L'elemento più esterno avrà un colore di sfondo più scuro che servirà ad evidenziare i numeri delle righe di codice. La lista ordinata verrà quindi indentata quanto basta per posizionare i numeri delle righe sullo sfondo del suo contenitore:

div.code {
	background: #ccc;
}

div.code ol {
	margin: 0 0 0 1.5em;
	padding: 0 0 0 1em;
	background: #fff;
	font: 0.85em Monaco, "Courier New", Courier, monospace;
}

A questo punto assegniamo degli stili alle righe di codice creando anche un'indentazione per le regole CSS:

div.code li {
	margin-bottom: 0.5em;
}

div.code li.indent {
	padding-left: 2em;
}

Quindi creiamo l'effetto delle righe alternate con la pseudo-classe strutturale CSS3 nth-child:

div.code li:nth-child(even) {

	background: #eee;

}

Infine, evidenziamo la sintassi CSS usando stili i diversi per i vari elementi che la compongono:

div.code .selector {
	color: #800;
}
div.code .property {
	color: #008;
	font-weight: bold;
}

div.code .value {
	color: #080;
}

pre {
	white-space: pre-line;
	word-wrap: break-word;
}

Potete visionare l'esempio finale in questa pagina.