How to display code

How to display code
written by: admin

Date Written: 1/23/07 Last Updated: 9/12/20

How to post code in articles on your website.

Method 1: Use textarea
Method 2: Text formatting.

Method 1: textarea with CSS

The below example demonstrates the textarea approach. Only IE seems to display the code perfectly though.

This code:

<STYLE TYPE="TEXT/CSS"></STYLE><style type="text/css">
<!--
.wrapper {
width: 400px;
height: 300px;
}
.wrapper textarea {
width: 100%;
height: auto;
background-color: #888888;
border:0px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<TEXTAREA style='height:100%' ID=txtComments>
I have a css stylesheet defining width:100% and height:100% for textarea.special.
The goal is of course to dynamically wrap the text I am displaying.

Both work great with ie6 but the height:100% is not supported by ie5.

What could I do to still wrap vertically any text with ie5?

Any suggestion would be appreciate a lot! Hi briceder - Welcome to WebmasterWorld

I may not be understanding this properly.. but the only way to get an element to inherit height from it's parent is to have a height explicitly set on the parent element.

I tried this and it works fine in IE5, but may not be what you mean?
</textarea>
</div>

Produces the following:

note: I added a bit of code to mask the carriage returns used in the above example so that the code I added to display carriage returns does not apply to the textarea example. Otherwise html elements would mix with the CSS in a bad way. CSS and HTML do not often mix well or play together nice. Sometimes they fight. Not always, but sometimes. In this case they did so I added to the script a small command to make sure it ignored certain sections of the page that were marked with the words plain and plain1.

Method 2: modified strings

Taking a very different train of thought you could store the code in the MySQL database as is, retrieve it from the database, convert it to htmlentities then replace the carriage returns \r and/or newline \n with line breaks <br> using nl2br then just echo the new string and it will output as plain text just as if you had typed it out on an old fashioned typewriter. Everyone raise your hand who does not remember the old fashioned non–electric typewriters.

We want the string to display the code exactly as is without ignoring the carriage returns and without executing the code.

When the return key (or enter key) is entered to separate a line of text from another PHP stores \r and \n together as \r\n, also called line terminators, for each key stroke of the Enter key, but the Enter key strokes are not not echoed in the processed document. They are displayed in textareas however. You can read more about it here.

Here are a few other hidden variables that you can use to manipulate spaces and returns, but remember there are many more and even something called modifiers on top of that.

\040 = space
\s = whitespace
\r = carriage return (go to the left side of the notepad)
\n = newline (go down one line and don't go to the leftmost side)
^ = beginning of document
$ = end of document
+ = one or more (so \s+ = one or more whitespaces long)
m = modifier

The following is a script I used to help display these hidden variables with terms like blag and bleg:

$memo = str_replace("\r","blig",$memo); // replace carriage return with the word "blig"
$memo = str_replace("\n","blog",$memo); // replace newline with the word "blog"

I found a variation of the above code here in about the middle of the page. I used it to help understand where and how PHP and MySQL files are able to store the carriage returns that I type into a MySQL file or web page. I noticed that the carriage returns that I was typing in my scripts were not being destroyed when I saved my files because they were being retrieved and displayed in the textareas fields like in the first example shown above, but nowhere else. That meant they had to be stored somewhere as opposed to being erased as soon as I saved the web file.

When replacing the carriage returns the server was treating each carriage return \r\n as a single unit, so we will do the same. You can add a '+' after the \040 to replace sets of spaces (or whatever) listed in a row. For example the following

$memo = preg_replace("/^\040+/","blag",$memo);

will replace 1 or more of a set of leading spaces in a string with a single occurance of the word "blag", but...

preg_replace("/^\040/","blag",$memo);

will replace every occurrence of a leading space with the word "blag", so if you hit the spacebar 50 times at the beginning of your script and are using the above code then it will display the word "blag" 50 times in the beginning of your document.

Before moving on lets look at one more scenario. Lets say that you wanted to replace sets of line terminators (\r\n) that are 2 or more long with just two. In this case we won't use the +, because it would only be applied to the previous character like the \n in \r\n, but not \r\n, so we enclose it in parentheses and tell it it recognize any number of linked \r\n that are 2 or more in length with {2,} right after the (\r\n). The 2 is the minimum number of occurances the command will look for and since there is no number after the comma it will not look for a maximum number of links in the set, so it will look for two or more. If it were {2,4} it would look for sets of \r\n that are at least 2 \r\n in length, but not more than 4 in length.

The following is an example:

$summary=htmlentities($summary);
$summary=preg_replace('/((\r\n){2,})/',"<br><br>",$summary);
$summary=html_entity_decode($summary);

Now lets move on

This page is set up so that the parts of the document that are enclosed with [code] (with 'code' all in caps) is converted to htmlentities so as to display the code as is. The carriage returns \r in the 'code' sections are replaced with <br> in order to display the carriage returns as carriage returns instead of ignoring them. The reformatted [code] sections of the script is then echoed and it will look just as it was originally typed as if it were typed on an old fashioned type writer and the parts that were not contained within the [code] sections of the document are executed in the same way that they normally are.

For example if I type the following into my document (except with 'code' all in caps):

[code]
<p>this is text</p>
<a href="http://www.animeviews.com/index.php">my site</a>
</body>
[code]

The page will search the script for any and all parts that are enclosed in [code] and display it just as it is typed with carriage returns included. In this case HTML tags are not executed and every carriage return occurring is converted into a linebreak. The occurrences of [code] are removed as well and not displayed. The output looks like this:

Here is the complete script that I use to display code as is, but only where it is enclosed with the word 'code':

#### changes the [code] areas to display returns.
$i=1;
$summary = explode("code",$summary);
$a=count($summary);
while ($i<$a)
{
$summary[$i]=htmlentities($summary[$i]);
$summary[$i]=nl2br($summary[$i]);
$i=$i+2;
}
$i=0;
while ($i<$a)
{
if ($i%2 == 0)
{
####Change the non [code] sections to display returns
$summary[$i]=htmlentities($summary[$i]);
$summary[$i]=nl2br($summary[$i]);
}
####Add CSS to the [code] areas.
else $summary[$i]="<div class=\'withborder\'>$summary[$i]</div>";
$i=$i+1;
}
$summary = implode("",$summary);
#######
$summary = explode("[Plain]",$summary);
$i=1;
$a=count($summary);
while ($i<$a)
{
$summary[$i]=nl2br($summary[$i]);
$i=$i+2;
}
$summary = implode ("",$summary);
#######
echo "$summary";
?>

The CSS used to set the displayed code apart by displaying it in a lighter gray with a dashed line is:

As a side note, in order to get the code to display < as &lt use:

<?php
$memo="<b>hi there.</b>";
$memo=htmlspecialchars($memo);
echo htmlspecialchars($memo);
?>

Conclusion

Method 2 does everything that I wanted the first method to do only it resizes the height of the displayed script and won't have a scrollbar or be scrollable in certain browsers, nor does it need to be scrollable, because all of the content will be displayed.

Method 1 is still worth mentioning, because it can condense the script into a smaller area if need be and will use a scrollbar to scroll through the code. The scrollbar can be hidden as in the above example. The text can be made to be editable by the visitor as well.

Both methods have their uses, but I prefer the second method so that all the code can be displayed at once.

Some applications

The textarea boxes can be customized using CSS to change the background color or add a background picture,
The text typed in a textarea can be changed into a different font or can be made to be uneditable.
The border of the textarea can be changed, styled, or removed.
The scrollbar of the textarea can be removed.
The height and width of the textarea can be specified, but making the dimensions dynamic seems to be limited based on the browser you use.
If you want to get really radical you can use the above code to redesign many if not most aspects of HTML into a modified HTML that operates however you want.

Links

a good starter tutorial on regular expressions with Perl
differences between Perl and PHP
perl to php conversion chart in case you need it. the differences between perl and php are minor.
perl regular expression quick reference chart
ascii codes
html special chars cheat sheet
CSS textarea background This shows how to change the text area background.
remove scrollbar This shows how to remove the scrollbar. It hides it.
resize height This is a link to show how to dynamically resize the height of the textarea to fit the width of the content. This works with IE only. Till the other browsers fix this I can change the height myself. Otherwise it looks pretty good. With textarea I won't have to type in all of that &lg; stuff in order to get a "<" to display properly.
modify border This link shows how to modify the border of the textarea field.
PCRE Examples examples that I have written.
carriage returns
php.net links
PCRE syntax.
modifier.

TAGS: php, pcre, css