Artikel-Hilfsmenü
Donnerstag, 30. Mai 2019 – aktualisiert am Montag, 4. Mai 2020
Sourcecode auf Webseiten darstellen
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Meine Artikel drehen sich ja zumeist um das Thema Webdesign. Und da ist es halt immer wieder nötig, nicht nur "bla bla bla" zu schreiben, sondern "Butter bei die Fische", also Sourcecode.
HTML bietet für diesen Zweck das <code>-Tag.
Damit ist die Sache aber noch nicht erledigt. Denn ohne Styling (CSS) wird der Code auch genau so dargestellt: ohne Styling.
… background: linear-gradient(to bottom,#fff,#fff 50%,#eee 50%,#eee); background-size: 100% 40px; } code { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } code { font-family: Courier,serif; font-size: .9em; display: block; margin: 1em 0; border: 1px solid #ccc; border-left: 5px solid #ccc; …
Damit ist natürlich niemandem gedient. Um den Code lesbar zu machen (natürlich responsive, also auf jeder Monitorgröße), ist CSS erforderlich. Ich verwende diese CSS-Anweisungen:
/* Jede zweite Zeile farblich unterlegen */
code {
background: linear-gradient(to bottom,#fff,#fff 50%,#eee 50%,#eee);
background-size: 100% 40px;
}
code {
font-family: Courier,serif;
font-size: .9em;
display: block;
margin: 1em 0;
border: 1px solid #ccc;
border-left: 5px solid #ccc;
-moz-tab-size: 3;
tab-size: 3;
padding: 6px 0 0 6px;
line-height: 20px;
white-space: pre;
overflow-x: scroll;
background-position-y: 66px !important;
}
code:focus, code:hover {
background: linear-gradient(to bottom,#fff,#fff 50%,#edd 50%,#edd);
background-size: 100% 40px;
overflow-x: scroll;
}
code:hover {
cursor: text;
}
/* Wenn nötig, die Anzeige einer horizontalen Scrollbar erzwingen (außer Firefox) */
code::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height:6px;
}
code::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
}
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.