Problem while using pre tag.

Question

In my project we need to display code snippet, so I am using pre and code(both) tag.

PROBLEM

While displaying the code snippet it is displaying white spaces before and after the actual content. How to remove these white spaces before and after the snippet.

Answer 1

Remove the whitespace inside your pre tag.

Example:

<pre>
  This is a test.

  We want a new line here.
</pre>

should be

<pre>This is a test.

We want a new line here.</pre>

Answer 2

The <pre> tag is for pre-formatted text. That means you need to do the formatting yourself - all of it, including making sure the whitespace is exactly what you want to display. Don't output excess whitespace between your <pre> tags and the content inside of them.

Answer 3

You need to make sure the code is formatted correctly, the pre tag tells the browser to show the text inside the pre "as is".

A little thing that I my self has 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 in 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;
}

Maybe you find it helpful.