[HTML und CSS] Codebox mit Zeilennummern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufbrechen
auto
beispiel
blocken
boxen
code
dank
display
endeffekt
ermitteln
fragment
http
position
profi
text
type
url
vorbereiten
welt
zeile
-
Hallo!
Ich habe vor eine Codebox zu basteln, und zwar möglichst ohne Javascript, also (wenn es geht) nur mit HTML und CSS.
Ich habe schon eine Zeit lang bei Google gesucht aber leider nichts gefunden.
Ich möchte zwei Sachen einbauen, davon ist mir das Zweite aber nicht so wichtig:
- Ich möchte (auf jeden Fall) Zeilennummern am linken Rand.
- Ich hatte die Idee, dass, wenn man über eine Zeile/Zeilennummer fährt, die Zeile einen etwas dunkleren Hintergrund bekommt.
Ich habe schon die Basis-Box, doch weiter komme ich nicht. Ich brauche eure Hilfe.
Mein bisheriger Code:
CSS:
code { background: #FAFAFA; border: 1px solid #000000; font: 13px Courier, monospace; line-height: 16px; overflow: scroll; padding: 10px; }
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="codebox.css"> </head> <body> <code> Simon ist cool! </code> </body> </html>
Ich hoffe, ihr könnt mir helfen!
Schon einmal Danke im voraus!
MfG. Simon D. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du du für Zeilennummern etwas "abzählen" musst und auch für den Hovereffekt keine CSS Pseudoklasse vorhanden ist, kannst du nach meinem Wissensstand nur Javascript miteinbinden.
Aber ich bin kein Profi inauf diesem Gebiet, also kann es sein dass ich mich irre. -
Hallo!
cpurgstaller schrieb:
Du du für Zeilennummern etwas "abzählen" musst und auch für den Hovereffekt keine CSS Pseudoklasse vorhanden ist, kannst du nach meinem Wissensstand nur Javascript miteinbinden.
Aber ich bin kein Profi inauf diesem Gebiet, also kann es sein dass ich mich irre.
Erst einmal, cpurgstaller, danke für deine Antowort!
Ich habe nun bei Google nach "zeilennummer code" gefunden und bin dann auf [urlhttp://www.selfphp.de/kochbuch/kochbuch.php?code=39]diesen Artikel[/url] gestoßen. Ich galube, das ist, was ich suche.
Ich werde mich dann später noch einmal melden, um von dem Ergebnis zu berichten.
MfG. Simon D. -
- Ich möchte (auf jeden Fall) Zeilennummern am linken Rand.
- Ich hatte die Idee, dass, wenn man über eine Zeile/Zeilennummer fährt, die Zeile einen etwas dunkleren Hintergrund bekommt.
Bitteschön
<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> body { font: normal 16px Helvetica, Arial, sans-serif; } .table { display: table; border: 1px solid #eee; } .table-row { display: table-row; border-bottom: 1px solid #eee; } .table-row:last-child { border-bottom: none; } .table-row:nth-child(odd) { background-color: #f5f5f5; } .table-row:hover { background-color: #ccc; } .table-row > div { display: table-cell; padding: 3px 6px; } .table-row > div:first-child { color: #999; font-size: 80%; } </style> </head> <body> <div class="table"> <div class="table-row"> <div>1</div> <div> <code>Zeile 1</code> </div> </div> <div class="table-row"> <div>2</div> <div> <code>Zeile 2</code> </div> </div> <div class="table-row"> <div>3</div> <div> <code>Zeile 3</code> </div> </div> <div class="table-row"> <div>4</div> <div> <code>Zeile 4</code> </div> </div> <div class="table-row"> <div>5</div> <div> <code>Zeile 5</code> </div> </div> </div> </body> </html> -
Hallo,
ich hätte da so in etwa gelöst, es wird allerdings PHP benötigt: online-Beispiel
Der Code dazu ist denkbar simpel PHP:<?php // $code wird hier hart gefüllt, // schlauer ist es natürlich den eigentlich code // in einer Datei zu speichern und $code dann // wie folgt zu füllen: // $code = file_get_contents(CODE_FILE); $code = <<<'HERE_ENDS' Hallo Welt! Dieses ist ein einfaches Beispiel. Diese Zeile ist zwar äußerst unnötig, aber sie zeigt sehr gut, dass das Code-Fragment auch überlange Texte gut verabreitet. Und damit man dies auch definitiv sieht wird diese Zeile entsprechend lang gemacht. Und zwar indem einfach sinnlose Phrasen aneinander gereit werden, bis die Zeile eine stattliche Länge erreicht hat. HERE_ENDS; // code in einzelene Zeilen aufbrechen $codelines = explode("\n", $code); // ermitteln, wie breit der Platz für die Nummerierung sein muss $width = strlen(''.count($codelines))*7; // Ausgabe vorbereiten $code = ''; foreach($codelines as $line){ $code .= '<span class="line">' . $line . '</span>'; } require_once 'code-box.html';
HTML:<!Doctype html> <html lang="de"> <!--[if IE]><![endif]--><!-- Hack for IE performance view: http://www.phpied.com/conditional-comments-block-downloads --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Ein Beispiel für eine simple Code-box" /> <title>Code-box</title> <style> @import url('code-box.css'); code .line { padding-left:<?php echo $width+9; ?>px; } code .line:before { width:<?php echo $width; ?>px; } </style> </head> <!--[if lt IE 7]><body class="ie ie6"><![endif]--> <!--[if IE 7]><body class="ie ie7"><![endif]--> <!--[if IE 8]><body class="ie ie8"><![endif]--> <!--[if !IE]><!--><body class="no-ie"><!-- <![endif]--> <code><?php echo $code; ?></code> </body> </html>
CSS:code { display:block; overflow:auto; border:1px solid #000000; background:#fafafa; font:13px/16px inherit; counter-reset:foo; } code .line { display:block; position:relative; margin:0; padding:0; counter-increment:foo; } .pre code .line { white-space:pre; } code .line:before { position:absolute; top:0; left:0; height:100%; padding:0 3px; background:rgba(0,0,127,.3); text-align:right; content:counter(foo) ''; } code .line:nth-of-type(even) { background:#ccc; } code .line:hover { background:rgba(0,127,0,.7); }
Wie man sieht sehr simpel.
Im online-Beispiel kann man noch auswählen, ob Zeilen umgebrochen werden sollen, oder nicht.
Aber das ist ja im Endeffekt auch egal.
Mit freundlichen Grüßen -
Hallo!
Erst einmal Danke für die Antworten.
pcw schrieb:
<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> body { font: normal 16px Helvetica, Arial, sans-serif; } .table { display: table; border: 1px solid #eee; } .table-row { display: table-row; border-bottom: 1px solid #eee; } .table-row:last-child { border-bottom: none; } .table-row:nth-child(odd) { background-color: #f5f5f5; } .table-row:hover { background-color: #ccc; } .table-row > div { display: table-cell; padding: 3px 6px; } .table-row > div:first-child { color: #999; font-size: 80%; } </style> </head> <body> <div class="table"> <div class="table-row"> <div>1</div> <div> <code>Zeile 1</code> </div> </div> <div class="table-row"> <div>2</div> <div> <code>Zeile 2</code> </div> </div> <div class="table-row"> <div>3</div> <div> <code>Zeile 3</code> </div> </div> <div class="table-row"> <div>4</div> <div> <code>Zeile 4</code> </div> </div> <div class="table-row"> <div>5</div> <div> <code>Zeile 5</code> </div> </div> </div> </body> </html>
@pcw: Diese Lösung wäre mir auch selbst eingefallen, doch ich finde sie nicht gut, weil man selbst um einiges mehr Quelltext schreiben muss.
So, nun zu dir nemoinho:
nemoinho schrieb:
Hallo,
ich hätte da so in etwa gelöst, es wird allerdings PHP benötigt: online-Beispiel
Der Code dazu ist denkbar simpel PHP:<?php // $code wird hier hart gefüllt, // schlauer ist es natürlich den eigentlich code // in einer Datei zu speichern und $code dann // wie folgt zu füllen: // $code = file_get_contents(CODE_FILE); $code = <<<'HERE_ENDS' Hallo Welt! Dieses ist ein einfaches Beispiel. Diese Zeile ist zwar äußerst unnötig, aber sie zeigt sehr gut, dass das Code-Fragment auch überlange Texte gut verabreitet. Und damit man dies auch definitiv sieht wird diese Zeile entsprechend lang gemacht. Und zwar indem einfach sinnlose Phrasen aneinander gereit werden, bis die Zeile eine stattliche Länge erreicht hat. HERE_ENDS; // code in einzelene Zeilen aufbrechen $codelines = explode("\n", $code); // ermitteln, wie breit der Platz für die Nummerierung sein muss $width = strlen(''.count($codelines))*7; // Ausgabe vorbereiten $code = ''; foreach($codelines as $line){ $code .= '<span class="line">' . $line . '</span>'; } require_once 'code-box.html';
HTML:<!Doctype html> <html lang="de"> <!--[if IE]><![endif]--><!-- Hack for IE performance view: http://www.phpied.com/conditional-comments-block-downloads --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Ein Beispiel für eine simple Code-box" /> <title>Code-box</title> <style> @import url('code-box.css'); code .line { padding-left:<?php echo $width+9; ?>px; } code .line:before { width:<?php echo $width; ?>px; } </style> </head> <!--[if lt IE 7]><body class="ie ie6"><![endif]--> <!--[if IE 7]><body class="ie ie7"><![endif]--> <!--[if IE 8]><body class="ie ie8"><![endif]--> <!--[if !IE]><!--><body class="no-ie"><!-- <![endif]--> <code><?php echo $code; ?></code> </body> </html>
CSS:code { display:block; overflow:auto; border:1px solid #000000; background:#fafafa; font:13px/16px inherit; counter-reset:foo; } code .line { display:block; position:relative; margin:0; padding:0; counter-increment:foo; } .pre code .line { white-space:pre; } code .line:before { position:absolute; top:0; left:0; height:100%; padding:0 3px; background:rgba(0,0,127,.3); text-align:right; content:counter(foo) ''; } code .line:nth-of-type(even) { background:#ccc; } code .line:hover { background:rgba(0,127,0,.7); }
Wie man sieht sehr simpel.
Im online-Beispiel kann man noch auswählen, ob Zeilen umgebrochen werden sollen, oder nicht.
Aber das ist ja im Endeffekt auch egal.
Mit freundlichen Grüßen
Danke , dasss ist GENAU das, was ich gesucht habe. Ich habe ehrlich gesagt auch nicht gedacht, dass es eine Lösung ohne PHP/JS geben würde. Ich werde das mal gleich einbauen.
Noch einmal DANKE!!!
MfG. Simon D. -
simon-d schrieb:
@pcw: Diese Lösung wäre mir auch selbst eingefallen....
Uhh .... *zusammenzuck* / *verbeug* ... wie konn' ich nur ... . dann stell deine Fragen präziser!!!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
