tag:forum.selfhtml.org,2005:/self HTML und CSS für Quelltextanzeige, Tabellen-Layout? – SELFHTML-Forum 2021-04-19T09:29:09Z https://forum.selfhtml.org/self/2021/apr/17/html-und-css-fur-quelltextanzeige-tabellen-layout/1787405#m1787405 TS ts-self@online.de https://bitworks.de 2021-04-17T06:33:38Z 2021-04-17T06:33:38Z HTML 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#m1787408 Matthias Scharwies mscharwies@selfhtml.org 2021-04-17T08:06:39Z 2021-04-17T08:06:39Z HTML 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#m1787420 Rolf B 2021-04-17T09:33:23Z 2021-04-17T09:33:23Z HTML 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="<">&lt;</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#m1787500 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2021-04-19T09:29:09Z 2021-04-19T09:29:09Z HTML 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#m1787486 Matthias Scharwies mscharwies@selfhtml.org 2021-04-18T16:29:02Z 2021-04-18T16:29:02Z HTML 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#m1787491 Robert B. 2021-04-19T06:38:10Z 2021-04-19T06:38:10Z HTML 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#m1787492 Robert B. 2021-04-19T07:11:10Z 2021-04-19T07:11:10Z HTML 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="<">&lt;</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#m1787496 Der Martin 2021-04-19T07:27:08Z 2021-04-19T07:27:08Z HTML 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="<">&lt;</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#m1787493 Matthias Scharwies mscharwies@selfhtml.org 2021-04-19T07:11:15Z 2021-04-19T07:11:15Z HTML 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#m1787494 Matthias Scharwies mscharwies@selfhtml.org 2021-04-19T07:13:13Z 2021-04-19T07:13:13Z HTML 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="<">&lt;</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#m1787495 Der Martin 2021-04-19T07:21:58Z 2021-04-19T07:21:58Z HTML 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#m1787497 Rolf B 2021-04-19T07:43:24Z 2021-04-19T07:43:24Z HTML 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>