CSS Dark Pre Tag Styles

Posted by LaravelIndia - 4 years ago

Considerations for styling the HTML pre tag

The pre tag in HTML is used to define the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers

body { background-color: #333; }
pre { 
    margin: 20px; padding: 20px; 
    color: #aaa; background-color: #222;
    white-space: pre; text-shadow: 0 1px 0 #000;
    border-radius: 15px; border-bottom: 1px solid #555;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4) inset, 0 0 20px rgba(0,0,0,0.2) inset;
    font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}