PDA

View Full Version : Code


cuberts
June 16th, 2010, 12:48 AM
In normal site editors, how do you do the code wrapping thing like this:


How do you make it like this so that the code is inside the box
THanks
cuberts
June 16th, 2010, 12:53 AM
you cant do it with normal code tags
trent.josephsen
June 16th, 2010, 01:08 AM
I'm afraid you'll have to clarify a bit. What do you mean by "normal site editors", and what "wrapping thing" are you referring to? Neither of your code snippets wrap for me.
schauerlich
June 16th, 2010, 02:29 AM
I think he means "how would you write the HTML for a [code] box?"
trent.josephsen
June 16th, 2010, 03:32 AM
Like putting a border around it?

CSS:

.codebox {
border: 1px inset;
}

HTML:

<code class="codebox">
This text will appear in a box with a 1-pixel border of type "inset".
</code>

That gives me a close approximation of this forum's code boxes.
cuberts
June 16th, 2010, 03:40 AM
Like putting a border around it?

CSS:

.codebox {
border: 1px inset;
}HTML:

<code class="codebox">
This text will appear in a box with a 1-pixel border of type "inset".
</code>That gives me a close approximation of this forum's code boxes.But that will keep going and you will have to scroll across the page if it is a super long line
Krupski
June 16th, 2010, 04:51 PM
Thanks now I will mark this as a solved thread

You should use the <pre> tag (meaning pre-formatted text) and also use this style:

pre {
font-family: monospace;
white-space: pre-wrap;
}

"pre-wrap" will preserve whitespaces (as is necessary to properly display code), but if you have a super long line, it will wrap in your "codebox" rather than creating a giant horizontal scrollbar in the browser.

-- Roger
cuberts
June 16th, 2010, 11:42 PM
You should use the <pre> tag (meaning pre-formatted text) and also use this style:

pre {
font-family: monospace;
white-space: pre-wrap;
}

"pre-wrap" will preserve whitespaces (as is necessary to properly display code), but if you have a super long line, it will wrap in your "codebox" rather than creating a giant horizontal scrollbar in the browser.

-- RogerShould the code look something like this:
<html>
<head><title>Code</title></head>
<style type="text/CSS">
pre {
font-family: monospace;
white-space: pre-wrap;
}
</style>
<body>
<pre>This is where the code will go</pre>
</body>
</html>
Krupski
June 17th, 2010, 01:11 AM
Should the code look something like this:


To see what I mean (and what the "pre-wrap" thing does), copy-n-paste this HTML into a file, then open it with your browser.

Now, notice how the one comment line is very long. Move your mouse pointer into the box and watch the "pre-wrap" kick in. This should explain all.



<html>
<title>Code</title>
<head>
<style type="text/css">
pre {
border: 1px solid #000000;
padding: 0.5em;
width: 50%;
font-family: monospace;
}
pre:hover {
white-space: pre-wrap;
}
</style>
</head>

<body>
<pre>
/* this is a sample of code inside pre tags */
for (i=0; i<10; i++)
{
printf("Hello there\n"); /* note the preserved tabs */
}
/* now we get a really long line of text that the pre tag would try to preserve the whitespaces for, but if it didn't wrap around at the end then it would make the window very wide and create a horizontal scrollbar. But, "pre-wrap" prevents this from happening. Instead the long text gets wrapped at the first appropriate whitespace (which is either a space or a tab) */
</pre>
</body>
</html>



Hope this helps...

-- Roger
crush304
June 17th, 2010, 03:42 AM
if you want to see how something works on an html page, right click on the page and select 'view page source' or 'view source'
cuberts
June 17th, 2010, 10:02 AM
if you want to see how something works on an html page, right click on the page and select 'view page source' or 'view source'Yes thanks for all the help that you are giving me, and yes I know that.
cuberts
June 17th, 2010, 11:05 AM
To see what I mean (and what the "pre-wrap" thing does), copy-n-paste this HTML into a file, then open it with your browser.

Now, notice how the one comment line is very long. Move your mouse pointer into the box and watch the "pre-wrap" kick in. This should explain all.



<html>
<title>Code</title>
<head>
<style type="text/css">
pre {
border: 1px solid #000000;
padding: 0.5em;
width: 50%;
font-family: monospace;
}
pre:hover {
white-space: pre-wrap;
}
</style>
</head>

<body>
<pre>
/* this is a sample of code inside pre tags */
for (i=0; i<10; i++)
{
printf("Hello there\n"); /* note the preserved tabs */
}
/* now we get a really long line of text that the pre tag would try to preserve the whitespaces for, but if it didn't wrap around at the end then it would make the window very wide and create a horizontal scrollbar. But, "pre-wrap" prevents this from happening. Instead the long text gets wrapped at the first appropriate whitespace (which is either a space or a tab) */
</pre>
</body>
</html>

Hope this helps...

-- RogerCan you give me the code to do the prewrap thing, without having to take the mouse over the codebox? Because the long line just looks horrible when it is out of the code box.