Display Codes in bbPress - HTML Text Formating Part 4

Let's continue what we started in this post & see more tags & markup for use in HTML & on bbPress powered forums.

The code tag is used to display codes in posts (HTML, Javascript, PHP, etc), its function is similar to the use of the [code] tag in bbCode.

There are two options to wrap the codes, the first is by using the <code> tag, & the second uses the back ticks "`", it's better to use these last because the first tag is a HTML tag, & as you'll going to use it to wrap "HTML", some conflicts may occur; in the other hand the back ticks "`" are used as special coding in bbPress forums, in fact they they are not part of HTML markup.

Let's see an example:

<code><script type="text/javascript">
<!-- alert("Hello world!"); //-->
</script></code>

(notice the forward slash "/" in the last part)

or

`<script type="text/javascript">
<!-- alert("Hello world!"); //-->
</script>`

would look:

<script type="text/javascript">
<!-- alert("Hello world!"); //-->
</script>



Now let's suppose the code you want to insert contains the <code> tag in it, that would lead to a conflict & an error in the final message, that's why it's better to use the "`" instead ... example:

<code><code><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></code></code>

Would look like this:

<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />

The second <code> tag was omitted, but if you use the back ticks instead:

`<code><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></code>`

The result would be this:

<code><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></code>

Special Coding Tags: HTML, PHP, Etc.

Besides the [code] tag (seen & explained in the previous lesson), there are other more specialized tags for codes but they are not used the same way by the different forums softwares or not used at all in some.

The [html] tag for example allows you to insert boxes containing HTML & to perform HTML syntax highlighting, but it only works in vBulletin & IP.Board powered forums.

In a SMF board it won't have any effect, & in a phpBB board it leads to an error in coding (non supported tag). If you're not sure what software your community uses read: What Kind of Forum are You Using?

Example:

[html]
<img src="image.gif" alt="image" />

<a href="testing.html" target="_blank">Testing</a>
[/html]

The colors you see in the code inside the box, were inserted automatically just by wrapping the code with [html] tag. They highlight HTML syntax.


HTML Code:

<img src="image.gif" alt="image" />

<a href="testing.html" target="_blank">Testing</a>

Another specialized coding tag: [php] tag. In a vBulletin based forum it will work same way [html] does but highliting PHP syntax. In a SMF forum it highlights syntax without creating a box or converting fonts, while in IP.Board and phpBB the tag is not supported & leads to an error if used.

Example:

[php]
$myvar = 'Hello World!';
for ($i = 0; $i < 10; $i++)
{
echo $myvar . "\n";
}
[/php]

Will look in a vBulletin Forum:

PHP Code:

$myvar = 'Hello World!';
for ($i = 0; $i < 10; $i++)
{
echo $myvar . "\n";
}

And in a SM (Simple Machines) Forum:

$myvar = 'Hello World!';
for ($i = 0; $i < 10; $i++)
{
echo $myvar . "\n";
}

Insert Codes into Your Posts

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

You can insert HTML, PHP, Javascript codes, etc into special boxes using bbCode, the text inserted in the code box will be converted to a fixed-width (monospace) font, & ensures that nothing from the code is lost when you submit your message.

The tag for code is [code]. Its use is not different from the use of other tags we saw, it should wrap the code you want to be in the box.

Example:

Let's wrap an example of Javascript code:

[code]
<script type="text/javascript">
<!-- alert("Hello world!"); //-->
</script>
[/code]

Here's the result you would get:

Code:

<script type="text/javascript">
<!--
    alert("Hello world!");
//-->
</script>