Styling <pre> tag using simple css code

Description of <pre> tag on HTML

The HTML <pre> tag is employed for indicating preformatted text. The code tag surrounds the code being marked up.

Browsers commonly render pre text during a fixed-pitched font, with whitespace in tactfulness, and while not word wrap.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML pre Tag</title>
</head>
<body>
<pre>
      This text is
 in a fixed-pitch
        font, and it preserves
 both    spaces and line breaks
</pre>
</body>
</html>

This will produce following result:

      This text is
 in a fixed-pitch
        font, and it preserves
 both    spaces and line breaks

In this article i'll share the simple way / simple code CSS for styling of <pre> HTML tag.

The CSS:

pre{background: rgb(248, 248, 248); border-color: rgba(17, 17, 17, 0.0392157) rgba(17, 17, 17, 0.0392157) rgba(17, 17, 17, 0.0392157) rgb(32, 142, 214); border-radius: 4px; border-style: solid; border-width: 1px 1px 1px 5px; box-sizing: border-box; clear: both; color: #4d4e53; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 28px; margin-bottom: 30px; overflow: auto; padding: 15px; tab-size: 4; word-break: break-all; word-wrap: normal;}

Here the test code from jsfiddle (CSS and HTML) section tabs.

I Hope That Code may help you