Zeilennummerierung ohne Javascript

Hero

Hi@all!

Ich prograqmmiere seit 1999 für das Web und bin ein erfahrener Programmierer. Für meine Projekte verwende ich nahezu ausschließlich Selbstgeskriptetes. Nun habe ich aber ein Problem, das ich alleine nicht lösen kann und das mich an den rand des Wahnsinns treibt. Ich versuche mich an einem Synthaxhiglighter ohne Javascript. Das eigentliche Skripten ist kein Ding, das habe ich erledigt. Woran ich scheitere ist, die Codeabschnitte so darzustellen, dass Zeilennummern zwar sichtbar sind, diese aber nicht mit ausgewählt werden, wenn man den Code markiert. Wie gesagt, soll das ohne Javascript funktionieren.

Was am Nächsten an meine Bedürfnisse kommt, ist eine Ordered List. Die Nummern werden im Gegensatz zu einer Tabelle nicht mitmarkiert. Da stören mich allerdings die Punkte hinter den Zeilennummeren.

Man kann die Nummerierung einer Ordered List zwar durch einen eigenen Counter ersetzen, dann allerdings sind die Nummern nicht mehr rechtsbündig.

Was ich also suche, ist ein Weg, wie ich folgendes realisieren kann.

1. Rechtsbündige Zeilennummerierung ohne Punkt.
2. Der Text sollte ohne Zeilennummern zu markieren sein.
3. Javascript sollte nicht verwendet werden.

Für Hilfe wäre ich sehr dankbar. Vielleicht kennt jemand einen Weg, wie das zu realisieren ist?!

Hier ein Beispiel, wie das aussehen soll:

So sollte der Text zu markieren sein:

Arne Drews

Hallo,

Passiert die Ausgabe in PHP oder wie ist das realisiert?
Ein bisschen detaillreichere Info wäre gut...

Hero

Ich mache das in PHP. Ich suche also eine HTML/CSS-Lösung für die Nummerierung. Das geht auch aus dem Beitrag hervor.

Arne Drews

Nö, von PHP steht in #1 nichts! Hätte auch Perl, C/C++, Python, or something else sein können...
Du wirst aber ohne JS ( wobei ich die Einstellung grundsätzlich gut finde! ) nicht viel weiter kommen, wie Du schon bist.

Evtl. hilft Dir aber list-style-position, habe ich jetzt aber nicht getestet...

Hero

Aber es ist doch egal, welche Skriptsprache im Backend verwendet wird. Browser interpretieren nichts anderes als HTML und CSS. Javascript hatte ich bereits ausgeschlossen. Also ...

Arne Drews

Man kann die Ausgabe aber prima vorbereiten Server seitig. Und da gibt es unterschiedliche Möglichkeiten je nach eingesetzter Technologie.
Ich bin davon ausgegangen, dass Dir das bewusst ist, weil Du selbst sagst, dass Du ein erfahrener Programmierer bist. Da HTML und CSS nichts mit Programmierung zu tun haben, habe ich angenommen, Du weißt, worauf ich hinaus wollte.

Um es in Deinen Worten zu sagen: "Geht aus den Beiträgen hervor... Also..."
Ich bin raus...

Hero

Ich habe nun doch noch selbst eine Lösung im Netz gefunden, wie ich eine Ordered List mit rechtsbündigen Zeilennummern versehen kann. W3C sei Dank!

https://www.w3.org/Style/Examples/007/color-bullets.en.html

Mein CSS sieht so aus:

Code

code ol {
    list-style: none;
    list-style-position: inside;
    counter-reset: li;
    display: block;
    overflow-x: auto;
}


code li {
    counter-increment: li;
    white-space: nowrap;
}


code ol li::before {
    content: counter(li);
    display: inline-block;
    width: 1rem;
    margin-right: 1rem;
    text-align: right;
    direction: rtl;
}

Alles anzeigen

Funzt!

djheke

Zu spät

Code

<!DOCTYPE html
<head> 
<title>Increment</title> 

<style> 
* {
 margin:0;
 padding:0;
  box-sizing:border-box; 
}
body {
 counter-reset: span;    
 width:100%; 
 margin:0;
 padding:0; 

}




span:before {
 counter-increment: span;                 
 content:counter(span); 
 padding:7px;
 margin:-5px 10px -5px 0;
 text-align:right;
 display:inline-block;
 min-width:2.5em;
 border-right:1px solid #555;
 color:#000;
 
}


pre {
 background:#eee;
 margin:20px;
 padding:5px 2.5em 5px 0;
 max-width:100%;
 overflow:auto;
}






.reset {
 counter-reset: span;
}


</style> 


</head> 
<body> 
<pre>
<span></span><b>Zeile</b>
<span></span><b>Zeile</b>
<span></span><b>Zeile</b>
<span></span><b>Zeile</b>
</pre>
</body> 
</html>

Alles anzeigen

Hero

Zitat von djheke

Zu spät

Trotzdem Danke.

Arne Drews

Bei der Variante haut aber das doch noch nicht hin, oder?

Zitat

Die Nummern werden im Gegensatz zu einer Tabelle nicht mitmarkiert.

modem-kind

