HTML und CSS für Quelltextanzeige, Tabellen-Layout?

[Robert B.]

Moin Rolf,

je nachdem, wie viel Kontrolle Du über die Counter Du haben willst, und wie alte Browser Du supporten willst (was aber auch bei user-select so eine Sache ist), kannst Du auch einen CSS Counter verwenden. Der wird nicht selektiert.

<pre>&lt;?php</pre>
<pre>// Data-Parameter auslesen</pre>
<pre>$data = $_GET['data'];</pre>
<pre>echo htmlspecialchars($data);</pre>
<pre>header("Location: https://forum.selfhtml.org");</pre>

mit diesem CSS:

pre {
  counter-increment: codeLine;
  margin:0;
  padding: 0.1em;
  background-color: #fff;
}

pre::before {
  content: counter(codeLine);
  display: inline-block;
  width: 3em;
  text-align: right;
  border-right: 1px solid black;
  padding: 0 0.2em;
  margin-right: 0.2em;
}

Das funktioniert auch mit einem pre, das zeilenweise code enthält 😉

<pre>
<code>from sys import argv</code>
<code></code>
<code>if True:</code>
<code>	return False</code>
</pre>

pre code {
	display: inline-block;
	counter-increment: cl;
}
pre code::before {
	content: counter(cl);
	width: 3em;
	margin-right: 1em;
}

Viele Grüße
Robert