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

[TS]

Hello,

wie müsste ich HTML und CSS für eine Quelltextanzeige aufbauen, so dass

• in der Anzeige und beim Druck links am Eand Zeilennummern gezeigt werden.
• man Copy und Paste durchführen könnte ohne die Zeilennummern
• keine lästigen Scrollbalken erscheinen
• Lange Zeilen in der Bildschirmanzeigen und beim Druck umgebrochen werden, im Copy/Paste-Buffer aber tunlichst nicht.
• Eventuell Code-Highlighting (erstmal nur für PHP) möglich ist

?

Mit Tabellen-Layout hatte ich das schon. Aber das ist doch unerwünscht heutzutage? Oder wäre es hier noch statthaft?

Glück Auf
Tom vom Berg

[Matthias Scharwies]

Servus!

Hello,

wie müsste ich HTML und CSS für eine Quelltextanzeige aufbauen, so dass

• in der Anzeige und beim Druck links am Eand Zeilennummern gezeigt werden.
• man Copy und Paste durchführen könnte ohne die Zeilennummern

Schau dir das mal im Wiki an: Node.js/Webserver#ein_erster_Webserver

• Das Markup ist innerhalb von pre, die einzlenen Code-Bestandteile innerhalb von span-Elementen.
• Die Zeilennummerierung ist innerhalb von <span class="lineno">1 </span>
• Im CSS dann das:

.mw-highlight .lineno {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

• keine lästigen Scrollbalken erscheinen
• Lange Zeilen in der Bildschirmanzeigen und beim Druck umgebrochen werden, im Copy/Paste-Buffer aber tunlichst nicht.

span sollte den verfügbaren Raum einnehmen, also sollte das gar nicht auftreten.

• Eventuell Code-Highlighting (erstmal nur für PHP) möglich ist

?

Mit Tabellen-Layout hatte ich das schon. Aber das ist doch unerwünscht heutzutage? Oder wäre es hier noch statthaft?

Glück Auf
Tom vom Berg

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Servus!

Hello,

wie müsste ich HTML und CSS für eine Quelltextanzeige aufbauen, so dass

• in der Anzeige und beim Druck links am Eand Zeilennummern gezeigt werden.
• man Copy und Paste durchführen könnte ohne die Zeilennummern

Noch nicht gelesen:

css-tricks: Creating an Editable Textarea That Supports Syntax-Highlighted Code

Herzliche Grüße

Matthias Scharwies

[Robert B.]

Moin Matthias,

Schau dir das mal im Wiki an: Node.js/Webserver#ein_erster_Webserver

• Das Markup ist innerhalb von pre, die einzlenen Code-Bestandteile innerhalb von span-Elementen.

Wieso eigentlich span und nicht code?

Viele Grüße
Robert

[Matthias Scharwies]

Servus!

Moin Matthias,

Schau dir das mal im Wiki an: Node.js/Webserver#ein_erster_Webserver

• Das Markup ist innerhalb von pre, die einzlenen Code-Bestandteile innerhalb von span-Elementen.

Wieso eigentlich span und nicht code?

a. Weil's von Mediawiki so implementiert wurde und wir das nicht ändern werden.

b. Gute Frage, wsl. weil es wie bei den divs als Bestandteil der div-Suppe einfach das „normale“ Spand-ard-Element ist. Ich hatte gestern mal andere Beispiele angeguckt, die auch alle span-Elemente verwenden (mit einem Pseudo-Element ::before für die Zeilenzählung).

HTML/Tutorials/Code_in_HTML_darstellen

Ich hatte schon überlegt, hier ein Beispiel zu erstellen. Da würde ich dann wohl ein code-Element verwenden

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo,

Wieso eigentlich span und nicht code?

a. Weil's von Mediawiki so implementiert wurde und wir das nicht ändern werden.

b. Gute Frage, wsl. weil es wie bei den divs als Bestandteil der div-Suppe einfach das „normale“ Spand-ard-Element ist. Ich hatte gestern mal andere Beispiele angeguckt, die auch alle span-Elemente verwenden (mit einem Pseudo-Element ::before für die Zeilenzählung).

c. Weil code eher die semantisch passnede Auszeichnung für den gesamten Code ist, nicht für einzelne Fitzelchen davon.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

c. Weil code eher die semantisch passnede Auszeichnung für den gesamten Code ist, nicht für einzelne Fitzelchen davon.

Bist Du sicher? Nach Roberts Hinweis habe ich die Spec geöffnet...

HTML Living Standard §4.5.15 The code element:

The code element represents a fragment of computer code.

Und §4.4.3 The pre Element, Note 2 sagt üner :

Including fragments of computer code, with structure indicated according to the conventions of that language.

Demnach ist

<pre>
<code></code>
<code></code>
<code></code>
</pre>

die von der Spec empfohlene Verwendung. Und je nach Einsatzzweck (Code-Editor oder Code-Beispiel) gehört dann wohl auch noch eine figure drumherum (wobei man dann über die Notwendigkeit von pre reden könnte - ein white-space:pre kann man auch auf der figure definieren bzw. man könnte die <code> Zeilen auch display:block formatieren...

Abgesehen davon - wenn Du <code> für den kompletten Code-Block nehmen willst, womit markupst Du dann die Zeilen, um die Zeilennummern implementieren zu können?

Rolf

[Rolf B]

Hallo Tom,

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 Highlighting kann PHP ja schon alleine (highlight_file)...

Rolf

[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

[Matthias Scharwies]

Servus!

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;
}

Unsere Posts (siehe oben) haben sich überschnitten. Das werde ich beizeiten mal so ins Wiki übernehmen.

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo,

<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>

kein schönes Beispiel. Ein Aufruf von header(), nachdem bereits eine Ausgabe erfolgt ist, geht in die Binsen, wenn man nicht zusätzliche Maßnahmen trifft (output buffering).

Außerdem fehlt dem Ziel von Location: der Local Part. Zumindest der abschließende Slash sollte korrekterweise schon sein.

Live long and pros healthy,
 Martin

[Camping_RIDER]

Aloha ;)

Mit Tabellen-Layout hatte ich das schon. Aber das ist doch unerwünscht heutzutage? Oder wäre es hier noch statthaft?

Ich wage die These, dass man alles, was man früher mit Tabellen-Layout hinbekommen hat, heutzutage mit Grid hinbekommt. Sogar ein wenig besser, weil Tabellen ihre eigenen Restriktionen mitbringen (Abstände, Rahmen anyone?), die für Elemente im Grid nicht gelten.

Unabhängig vom Rest deiner Frage kann man also vermutlich sagen, dass Grid eine zeitgemäße Lösung für diesen Aspekt deiner Fragestellung wäre.

Grüße,

RIDER