tag:forum.selfhtml.org,2005:/selfHTML und CSS für Quelltextanzeige, Tabellen-Layout? – SELFHTML-Forum2021-04-19T09:29:09Zhttps://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787405#m1787405TSts-self@online.dehttps://bitworks.de2021-04-17T06:33:38Z2021-04-17T06:33:38ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Hello,</p>
<p>wie müsste ich HTML und CSS für eine Quelltextanzeige aufbauen, so dass</p>
<ul>
<li>in der Anzeige und beim Druck links am Eand Zeilennummern gezeigt werden.</li>
<li>man Copy und Paste durchführen könnte ohne die Zeilennummern</li>
<li>keine lästigen Scrollbalken erscheinen</li>
<li>Lange Zeilen in der Bildschirmanzeigen und beim Druck umgebrochen werden, im Copy/Paste-Buffer aber tunlichst nicht.</li>
<li>Eventuell Code-Highlighting (erstmal nur für PHP) möglich ist</li>
</ul>
<p>?</p>
<p>Mit Tabellen-Layout hatte ich das schon. Aber das ist doch unerwünscht heutzutage? Oder wäre es hier noch statthaft?</p>
<p>Glück Auf<br>
Tom vom Berg</p>
<div class="signature">-- <br>
Es gibt nichts Gutes, außer man tut es!<br>
Das Leben selbst ist der Sinn.
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787408#m1787408Matthias Scharwiesmscharwies@selfhtml.org2021-04-17T08:06:39Z2021-04-17T08:06:39ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Servus!</p>
<blockquote>
<p>Hello,</p>
<p>wie müsste ich HTML und CSS für eine Quelltextanzeige aufbauen, so dass</p>
<ul>
<li>in der Anzeige und beim Druck links am Eand Zeilennummern gezeigt werden.</li>
<li>man Copy und Paste durchführen könnte ohne die Zeilennummern</li>
</ul>
</blockquote>
<p>Schau dir das mal im Wiki an: <a href="https://wiki.selfhtml.org/wiki/Node.js/Webserver#ein_erster_Webserver" rel="nofollow noopener noreferrer">Node.js/Webserver#ein_erster_Webserver</a></p>
<ul>
<li>Das Markup ist innerhalb von <code>pre</code>, die einzlenen Code-Bestandteile innerhalb von span-Elementen.</li>
<li>Die Zeilennummerierung ist innerhalb von <code><span class="lineno">1 </span></code></li>
<li>Im CSS dann das:</li>
</ul>
<pre><code class="block language-css"><span class="token selector">.mw-highlight .lineno</span> <span class="token punctuation">{</span>
<span class="token property">-moz-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">-webkit-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">-ms-user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<blockquote>
<ul>
<li>keine lästigen Scrollbalken erscheinen</li>
<li>Lange Zeilen in der Bildschirmanzeigen und beim Druck umgebrochen werden, im Copy/Paste-Buffer aber tunlichst nicht.</li>
</ul>
</blockquote>
<p>span sollte den verfügbaren Raum einnehmen, also sollte das gar nicht auftreten.</p>
<blockquote>
<ul>
<li>Eventuell Code-Highlighting (erstmal nur für PHP) möglich ist</li>
</ul>
<p>?</p>
<p>Mit Tabellen-Layout hatte ich das schon. Aber das ist doch unerwünscht heutzutage? Oder wäre es hier noch statthaft?</p>
<p>Glück Auf<br>
Tom vom Berg</p>
</blockquote>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787420#m1787420Rolf B2021-04-17T09:33:23Z2021-04-17T09:33:23ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Hallo Tom,</p>
<p>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.</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<"><</span>?php<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>// Data-Parameter auslesen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>$data = $_GET['data'];<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>echo htmlspecialchars($data);<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>header("Location: https://forum.selfhtml.org");<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</code></pre>
<p>mit diesem CSS:</p>
<pre><code class="block language-css"><span class="token selector">pre</span> <span class="token punctuation">{</span>
<span class="token property">counter-increment</span><span class="token punctuation">:</span> codeLine<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">pre::before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>codeLine<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token property">border-right</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0 0.2em<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 0.2em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Das Highlighting kann PHP ja schon alleine (highlight_file)...</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787500#m1787500Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2021-04-19T09:29:09Z2021-04-19T09:29:09ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Aloha ;)</p>
<blockquote>
<p>Mit Tabellen-Layout hatte ich das schon. Aber das ist doch unerwünscht heutzutage? Oder wäre es hier noch statthaft?</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<p>Grüße,</p>
<p>RIDER</p>
<div class="signature">-- <br>
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller<br>
# <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> #
<a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787486#m1787486Matthias Scharwiesmscharwies@selfhtml.org2021-04-18T16:29:02Z2021-04-18T16:29:02ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Servus!</p>
<blockquote>
<p>Servus!</p>
<blockquote>
<p>Hello,</p>
<p>wie müsste ich HTML und CSS für eine Quelltextanzeige aufbauen, so dass</p>
<ul>
<li>in der Anzeige und beim Druck links am Eand Zeilennummern gezeigt werden.</li>
<li>man Copy und Paste durchführen könnte ohne die Zeilennummern</li>
</ul>
</blockquote>
</blockquote>
<p>Noch nicht gelesen:</p>
<p>css-tricks: <a href="https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/" rel="nofollow noopener noreferrer">Creating an Editable Textarea That Supports Syntax-Highlighted Code </a></p>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787491#m1787491Robert B.2021-04-19T06:38:10Z2021-04-19T06:38:10ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Moin Matthias,</p>
<blockquote>
<p>Schau dir das mal im Wiki an: <a href="https://wiki.selfhtml.org/wiki/Node.js/Webserver#ein_erster_Webserver" rel="nofollow noopener noreferrer">Node.js/Webserver#ein_erster_Webserver</a></p>
<ul>
<li>Das Markup ist innerhalb von <code>pre</code>, die einzlenen Code-Bestandteile innerhalb von span-Elementen.</li>
</ul>
</blockquote>
<p>Wieso eigentlich <code>span</code> und nicht <code>code</code>?</p>
<p>Viele Grüße<br>
Robert</p>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787492#m1787492Robert B.2021-04-19T07:11:10Z2021-04-19T07:11:10ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Moin Rolf,</p>
<blockquote>
<p>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.</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<"><</span>?php<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>// Data-Parameter auslesen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>$data = $_GET['data'];<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>echo htmlspecialchars($data);<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>header("Location: https://forum.selfhtml.org");<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</code></pre>
<p>mit diesem CSS:</p>
<pre><code class="block language-css"><span class="token selector">pre</span> <span class="token punctuation">{</span>
<span class="token property">counter-increment</span><span class="token punctuation">:</span> codeLine<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">pre::before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>codeLine<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token property">border-right</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0 0.2em<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 0.2em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>Das funktioniert auch mit einem <code>pre</code>, das zeilenweise <code>code</code> enthält </p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>from sys import argv<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>if True:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span> return False<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</code></pre>
<pre><code class="block language-css"><span class="token selector">pre code</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">counter-increment</span><span class="token punctuation">:</span> cl<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">pre code::before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>cl<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Viele Grüße<br>
Robert</p>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787496#m1787496Der Martin2021-04-19T07:27:08Z2021-04-19T07:27:08ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Hallo,</p>
<blockquote>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<"><</span>?php<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>// Data-Parameter auslesen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>$data = $_GET['data'];<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>echo htmlspecialchars($data);<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>header("Location: https://forum.selfhtml.org");<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</code></pre>
</blockquote>
<p>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).</p>
<p>Außerdem fehlt dem Ziel von Location: der Local Part. Zumindest der abschließende Slash sollte korrekterweise schon sein.</p>
<p>Live long and <s>pros</s> healthy,<br>
Martin</p>
<div class="signature">-- <br>
Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787493#m1787493Matthias Scharwiesmscharwies@selfhtml.org2021-04-19T07:11:15Z2021-04-19T07:11:15ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Servus!</p>
<blockquote>
<p>Moin Matthias,</p>
<blockquote>
<p>Schau dir das mal im Wiki an: <a href="https://wiki.selfhtml.org/wiki/Node.js/Webserver#ein_erster_Webserver" rel="nofollow noopener noreferrer">Node.js/Webserver#ein_erster_Webserver</a></p>
<ul>
<li>Das Markup ist innerhalb von <code>pre</code>, die einzlenen Code-Bestandteile innerhalb von span-Elementen.</li>
</ul>
</blockquote>
<p>Wieso eigentlich <code>span</code> und nicht <code>code</code>?</p>
</blockquote>
<p><strong>a.</strong> Weil's von Mediawiki so implementiert wurde und wir das nicht ändern werden.</p>
<p><strong>b.</strong> Gute Frage, wsl. weil es wie bei den divs als Bestandteil der div-Suppe einfach das „normale“ S<strong>p</strong>and-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).</p>
<p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Code_in_HTML_darstellen" rel="nofollow noopener noreferrer">HTML/Tutorials/Code_in_HTML_darstellen</a></p>
<p>Ich hatte schon überlegt, hier ein Beispiel zu erstellen. Da würde ich dann wohl ein code-Element verwenden</p>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787494#m1787494Matthias Scharwiesmscharwies@selfhtml.org2021-04-19T07:13:13Z2021-04-19T07:13:13ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Servus!</p>
<blockquote>
<p>Moin Rolf,</p>
<blockquote>
<p>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.</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<"><</span>?php<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>// Data-Parameter auslesen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>$data = $_GET['data'];<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>echo htmlspecialchars($data);<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>header("Location: https://forum.selfhtml.org");<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</code></pre>
<p>mit diesem CSS:</p>
<pre><code class="block language-css"><span class="token selector">pre</span> <span class="token punctuation">{</span>
<span class="token property">counter-increment</span><span class="token punctuation">:</span> codeLine<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">pre::before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>codeLine<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token property">border-right</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 0 0.2em<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 0.2em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>Das funktioniert auch mit einem <code>pre</code>, das zeilenweise <code>code</code> enthält </p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>from sys import argv<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>if True:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span> return False<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</code></pre>
<pre><code class="block language-css"><span class="token selector">pre code</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">counter-increment</span><span class="token punctuation">:</span> cl<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">pre code::before</span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>cl<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>Unsere Posts (siehe oben) haben sich überschnitten. Das werde ich beizeiten mal so ins Wiki übernehmen.</p>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787495#m1787495Der Martin2021-04-19T07:21:58Z2021-04-19T07:21:58ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Hallo,</p>
<blockquote>
<blockquote>
<p>Wieso eigentlich <code>span</code> und nicht <code>code</code>?</p>
</blockquote>
<p><strong>a.</strong> Weil's von Mediawiki so implementiert wurde und wir das nicht ändern werden.</p>
<p><strong>b.</strong> Gute Frage, wsl. weil es wie bei den divs als Bestandteil der div-Suppe einfach das „normale“ S<strong>p</strong>and-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).</p>
</blockquote>
<p><strong>c.</strong> Weil <em>code</em> eher die semantisch passnede Auszeichnung für den gesamten Code ist, nicht für einzelne Fitzelchen davon.</p>
<p>Live long and <s>pros</s> healthy,<br>
Martin</p>
<div class="signature">-- <br>
Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.
</div>
https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787497#m1787497Rolf B2021-04-19T07:43:24Z2021-04-19T07:43:24ZHTML und CSS für Quelltextanzeige, Tabellen-Layout?<p>Hallo Martin,</p>
<blockquote>
<p>c. Weil code eher die semantisch passnede Auszeichnung für den gesamten Code ist, nicht für einzelne Fitzelchen davon.</p>
</blockquote>
<p>Bist Du sicher? Nach Roberts Hinweis habe ich die Spec geöffnet...</p>
<p><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element" rel="nofollow noopener noreferrer">HTML Living Standard §4.5.15 The code element</a>:</p>
<blockquote>
<p>The code element represents a fragment of computer code.</p>
</blockquote>
<p>Und <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element" rel="nofollow noopener noreferrer">§4.4.3 The pre Element, Note 2</a> sagt üner :</p>
<blockquote>
<p>Including fragments of computer code, with structure indicated according to the conventions of that language.</p>
</blockquote>
<p>Demnach ist</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
</code></pre>
<p>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...</p>
<p>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?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>