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>Above codes will produce following result:
This text is
in a fixed-pitch
font, and it preserves
both spaces and line breaksIn 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