Simple CSS for Styling pre html tag

Styling `<pre>` tag using simple css code

Simple CSS for Styling pre html tag | WMI - https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPU5mp9B9Vq99lF8d8-apVN1I1DoiA9DcmpTwYsP1MY5hRB8oY

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>

Above codes 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;
}