▼  Site Navigation Main About Search Articles  ▼  Anime + Manga Anime Reviews Anime Characters Gallery Screenshots Manga Reviews  ▼  Misc News Links to Webcomics Bible Quotes Member Control Panel  ▼  Forum etc. Forums Older Musings Wordpress
site version 7.3
How to display code
written by: admin


Date Written: 1/23/07 Last Updated: 4/17/10

This article is designed for the person who wants to learn how to easily display code as is without having to go through hoops to display snippets of code in a document while at the same time allowing other bits of code to execute properly.

There are two ways that I know of that can display code without having to enter the code in a special way for it to display properly.  The first uses textareas and the second is more complicated, but I will try to explain below.  It is my effort to display code in the way that I have seen forums do it.



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"><!--
body td{
font-family:Arial,Helvetica,Sans-serif;
}
--></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:


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

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:


<style type="text/css">
.withborder {
border-style: dashed;
border-width: 2px;
border-color: 525252;
padding-left:25px;
padding-right:50px;
PADDING-TOP:20px;
PADDING-BOTTOM:20px;
color:scrollbar;
background:gray;
margin: 12px 80px 12px 40px;
      }
</style>

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


Links


TAGS: css, pcre, php
Comments

Go to phpbb thread.
copyright 2005–2017