Problem when using pre-tag
In my project, we need to display a code snippet, so I use the pre and code (both) tag.
PROBLEM
When the code snippet is displayed, it displays spaces before and after the actual content. How do I remove those spaces before and after a snippet.
Remove spaces inside your pre tag.
Example:
<pre>
This is a test.
We want a new line here.
</pre>
it should be
<pre>This is a test.
We want a new line here.</pre>
As of HTML 5, the pre tag is no longer supported if you want to use its features. Create your own css class like this ...
.pre
{
border: 1px solid #999;
page-break-inside: avoid;
display: block;
padding: 3px 3px 2px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
/*white-space: pre;
white-space: pre-wrap;*/
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333333;
}
.pre code
{
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
Canceling /*white-space: pre;
white-space: pre-wrap;*/
will cause your white spaces to act like a div. use it as a class to give the same look and feel for your elements.
The tag <pre>
is for preformatted text. This means you have to do the formatting yourself - all of this, including making sure the spaces are exactly what you want to display. Do not print extra spaces between tags <pre>
and the content inside them.
You need to make sure the code is formatted correctly, the pre tag tells the browser to display the text inside pre "as is".
The little thing that I myself have found useful is to use this php to import the file, so I don't have to cut and paste all the time.
<?php
$file = "code/hello_world.c";
print "<p>Filename: <a href=\"".$file."\">".$file."</a></p>\n";
print "<div class=\"codebox\"><pre>\n\n";
$lines = file($file); foreach ($lines as $line_num => $line)
{
echo htmlspecialchars($line) . "";
}
print "\n</pre></div>\n";
?>
And then to make it look like code I add this to my CSS
PRE {
font-family: 'Monotype.com', Courier New, monospace;
font-size: 0.7em;
}
.codebox {
width: 90%;
background-color: #000000;
color: #FFFFFF;
}
.codebox pre {
margin: 0 0 0 20px;
}
You may find it helpful.