doch haut schon hin solange es ZWEI Elemente sind
das erste (hier <span>) ohne Content - nur mir dem
:before { counter-increment: span;
content:counter(span);
...
}
"befüllt" wird .

aber jeder Inhalt des zweiten Elements (hier <b>) egal was drin ist u. wie lang bekommt nur EINE einzige Zeilennummer
das kann für eine Listing Anzeige nicht sinnvoll sein -
- das geht natürlich auch mit
<table> <tr> <td class="count"><td> <td>ListingZeile<td> </tr> </table>

also muss doch per PHP oder so ein Ende jeder Zeile erkannt u. gesetzt werden
nach irgendwelchen bestimmten Zeichen damit dann die zwei neuen Elemente angelegt werden
für neue Zeilen Nummern-
bei Seitenquelltext Anzeigen sieht man häufig nach </element> eine neue Zeile
aber es gibt ja noch viele andere Zeilen die anders enden zb. ; oder } usw.

wie das aussieht bei Hero würde mich Interessieren... jo
Danke

Gruß modem-kind

Hero

Zitat von modem-kind

wie das aussieht bei Hero würde mich Interessieren... jo

Ich verwende eine Ordered List. Den CSS-Code habe ich bereits gepostet. Der große Vorteil einer OL ist, dass die Zeilennummern nicht mit ausgewählt werden. Bei einer Tabelle wäre das anders.

Die Alternative wären zwei getrennte Elemente. Also eines für Zeilennummern und ein weiteres Element für den Highlightcode. Das wäre aber nicht elegant. Es musste eine Möglichkeit geben, der OL den letzten Schliff zu geben. Die kam meiner Vorstellung ja bereits am Nächsten. Gefunden habe ich die Lösung am Ende selbst bei W3C. Nun haben die Code-Abschnitte rechtsbündige Zeilennummern ohne Punkt und werden nicht mit ausgewählt, weil die Nummerierung der OL nicht zum Content gehört.

In ein paar Tagen geht meine Seite damit online. Bisher habe ich einen JS-Highlighter verwendet. Das war zwar gut, aber ich wollte davon weg. Eine Webseite sollte im Wesentlichen ohne JS funktionieren. Das Highlighting gehört auf meiner Seite einfach dazu. Programmiererisch kein Ding, aber beim Styling Tricky, wenn man anspruchsvoll ist.

djheke

Habe mal mein Beispiel etwas geändert und bissel bunt gemacht(Highlighter).

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pyramide</title>
<style>


body {
 counter-reset: span;    
 width:100%; 
 margin:0;
 padding:0; 
}


span:before {
 counter-increment: span;                 
 content:counter(span); 
 padding:7px;
 margin:-5px 10px -5px 0;
 text-align:right;
 display:inline-block;
 min-width:2.5em;
 border-right:1px solid #555;
 color:#fff;
 
}


pre {
 background:#333;
 color:#fff;
 margin:20px;
 padding:5px 2.5em 5px 0;
 max-width:100%;
 overflow:auto;
}


.reset {
 counter-reset: span;
}




.tag {
 color:springgreen;
}


.attr {
 color:deeppink;
}


.value {
 color:aqua;
}
</style> 
</head>
<body>
<pre>
<code>
<span>&lt;<b class="tag">div <b class="attr">id</b>=<b class="value">"menu"</b></b>&gt;</span>
<span>    &lt;<b class="tag">ul</b>&gt;</span>
<span>      &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"topmenu"</b></b>&gt;</span>
<span>        &lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Menü 1&lt;/<b class="tag">a</b>&gt;</span>
<span>        &lt;<b class="tag">ul</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 1.1&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 1.2&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>        &lt;/<b class="tag">ul</b>&gt;</span>
<span>      &lt;/<b class="tag">li</b>&gt;</span>
<span>      &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"topmenu"</b></b>&gt;</span>
<span>        &lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Menü 2&lt;/<b class="tag">a</b>&gt;</span>
<span>        &lt;<b class="tag">ul</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 2.1&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 2.2&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>        &lt;/<b class="tag">ul</b>&gt;</span>
<span>      &lt;/<b class="tag">li</b>&gt;</span>
<span>      &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"topmenu"</b></b>&gt;</span>
<span>        &lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Menü 3&lt;/<b class="tag">a</b>&gt;</span>
<span>        &lt;<b class="tag">ul</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 3.1&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>          &lt;<b class="tag">li <b class="attr">class</b>=<b class="value">"submenu"</b></b>&gt;&lt;<b class="tag">a <b class="attr">href</b>=<b class="value">""</b></b>&gt;Unterpunkt 3.2&lt;/<b class="tag">a</b>&gt;&lt;/<b class="tag">li</b>&gt;</span>
<span>        &lt;/<b class="tag">ul</b>&gt;</span>
<span>      &lt;/<b class="tag">li</b>&gt;</span>
<span>    &lt;/<b class="tag">ul</b>&gt;</span>
<span>  &lt;/<b class="tag">div</b>&gt;</span>
</code>
</pre>
</body>
</html>

Alles anzeigen

Hero

Zitat von djheke

Habe mal mein Beispiel...

Ja, das erfüllt die Bedingungen ebenfalls. Kann man so machen.

Tags